小程序中模板的使用方法-template模板

小程序开发中，一个项目可能需要在多处页面使用类似的模块，则就可以使用模板，还可以减少代码量。

小程序中组件化的实现有两种方式：template 模版和Component 组件。这两种方式分别适用于不同的场景。

1. template模版：主要用于展示，模版中不涉及事件处理，需要处理的事件逻辑放在调用模版的页面中。 一个template 模版，只包含wxml、wxss文件。
2. Component组件：作为一个单独的功能模块，不仅可以包含页面展示还可以包含该模块的事件逻辑处理。像一个页面一样，Component 组件可以包含 wxml、wxss、js、json文件。

template模版方法：

一、创建模板

1.新建一个template文件夹用来管理项目中所有的模板（可选）

2.新建一个template.wxml文件来定义模板

示例代码：

<template name="A">
<text>template a: {{text}}</text>
</template>
<template name="B">
<text>template b: {{text}} {{msg}}</text>
</template>

可以看到一个模板文件中可以定义多个模板，通过name区分，模板中可以接受变量，使用{{}}包围。

3.可以新建template.wxss来存放样式

二、使用模板

1.在需要引入模板的文件中使用<import>标签。该标签的src属性为需要引用模版的路径.

2.使用is属性区别定义的模板

3.使用data传入数据

示例代码：

<import src="../tpls/template.wxml" />
<view>
<template is="A" data="{{name}}"/>
<view>

列2：
<block wx:for="{{newsList}}">
    <template is="{{index%2 === 0 ? 'A' : 'B'}}" data="{{...item}}"></template>
</block>

说明：

A.列2中表达式来确定使用哪个模板。或者用wx:if.index是当前数组的下标

B.data是要模板渲染的数据，data=”{{…item}}”写法是ES6的写法，item是wx:for当前项，…是展开运算符，在模板中不需要再{{item.Name}}而是直接{{Name}}。

4.引入模板样式，在调用页面的wxss页面中

@import "./template/template.wxss"

注意：

1.import 有作用域
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
例如：C 引用 B，B 引用A，在C中可以使用B定义的 template，在B中可以使用A定义的 template ，但是C不能使用A定义的template

2.也可以用include
使用引用模版文件时， 并不能分别出模版文件的模版块， 所以使用引用的模版文件中只能定义一个模版块。
include 可以将目标文件中除了

3.模板中也可以定义事件，定义的事件需要在调用页面中执行

template.wxml
<template name="A">
<text bindtap="handleTap">template a: {{text}}</text>
</template>

index.js
Page({
data: {},
handleTap() {
console.log('template 模版 click')
}
})