前言

之前有一篇博文介紹了小程式中模板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樣式也引入。