微信小程序--自定义组件

Posted 2021-06-02 黄小龙

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

自定义组件的创建

一个自定义组件由 json wxml wxss js 4个文件组成。
1.json文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

{
  "component": true
}

2.在 wxml 文件中编写组件模板：

<view class="inner">
  {{innerText}}
</view>
<slot></slot>

3.在 wxss 文件中加入组件样式：

/*注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。*/
.inner {
  color: red;
}

4.在 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法。（组件的属性值和内部数据将被用于组件 wxml 的渲染，其中，属性值是可由组件外部传入的）：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: \'default value\',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () { }
  }
})

自定义组件的使用

1.使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

2.在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>

自定义组件使用时要注意的一些细节：

• WXML 节点标签名只能是小写字母、中划线和下划线的组合
• 自定义组件也可以引用自定义组件
• 自定义组件和页面所在项目根目录名不能以“wx-”为前缀

详细介绍参考微信官方文档