一 概述

• WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
• 定义模板时：使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段
• 导入模板：使用import导入模板
• 使用模板时：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

二 模板使用示例

2.1 定义模板

在index文件夹下创建my_template.wxml

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

说明：

• <template>标签用于定义一个模板，name属性表示模板的名称
• <template>标签标签之间是页面的内容

2.2 导入模板和使用模板(index.wxml)

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

2.3 给模板设置数据(item)

 data: {item:{index:0,msg:'this i s a template',time:'2019-01-15'}
}

2.3 效果图

三 模板示例二

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

3.1 创建odd.wxml和event.wxml模板

odd.wxml

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

event.wxml

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

3.2 导入模板及模板渲染

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

3.3 效果图

四 参考

• 官方文档—使用模板
• CSDN—参考代码