微信小程序模板template的使用

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。官方API

一层 template 的使用

使用name属性，作为模板的名字。然后在 template 内定义代码片段，如：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，这是利用数组一次传三个值，在用数组传值的时候，数组前面加三个 ‘.’，如：

<template is="msgItem" data="{{...item}}"/>

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

也可以用单独的参数传值，单独的参数传值的时候，参数中间用逗号隔开，如

<template is="msgItem" data="{{ index,msg,time }}"/>

data:{
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'    
}

如果template单独放在一个文件夹里面，在其他 .wxml 页面调用它的时候先导入放 template 标签的 .wxml 如

<import src="../common/common.wxml"></import>

---

两层 template +wx:for的使用

定义模板文件 common.wxml

<template name="board-tem" >
    <view wx:for="{{ arra }}" >
        <block wx:for="{{ item }}" wx:for-item="items" wx:key="items.key">
            <template is="inner-tem" data="{{ items }}"></template>
        </block>
    </view>
</template>

<template name="inner-tem">
    <navigator url="../item/item?key={{ items.key }}">
        <view >
            <text >{{ items[0] }}</text>
            <text >{{ items[1] }}</text>
            <text >{{ items[2] }}</text>
        </view>
    </navigator>
</template>

使用模板文件 index.wxml

<import src="../common/common.wxml"></import>
<template is="board-tem" data="{{ arra }}"></template>

index.js内容

data:{
    arra:[['a','b','c'],['1','2','3'],['A','B','C']]
    },

---