小程序组件源码

小程序组件源码，和 微信官方小程序自定义组件 的实现一致。

源码示例

配置

src/mp/components/button/index.json

{
  "component": true
}

js 实现

src/mp/components/button/index.js

Component({
  options: {
    multipleSlots: true,
  },
  properties: {
    style: {
      type: String,
      value: "",
    },
    text: {
      type: String,
      value: "按钮",
    },
    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("调用组件内部方法");
    },
  },
  attached() {
    this.triggerEvent("attached", {
      methods: {
        innermethod: this._test,
      },
    });
  },
});

wxml 实现

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>

样式

src/mp/components/button/index.wxss

/* 本示例没有用到额外的样式，所以该文件为空。 */

源码参数说明

下面仅介绍了 index.js 和 组件配置 的参数绑定。

你还需要遵循微信小程序的开发规范，完成 index.wxml 和 index.js 的参数绑定。

properties

和 组件配置 的 data 字段对应，用户在低代码编辑器 数据 栏里配置的参数，会被透传到该字段内。

properties.style

平台保留字段，用户在低代码编辑器 样式 栏里配置的参数，会被透传到该字段内。

methods

和 组件配置 的 events 字段对应，通过 triggerEvent 方法，在合适的时机抛出自定义事件。