Mini-program Component Source Code

The Mini-program Component Source Code is consistent with the implementation of WeChat Official Mini-Program Custom Components.

Source Code Example

Configuration

src/mp/components/button/index.json

{
  "component": true
}

js Implementation

src/mp/components/button/index.js

Component({
  options: {
    multipleSlots: true,
  },
  properties: {
    style: {
      type: String,
      value: "",
    },
    text: {
      type: String,
      value: "Button",
    },
    size: {
      type: String,
      value: "default",
    },
    type: {
      type: String,
      value: "primary",
    },
    plain: {
      type: Boolean,
      value: false,
    },
    loading: {
      type: Boolean,
      value: false,
    },
    disabled: {
      type: Boolean,
      value: false,
    },
  },
  data: {},
  methods: {
    triggerCustomEvent(e) {
      this.triggerEvent("customevent", e);
    },
    _test() {
      console.log("Call the component internal method");
    },
  },
  attached() {
    this.triggerEvent("attached", {
      methods: {
        innermethod: this._test,
      },
    });
  },
});

wxml Implementation

src/mp/components/button/index.wxml

<button
  class="wx-button"
  style="{{style}}"
  size="{{size}}"
  type="{{type}}"
  plain="{{plain}}"
  loading="{{loading}}"
  disabled="{{disabled}}"
  bind:tap="triggerCustomEvent">
    <block wx:if="{{!!text}}">{{text}}</block>
    <block wx:else><slot name="titleSlot"></slot></block>
</button>

Style

src/mp/components/button/index.wxss

/* This example does not use additional styles, so this file is empty. */

Source Code Parameter Description

The following describes only the parameter bindings for index.js and Component Configuration.

You also need to follow the development specifications of WeChat Mini Program to complete the parameter binding for index.wxml and index.js.

properties

Corresponds to the data field in Component Configuration. Parameters configured by users in the Data panel of the low-code editor will be passed through to this field.

properties.style

Platform reserved field. Parameters configured by users in the Style panel of the low-code editor will be passed through to this field.

methods

Corresponds to the events field in Component Configuration. Throw custom events at the appropriate time via the triggerEvent method.