微信小程序自定义组件Component的使用

前言

之前有一篇博文介绍了小程序中模板template的使用。在使用的时候，虽然可以实现与组件相同的显示功能，但是template没有自己的生命周期，在操作模板上的控件时，事件的传递不好处理，而这些不方便都可以通过组件component来代替，先看一波效果图。

实现

1.创建component组件

首先如上图创建components文件夹，home-item就是最上面效果图的条目的组件模块。这里可以发现，和普通页面一样，组件也可以创建四个文件。在js文件中可以进行数据的绑定与父组件的交互。

home-item.json

{
  "component": true, 
  "usingComponents": {}  //可以使用其他组件
}

home-item.js

//(Component构造器)
Component({
  //一些组件选项
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },

  //组件的对外属性，属性设置中可包含三个字段,type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数    
  properties: {
    // 活动封面
    coverUrl: {
      type: String,
      value: "http://img.youpenglai.cn/meetingpic/0b24376c43b1c372076aa65253b2f0ca123.jpg"
    },

    // 活动标题
    activityTitle: {
      type: String,
      value: "我是Title"
    },

    // 打卡时间范围
    signTimeRange: {
      type: String,
      value: "00:00-23:59"
    },

    // 是否是组织者
    organizerStatus: {
      type: Number,
      value: 0
    },

    // 是否是组织者
    signTimes: {
      type: Number,
      value: 0
    },

    // 打卡状态
    signStatus: {
      type: Number,
      value: 0
    }
  },
  //组件的内部数据，和 properties 一同用于组件的模版渲染
  data:{
    isShowOrganizer:false,
  },
  //组件的方法，包括事件响应函数和任意的自定义方法 
  methods: {
    // 跳转活动详情  
    activityDetailTap: function(e) {
      var currentPosition = e.currentTarget.dataset.currentPosition
      this.triggerEvent('signEvent', {
        'currentPosition': currentPosition
      })
    }
  }
  // 组件生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function(){},
  moved: function(){},
  detached: function(){},

})

在这里wxml和wxss文件就不介绍了。看下父页面如何引用子组件。

home.json

父组件的json文件中引入组件

"usingComponents":{
     "home-item":"../components/home-item/home-item"
}

home.wxml

<!-- 首页列表 -->
  <view class='join-layout'>
    <block wx:for="{{joinDatas}}" wx:for-item="joinItem">
      <!-- 这里是引入的组件名称 -->
      <home-item id="homeItem"
           <!--绑定子组件发出的事件-->
           bind:signEvent="signEvent" 
           coverUrl='{{joinItem.dakaPic}}'
           activityTitle='{{joinItem.dakaName}}'
           signTimeRange='{{joinItem.dakaTimeRange}}'
           organizerStatus='{{organizerStatus}}'
           signTimes='{{joinItem.dakaNum}}'
           signStatus='{{joinItem.status}}'>
    </home-item>
  </block>
  </view>

home.js

//父组件接收子组件的事件进行相应的操作
 signEvent: function(e) {
    // console.log(e)
    // 获取点击的打卡位置
    var signPosition = e.detail.currentPosition
    var dakaBean = this.data.joinDatas[signPosition]
    // 已经打卡
    wx.navigateTo({
      url: '../detail/joined-detail/joined-detail?actId=' + dakaBean.actId,
    })

    // wx.navigateTo({
    //   url: '../detail/not-join/not-join?actId=' + dakaBean.actId,
    // })

    // if (dakaBean.status == 0) {
    //   utils.showToast("none", "当前时间不在打卡时间范围内,请耐心等待")
    // } else {
    //   // 未打卡
    //   wx.navigateTo({
    //     url: '../detail/joined-detail/joined-detail?actId=' + dakaBean.actId,
    //   })
    // }
  },

父子组件之间需要做事件的传递，首先是在子组件中通过this.triggerEvent(‘signEvent’, { }) 来发送事件，父组件在子组件上进行事件绑定，在js文件中来响应事件。

获取数据的方式这里不做介绍，上述代码是父组件的wxml中对子组件进行数据绑定，上述的coverUrl等参数是在组件中声明的属性值，这里作传值用。组件的引入只需要在父组件的json文件中通过usingComponents引入，不需要像使用template在wxml和wxss中将子组件的wxml布局和wxss样式也引入。