微信小程序 自己制作小组件实例详解

下面是关于“微信小程序自己制作小组件实例详解”的攻略：

什么是小组件

小组件是一种自由组合，具备特定功能的组合、封装后的组件库。作为组件库的一部分，一个好的小组件应该能够在各种应用场景下有良好的兼容和复用性。

制作小组件

1.创建小组件

使用命令行创建小组件（假设小组件名字为 my-component）：

# 使用命令行创建自定义组件
$ miniprogram-cli init --name my-component --type component

执行完以上命令后，我们会看到一个 my-component 的文件夹被创建。这个文件夹包含了我们所需要的两个文件：

├── /components/my-component/
│ ├── index.js
│ └── index.json

index.js 中定义了组件的逻辑，包括生命周期、事件处理等等，index.json

则是组件的配置文件。index.json 中最常用的属性就是 component 字段，用来声明当前文件夹是一个组件。

示例：

{
  "component": true,
  "usingComponents": {}
}

2.编写小组件

首先在 index.js 中声明自己的组件，并且导出:

Component({
  properties: {...},
  data: {...},
  methods: {...}
})

在这里，我们有三个重要的属性：

• properties：组件的对外属性，用户可以在标签上通过属性的方式传递数据给组件；
• data：组件内部维护的状态信息，可以在组件内部自由改变；
• methods：组件的事件处理函数，可以在组件内定义各种触发事件的函数。

示例：

Component({
  properties: {
    text: {
      type: String,
      value: ''
    }
  },
  data: {
    count: 0
  },
  methods: {
    handleClick: function (event) {
      let count = this.data.count
      this.setData({
        count: ++count
      })
      this.triggerEvent('click', { count })
    }
  }
})

3.添加事件

在组件内部使用this.triggerEvent()方法，可以在小程序组件间实现传值和事件触发。

示例：

Component({
  methods: {
    handleTap: function () {
      this.triggerEvent('myevent', { data: 'test' })
    }
  }
})

当小程序页面引入了该组件后（可以使用usingComponents属性引入），就可以在组件标签上监听此事件并响应。

示例：

<my-component bind:myevent="myevent" />

4.自定义样式

小组件也可以拥有自己的样式。在组件的 .wxss 文件中编写样式：

示例：

/* index.wxss */
.text {
  color: red;
}

在组件的 .wxml 文件中引用样式：

示例：

<!-- index.wxml -->
<view class="text">{{text}}</view>

5.组件化开发

当一个小程序变得越来越大时，我们建议你采用组件化开发的方式。通过将页面拆分成若干个组件，每个组件维护自己的状态和逻辑，这样就可以使得代码更加易于维护和扩展。

示例：

例如在一个长列表页中，可以将每一项的渲染拆分成一个独立的组件；或者在一个固定底部的浮动按钮中，可以将按钮的样式和逻辑作为一个独立的组件进行开发。

总结

小组件的开发，让我们在小程序的开发中不在仅仅局限于页面，还能够更好的实现代码复用和高内聚低耦合的开发模式。小组件开发的过程中，我们还可以自定义属性，添加事件，自定义样式等等，这些小技巧都非常有用，值得我们在实际开发中去体会和运用。