小程序-template模板

template（模板）是wxml中提供的功能，我使用template主要在于两方面：

1. 对于某些相同功能，在模板中定义一些片段，然后在不同的地方使用；
2. 在模板中单独绑定事件，并暴露回调接口，以便于不同页面的不同逻辑处理；

template的简单使用

• 定义模板

1. 创建模板文件夹template，用来管理项目中的模板；
2. 在文件夹下创建.wxml、.wxss、.js文件（.wxml定义模板，.wxss定义模板的样式，.js处理模板事件）；
3. 使用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;
}

• 使用模板

1. 在需要使用模板的.wxml文件中使用<import />或<include />引入模板的.wxml文件路径；
2. 使用 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}}字段 ）；

• 使用模板样式

1. 在需要使用模板样式的.wxss文件中使用 @import 关键字引入模板的.wxss文件路径即可；或者，直接在app.wxss中引入，这样只需要引入一次，其他文件就不用引入了。

在index.wxss文件中引入模板的.wxss文件路径

/* 使用@import引入template的wxss布局样式 */
@import "../../template/radioButton/radioButton";

• 模板的作用域
  模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。

template事件绑定和回调

目前还不知道如何绑定和回调模板中的时间，后续会更新。。。
有已经实现的小伙伴，可以进行沟通交流！