1.

官方介绍：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

2.

本次Demo目录结构：

3.

page下两个文件夹，一个components，用于存放组件；一个home，为我们的主要页面；

4.

components里面两个组件，一个banner，一个news，都是都过右键新建component生成的；

一，基本使用：5.

第一步：配置home.json使页面能使用组件；

6.

home.json

{"usingComponents":{"news-item":"../components/news/news-item","banner-item":"../components/banner/banner-item"}}7.

第二部：使用组件；

8.

home.wxml

banner-item/banner-item二，数据绑定：9.

home.wxml

news-itemnews-arr"{{newsInfoArr}}"/news-item10.

newsInfoArr是页面home里的数据，而news-arr为组件news-item里的对外属性newsArr：

/***组件的属性列表(对外属性)*/properties:{//type表示属性类型、value表示属性初始值、observer表示属性值被更改时的响应函数newsArr:{type:Array,value:'hehe',observer:function(newVal,oldValue){console.log(newVal)console.log(oldValue)}}},/***组件的初始数据(私有数据)*/data:{},11.

组件news-item拿到父级给的数据之后，可以进行加工、在页面上展示。

三，节点插入：12.

在组件模板中可以提供一个slot节点，用于承载组件引用时提供的子节点。

13.

news-item.wxml

viewclass'news'slotname"befor"/slotblockwx:for"{{newsArr}}"wx:key"index"/blockslotname"after"/slot/view14.

（*由于这里用了多个solt所以需要在news-item.js里面设置下，单个无需设置）

options:{multipleSlots:true}15.

home.wxml

news-itemnews-arr"{{newsInfoArr}}"viewslot"befor"之前/viewviewslot"after"之后/view/news-item16.

效果：

四：事件监听：17.

news-item.wxml

18.

在每个item里面绑定一个事件ontap

viewclass'news'slotname"befor"/slotblockwx:for"{{newsArr}}"wx:key"index"viewclass'news-list'data-item'{{item}}'data-index'{{index}}'catchtap'onTap'viewimagesrc'http://10.128.5.150:16801/filesystem/download/10/2019/4/2/3fd390c6-6475-47d8-bcc9-452efbe1e9d1.jpg/mic'//viewviewclass'news-info'textclass'news-title'{{item.name}}/texttextclass'news-desc'{{item.desc}}/text/view/view/blockslotname"after"/slot/view19.

news-item.js

methods:{onTap:function(e){//detail对象，提供给事件监听函数constmyEventDetail{e:e}//触发事件的选项constmyEventOption{}this.triggerEvent('myevent',myEventDetail,myEventOption)}}20.

传递给事件“myevent”，供home页面使用

21.

home.wxml

news-itemnews-arr"{{newsInfoArr}}"bind:myevent'onMyEvent'viewslot"befor"之前/viewviewslot"after"之后/view/news-item22.

然后在home页触发onMyEvent方法：

onMyEvent(e){constdetaile.detail.e.currentTarget.dataset;wx.showModal({title:'json如下',content:JSON.stringify(detail),})},23.

效果：

五：生命周期24.

生命周期方法页可以直接定义在Component构造器的第一级参数中，不过还是推荐在lifetimes字段内进行声明，这样优先级最高。

lifetimes:{created(){//在组件实例刚刚被创建时执行},attached(){//在组件实例进入页面节点树时执行},ready(){//在组件在视图层布局完成后执行},moved(){//在组件实例被移动到节点树另一个位置时执行},detached(){//在组件实例被从页面节点树移除时执行},error(err){//每当组件方法抛出错误时执行}}