小程序自定义组件-即速应用

什么叫做组件?

组件就是一组功能和逻辑的封装, 以供重复使用, 如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>

结果是这样的 :