template（模板）是wxml中提供的功能，我使用template主要在于两方面：
- 对于某些相同功能，在模板中定义一些片段，然后在不同的地方使用；
- 在模板中单独绑定事件，并暴露回调接口，以便于不同页面的不同逻辑处理；
template的简单使用
- 定义模板
- 创建模板文件夹template，用来管理项目中的模板；
- 在文件夹下创建.wxml、.wxss、.js文件（.wxml定义模板，.wxss定义模板的样式，.js处理模板事件）；
- 使用name属性，作为模板的名子然后在<template></template>（或<template />）内定义代码片段;
我这里要实现的是一个单选按钮，代码如下：
.wxml中代码
<template name='radioButton'>
<view class='radio-button' style='background:{{bgColor}}' data-index='{{index}}' data-item='{{item}}' bindtap='radioTap'>{{item}}</view>
</template>
<template name='checkBoxButton'>
<view class='check-box-button' style='background:{{bgColor}}' data-index='{{index}}' data-item='{{item}}' bindtap='checkboxTap'>{{item}}</view>
</template>
注意： 1. 一个.wxml文件中是可以定义多个模板的，它们通过name属性来区分；
2. 模板中的数据是data展开后的属性；
.wxss模板样式
.radio-button {
margin: 5px 2.5px 5px 2.5px;
padding: 3px 15px 3px 15px;
align-self: center;
text-align: center;
font-size: 14px;
color: #323232;
border-radius: 2px;
border: 1rpx solid lightgray;
}
- 使用模板
- 在需要使用模板的.wxml文件中使用<import />或<include />引入模板的.wxml文件路径；
- 使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入；
index.js中的初始化数据
Page({
data: {
// template数据
radioList: ['ios', 'swift', 'android', '销售', '运营', 'ios', 'swift', 'android', '销售', '运营'],
}
})
在index.wxml中引入radioButton.wxml文件
<!-- 模板应用 -->
<view class='radio-container-view'>
<!-- 通过import或include引入模板文件路径 -->
<import src='../../template/radioButton/radioButton' />
<block wx:for='{{radioList}}' wx:key='{{index}}' wx:for-index='index' wx:for-item='item'>
<template is="radioButton" data='{{item: item, index: index, bgColor: "#fff"}}'></template>
</block>
</view>
is 属性也可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板
<!-- 模板应用 -->
<view class='radio-container-view'>
<!-- 通过import或include引入模板文件路径 -->
<import src='../../template/radioButton/radioButton' />
<block wx:for='{{radioList}}' wx:key='{{index}}' wx:for-index='index' wx:for-item='item'>
<template is='{{index % 2 == 0 ? "radioButton" : "checkBox"}}' data='{{item: item, index: index, bgColor: "#fff"}}'></template>
</block>
</view>
注意：1. 模板只能通过data属性进行数据传递；
2. data的数据是字典形式的，以上实例是我自己自定义的数据形式，还有一种就是你传入的数据本身就是一个字典形式的，那么你可以写成data='{{...item}}'（这种写法是ES6的写法，... 是展开运算符，在模板中不需要再{{item.name}} 而是直接使用{{name}}字段 ）；
- 使用模板样式
- 在需要使用模板样式的.wxss文件中使用 @import 关键字引入模板的.wxss文件路径即可；或者，直接在app.wxss中引入，这样只需要引入一次，其他文件就不用引入了。
在index.wxss文件中引入模板的.wxss文件路径
/* 使用@import引入template的wxss布局样式 */
@import "../../template/radioButton/radioButton";
- 模板的作用域
模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。
template事件绑定和回调
目前还不知道如何绑定和回调模板中的时间，后续会更新。。。
有已经实现的小伙伴，可以进行沟通交流！
