小程序 template 模板使用

---

概述: 引用官方文档结合一个列表自定义单元格例子讲解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  效果图***

![自定义列表](http:https://img.haomeiwen.com/i3084347/3b41c2bbbf1b87b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#####***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'
  }
]

}