小程序自定义组件

什么叫做组件?

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