Skip to main content

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.