最近在做小程序項目，由于是多人開發(fā)，首先要考慮項目組件的實現，俗話說的好：“項目未動，組件先行”~

組件我用的是小程序的template，先上項目的目錄架構

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>

在具體頁面引用：

• import引入template資源

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

• 調用template并傳入數據

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

• permis數據必須在data上聲明：

permis: {
  title: '權限設置',
  name: '所有人可見',
  icon: '../../img/p.png',
},

• 綁定事件actionSheetChange：

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

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

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

也就是說以template實現的組件需要綁定事件

• 要么把事件實現放在具體調用頁面中通過外圍包裹一個view元素傳入事件

  也就是

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

• 要么就在template里面寫死，這種組件在調用頁面中只能用一次，不然多個組件只能共用一個事件。

綜上，template實現組件形式要做到良好封裝性還要等微信開放相關功能才能實現了，目前只能帶著手銬上路。