1.

什么叫做组件?

2.

组件就是一组功能和逻辑的封装,以供重复使用,如icon,.image等等

3.

像icon,image这种是微信已内置了的组件,可以直接使用

4.

开发者根据自身的需求也可以自定义组件

5.

自定义组件的两个要点:配置和事件

6.

配置通常指的就是属性,事件指的就是要处理的逻辑响应

7.

组件的构成:一个组件是由js,json,wxml,wxss这4个文件构成

8.

在微信开发者工具中,创建组一个件(和创建一个页面类似,选择Component直接完成这4个文件的创建):

先创建一个目录(componets)再文件夹(item)选中item文件夹右键Component输入组件的名称9.

这样就创建了一个包含4个文件(js,json,wxml,wxss)的组件--如下称为item组件

10.

json配置:

11.

在完成上面item组件的创建以后,打开item.json

{"component":true,//表示item这4个文件是一个定义组件"usingComponents":{}//可选项,此属性表示在这个组件中还可使用其它组件}12.

js创建:

13.

打开item.js,这个文件定义item组件的属性列表,数据及方法

//定义的组件Component({//组件的属性列表,我这里定义了2个属性(content和iconTypes),根据需求自己定义properties:{content:{type:String,value:''},iconTypes:{type:Array,vlaue:[]}},//组件的数据data:{'success','info','warn','waiting','cancel','download','search','clear'},//组件的方法列表methods:{clickMe:function(){//根据需求定义事件console.log("youhaveclickedme");}}})14.

item.wxss样式:

15.

自定义组件拥有自己的wxml模版和wxss样式

16.

需要注意的是，wxss样式只能通过类选择器(.class)来指定

.btn{//btn是组件item.wxml中的button标签的类样式color:red}17.

item.wxml模板:

18.

item.wxml的内容就是组件模板

view!--使用组件中的content属性--!--给conent一个值hello,hello会传递到item.js中的content属性中,然后使用{{}}把它取出来--viewcontent'hello'{{content}}word/view!--使用组件中的data--blockwx:for'{{array}}'icontype'{{item}}'/icon/block!--使用组件中的methods--viewbuttonsize'mini'bindtap'clickMe'class'btn'cilckhere/button/view/viewview根据情况,可任意增加或减少,整个页面内容就是组件模板/view19.

index页面创建:

20.

现在index.wxml页面要使用item模板组件,则需要在index.json中做如下配置:

{"navigationBarTitleText":"index页面","usingComponents":{"myItem":"/components/item/item"}}21.

这就表示要使用的组件是在/components/item/item,组件名称(标签名)是myItem

22.

因为我把组件的标签名定义为了myItem,所以myItem在index页面中为可使用的一个标签:

view本页面为index.wxml,如下的myItem为自定义组件/itemviewmyItemclick/myItem/viewview本页面的其它内容/view23.

myItem标签展示出来的内容就是上面item.wxml文件中的所有内容

24.

而myItem仅仅是index.wxml中的一个标签

25.

触发相应事件:

26.

在index.wxml中的自定义组件绑定事件,通过点击自定义组件myItem触发

27.

如上所示,模板组件会触发一个事件,再触发成功回调函数(如下this.triggerEvent)

!--index.wxml--viewmyItembindtap"confirm"click/myItem!--给myItem绑定一个点击事件confirm--/view/*index.js*/Page({data:{},confirm:function(){console.log("触发成功");}})/*item.js*/Component({},data:{},methods:{clickMe:function(){console.log("youhaveclickedme");//触发成功回调this.triggerEvent('confirm');//triggerEvent触发指定对象的指定事件,我点击的是myItem标签,this也就表示它}}})28.

solt:

29.

在组件模板中可以提供一个slot节点,作用是丰富组件模块

30.

比如index.wxml中有一个带slot属性的标签view,则使用时view标签会占据到item.wxml中的solt标签

31.

默认情况下，一个组件模板中只能有一个slot,需要使用多slot时，可以在组件js中声明启用

32.

模板组件中,多个slot节点以name区分,所以为每一个slot节点取一个name值

/*item.js*/Component({options:{multipleSlots:true//启用多slot支持}})!--item.wxml--viewslotname"one"/slotslotname"two"/slot/view!--index.wxml--viewmyItemiconslot"one"type'success'/iconviewslot"one"插入到组件slotname"one"中的内容/viewtextslot"two"插入到组件slotname"two"中的内容/text/myItem/view33.

结果是这样的:

34.

这样index.wxml中的icon,view,text三个标签就替代到item.xwml中的相应的slot节点