微信小程序自定义组件Component的使用（附源码）

1.创建component组件

首先如上图创建components文件夹，home-item就是最上面效果图的条目的组件模块。这里可以发现，和普通页面一样，组件也可以创建四个文件。在js文件中可以进行数据的绑定与父组件的交互。

home-item.json

{"component": true, "usingComponents": {} //可以使用其他组件
}


home-item.js

//(Component构造器)
Component({//一些组件选项options: {multipleSlots: true // 在组件定义时的选项中启用多slot支持},//组件的对外属性，属性设置中可包含三个字段,type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数 properties: {// 活动封面coverUrl: {type: String,value: "http://img.youpenglai.cn/meetingpic/0b24376c43b1c372076aa65253b2f0ca123.jpg"},// 活动标题activityTitle: {type: String,value: "我是Title"},// 打卡时间范围signTimeRange: {type: String,value: "00:00-23:59"},