小程序自定义组件开发指南

2024-01-26 18:46:40







## 前言

小程序自定义组件是微信官方推出的功能，允许开发者创建自己的组件库，并将其应用到多个小程序中。自定义组件具有封装性、复用性和独立维护性，能够极大地提高小程序的开发效率和维护效率。

## 创建自定义组件

创建一个自定义组件非常简单，只需创建一个以 `.wxml` 为后缀的文件，并在其中编写组件的模板。然后，再创建一个以 `.js` 为后缀的文件，并在其中编写组件的逻辑。最后，在 `app.json` 文件中注册该组件，就可以使用了。

// component.wxml

Hello, {{name}}!

// component.js
Component({
properties: {
name: {
type: String,
value: 'World'
}
}
});


## 使用自定义组件

在小程序中使用自定义组件也非常简单，只需在 `wxml` 文件中引用组件，并指定组件的属性即可。

```

wxml 数据绑定

wxml 数据绑定是小程序中的一种非常重要的技术，它允许父组件向子组件指定属性设置数据。在子组件中，可以通过 properties 对象接收外部（父）组件传过来的自定义属性数据，可以是对象、数组、基本数据类型等。

// component.wxml
<view>
  Hello, {{name}}!
</view>

// component.js
Component({
  properties: {
    name: {
      type: String,
      value: 'World'
    }
  }
});

// page.wxml
<view>
  <component is="my-component" name="{{username}}"></component>
</view>

事件通信

事件通信是小程序中另一种非常重要的技术，它允许子组件通过 this.triggerEvent() 向父组件传递数据，可以传递任意数据，父组件通过绑定 bindEvent 事件监听子组件触发的事件，从而实现父子组件之间的通信。

// component.js
Component({
  methods: {
    onButtonClick() {
      this.triggerEvent('buttonClick', {
        message: 'Hello, World!'
      });
    }
  }
});

// page.wxml
<view>
  <component is="my-component" bindEvent="buttonClick" onButtonClick="onButtonClick"></component>
</view>

// page.js
Page({
  onButtonClick(e) {
    console.log(e.detail.message); // Hello, World!
  }
});