最近在做小程序項(xiàng)目，由于是多人開(kāi)發(fā)，首先要考慮項(xiàng)目組件的實(shí)現(xiàn)，俗話說(shuō)的好：“項(xiàng)目未動(dòng)，組件先行”~

組件我用的是小程序的template，先上項(xiàng)目的目錄架構(gòu)

form-action-sheet組件wxml代碼

<template name="form-action-sheet">
  <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">
    <block wx:for="{{actionSheetItems}}">
      <action-sheet-item bindtap="itemChange" class="item" data-id="{{item.id}}">
          {{item.name}}
      </action-sheet-item>
    </block>
    <action-sheet-cancel class="cancel">取消</action-sheet-cancel>
  </action-sheet>
</template>

在具體頁(yè)面引用：

• import引入template資源

<import src="../../compoent/form-action-sheet/form-action-sheet.wxml" />

• 調(diào)用template并傳入數(shù)據(jù)

<view bindtap="showHideActionSheet">
  <template is="form-select-default" data="{{...permis}}"/>
</view>

• permis數(shù)據(jù)必須在data上聲明：

permis: {
  title: '權(quán)限設(shè)置',
  name: '所有人可見(jiàn)',
  icon: '../../img/p.png',
},

• 綁定事件actionSheetChange：

showHideActionSheet: function() {
  wx.showActionSheet({
    itemList: params,
    success: function(res) {
      success(res);
    },
    fail: function(res) {
      fail(res);
    }
  })
}

這里遇到巨坑的問(wèn)題是，事件不能以變量的形式傳入template，即如果需要在template上綁定如bindtap事件的話，事件名不能從具體調(diào)用頁(yè)面中傳入變量

上面代碼中要給bindchange事件傳一個(gè)函數(shù)的話只能傳具體函數(shù)名，不能傳入變量。。。

也就是說(shuō)以template實(shí)現(xiàn)的組件需要綁定事件

• 要么把事件實(shí)現(xiàn)放在具體調(diào)用頁(yè)面中通過(guò)外圍包裹一個(gè)view元素傳入事件

  也就是

<view bindtap="showHideActionSheet">
  <template is="form-select-default" data="{{...permis}}"/>
</view>

• 要么就在template里面寫(xiě)死，這種組件在調(diào)用頁(yè)面中只能用一次，不然多個(gè)組件只能共用一個(gè)事件。

綜上，template實(shí)現(xiàn)組件形式要做到良好封裝性還要等微信開(kāi)放相關(guān)功能才能實(shí)現(xiàn)了，目前只能帶著手銬上路。