小程序自定义组件

什么叫做组件?组件就是一组功能和逻辑的封装, 以供重复使用, 如icon,. image等等像icon, image这种是微信已内置了的组件, 可以直接使用开发者根据自身的需求也可以自定义组件自定义组件的两个要点: 配置 和 事件配置通常指的就是属性, 事件指的就是要处理的逻辑响应 组件的构成: 一个组件是由 js, json, wxml, wxss 这4个文件构成在微信开发者工具中, 创建组一个件(和创建一个页面类似, 选择Component直接完成这4个文件的创建):先创建一个目录(componets)再文件夹(item)选中item文件夹右键Component输入组件的名称这样就创建了一个包含4个文件(js, json, wxml, wxss)的组件  — 如下称为 item组件 json配置:在完成上面item组件的创建以后, 打开item.json{  “component”: true,           // 表示item这4个文件是一个定义组件  “usingComponents”: {}        // 可选项, 此属性表示在这个组件中还可使用其它组件} js创建:打开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(“you have clicked me”);    }  }})item.wxss 样式:自定义组件拥有自己的 wxml 模版 和 wxss 样式 需要注意的是，wxss样式只能通过类选择器(.class)来指定.btn {            // btn 是组件item.wxml 中的button标签的类样式  color: red}item.wxml 模板: item.wxml 的内容就是 组件模板<view>  <!–使用组件中的content属性–>      <!–给conent一个值hello, hello会传递到item.js中的content属性中, 然后使用{{}}把它取出来 –>  <view content=’hello’>{{content}}  word</view>  <!–使用组件中的data–>  <block  wx:for='{{array}}’>    <icon type='{{item}}’></icon>  </block>    <!–使用组件中的methods–>  <view>    <button size=’mini’ bindtap=’clickMe’ class=’btn’>cilck here</button>  </view></view><view>根据情况, 可任意增加或减少, 整个页面内容就是组件模板</view>index页面创建:现在 index.wxml 页面要使用item模板组件, 则需要在index.json中做如下配置:{  “navigationBarTitleText”: “index页面”,  “usingComponents”: {  “myItem”: “/components/item/item”  }}这就表示要使用的组件是在/components/item/item, 组件名称(标签名)是myItem因为我把组件的标签名定义为了myItem, 所以myItem在index页面中为可使用的一个标签:<view>本页面为index.wxml, 如下的myItem为自定义组件</item><view>  <myItem>click</myItem></view><view>本页面的其它内容</view>myItem标签展示出来的内容就是上面item.wxml文件中的所有内容而myItem仅仅是index.wxml中的一个标签 触发相应事件:在index.wxml中的自定义组件绑定事件, 通过点击自定义组件myItem触发如上所示, 模板组件会触发一个事件, 再触发成功回调函数 (如下this.triggerEvent)<!– index.wxml –><view>  <myItem bindtap=”confirm”>click</myItem>    <!– 给myItem绑定一个点击事件confirm –></view>/*index.js*/Page({  data: {},  confirm : function() {    console.log(“触发成功”);  }})/*item.js*/Component({ }, data: {   }, methods: {    clickMe: function () {      console.log(“you have clicked me”);      // 触发成功回调      this.triggerEvent(‘confirm’);   // triggerEvent触发指定对象的指定事件, 我点击的是myItem标签, this也就表示它    }  }})solt:在组件模板中可以提供一个 <slot> 节点, 作用是丰富组件模块比如 index.wxml中有一个带slot属性的标签 view, 则使用时 view标签会占据到item.wxml中的<solt>标签默认情况下，一个组件模板中只能有一个slot, 需要使用多slot时，可以在组件js中声明启用模板组件中, 多个slot节点以name区分, 所以为每一个slot节点取一个name值/*item.js*/Component({  options: {    multipleSlots: true     // 启用多slot支持  }})<!– item.wxml –><view>  <slot name=”one”></slot>  <slot name=”two”></slot></view><!– index.wxml –><view>  <myItem>       <icon slot=”one” type=’success’></icon>    <view slot=”one”>插入到组件slot name=”one”中的内容</view>    <text slot=”two”>插入到组件slot name=”two”中的内容</text>  </myItem></view>结果是这样的 :  这样index.wxml中的icon, view, text三个标签就替代到item.xwml中的相应的slot节点