概述: 引用官方文档结合一个列表自定义单元格例子讲解template 简单使用
使用套路:

1.定义template ;(包括wxml 和 wxss)
2.template 导入;(wxml 导入使用```<import src="路径"/>```, wxss导入使用:```@import "路径";```)
3. template 传值;(只能使用data)

一. 基础概念:

1.1 template 定义:

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

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

注意:标签结构: <template name="name"></template>

1.2 template 使用:

1.使用 <import src="文件路径"/> 导入wxml 文件;
2.使用@import "文件路径"; 导入wxss样式表;
3.使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

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

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

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
    <template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

注意:模板拥有自己的作用域，只能使用data传入的数据。(自己不要妄想直接赋值喽)

1.3 知识扩展:

1.3.1 : 对象扩展符号

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

所谓对象扩展符,顾名思义就是把对象扩展开来的意思,事实也是如此;例如:

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>```

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

最终组合成的对象是{a: 1, b: 2, c: 3, d: 4, e: 5}。

如果对象的 key 和 value 相同，也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})

最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}。

二. 自定义单元格列表的使用示例:

2.1 效果图

自定义列表

2.2 template 定义:

template 定义:

<template name="cell">
      <view  id="id" class="tableView"  bindtap="selectedCell"  >
        <view class="titleView">{{title}}</view>
        <image class="imageView" src="/pages/image/{{imageSource}}" mode="scaleToFill"></image>
    </view>
</template>

template 对应样式表:

.tableView{
  display: flex;
  justify-content: space-between;
  height: 60px;
  background-color: #B12E2E;
  align-items: center; 
  margin: 20px 0;
}

.titleView{
  padding-left: 20px;
  text-align: left;
  color: #AfEFEf;

}

.imageView{
  width: 40px;
  height: 40px;
  margin-right: 20px;
}

2.3: template 使用:

<import src="cell.wxml"/>
<view class="containtView">
  <block wx:for="{{list}}" wx:key="title" wx:for-item="pitem" > 
  <template is="cell" data="{{...pitem}}"/>
  </block>
</view>

template样式表引用:

/* table.wxss */
@import "cell.wxss";
 .containt{
   display: flex;
   flex-direction: column;
 }

2.4: data 数据:

  data: {
    list:[{
        id:'1',
        title:'接口',
        imageSource:'green_tri.png',
        span: true, 
      },
      {
          id: '2',
          title: '文档',
          imageSource: 'icon_API.png',
          
      }, {
        id: '3',
        title: '百度',
        imageSource: 'icon_API_HL.png',
        
      }, {
        id: '4',
        title: '谷歌',
        imageSource: 'icon_foot.png'
      }, {
          id: '5',
          title: '高德',
          imageSource: 'location.png'
      }, {
        id: '6',
        title: '搜狐',
        imageSource: 'trash.png'
      }, {
          id: '7',
          title: '爱奇艺',
          imageSource: 'wechat.png'
      }, {
        id: '8',
        title: '腾讯',
        imageSource: 'wechatHL.png'
      }
    ]
  }