小程序组件开发坑

由于项目需要，做了一个微信小程序组件。功能类似radio，跟我们常用的toggle一样。
由于小程序不能像我们网页一样，通过$(“#id”)这样来设置属性。所以只能通过小程序页面的data来跟页面控件绑定，通过改变data来改变页面控件的属性。
wxml页面代码如下，注意这里标签是template

<template name="toggle">    <button id='{{toggleId}}' bindtap="setA" class="{{toggleAClass}}">{{labelA}}</button>    <view style="width:10px;height:10px;display:inline-block;"></view>    <button id='{{toggleId}}' bindtap="setB" class="{{toggleBClass}}">{{labelB}}</button>    <input style="display:none"  type='text' name="{{toggleName}}" value="{{toggleValue}}" /></template>

js代码如下，调用时候，通过构造函数来注册组件

/** * 单选按钮组件 * 2017年10月12日17:58:25 * tdq */function ToggleClass() {  //构造函数  function Toggle() {    let pages = getCurrentPages()    let curPage = pages[pages.length - 1]    this.__page = curPage    //附加到page上，方便访问    curPage.toggle = this    curPage.setData({      '__toggle__.toggleId': "toggle",      '__toggle__.toggleAClass': "togglea__class",      '__toggle__.toggleBClass': "toggleb__class",      '__toggle__.toggleValue': 1,    })    curPage.setA = function (e){      var id = e.target.id      if(id=='quhuo'){        curPage.setData({          '__quhuo__.toggleAClass': 'toggleb__class',          '__quhuo__.toggleBClass': 'togglea__class',          '__quhuo__.toggleValue': 0,        })      }      else if(id=='tuiban'){        curPage.setData({          '__tuiban__.toggleAClass': 'toggleb__class',          '__tuiban__.toggleBClass': 'togglea__class',          '__tuiban__.toggleValue': 0,        })      }      else{        curPage.setData({          '__toggle__.toggleAClass': 'toggleb__class',          '__toggle__.toggleBClass': 'togglea__class',          '__toggle__.toggleValue': 0,        })      }    }    curPage.setB = function (e) {      var id = e.target.id      if (id == 'quhuo') {        curPage.setData({          '__quhuo__.toggleAClass': 'togglea__class',          '__quhuo__.toggleBClass': 'toggleb__class',          '__quhuo__.toggleValue': 1,        })      }      else if (id == 'tuiban') {        curPage.setData({          '__tuiban__.toggleAClass': 'togglea__class',          '__tuiban__.toggleBClass': 'toggleb__class',          '__tuiban__.toggleValue': 1,        })      }      else {        curPage.setData({          '__toggle__.toggleAClass': 'togglea__class',          '__toggle__.toggleBClass': 'toggleb__class',          '__toggle__.toggleValue': 1,        })      }    }    return this  }  return new Toggle()}module.exports = {  Toggle: ToggleClass}

样式我直接写在了项目app.wxss上了。
调用的时候，需要在调用页面wxml上加

<import src="../../../utils/toggle/toggle.wxml"/>

在页面需要使用的地方加上（这里data=”{{…toggle}}”是关键，传递数据就是在这里传）

<template is="toggle" data="{{...__toggle__}}"/>

在app.js文件上加

let { Toggle } = require('utils/toggle/toggle.js')

在

App({  Toggle  })

在被调用页面js加上，在onload事件里面初始化控件

let app = getApp()onLoad: function (options) {    new app.Toggle()    }