小程序组件实现

最近在做小程序项目，由于是多人开发，首先要考虑项目组件的实现，俗话说的好：“项目未动，组件先行”~
组件我用的是小程序的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实现组件形式要做到良好封装性还要等微信开放相关功能才能实现了，目前只能带着手铐上路。