概述

对于一些重复使用的代码，我们可以将它封装成模板，以减少代码量

定义

定义一个名为template1的模板

1
2
3
<template name="template1">
    <text>{{myName}}</text>
</template>

初始数据，写在使用模板的页面js中

1
2
3
4
5
6
7
8
/**
* 页面的初始数据
*/
data: {
    templateData:{
    	myName: 'ledao'
    }
}

使用

is属性动态决定具体需要渲染哪个模板，data属性是要引用的数据，在定义模板的页面使用时不用import

1
<template is="template1" data="{{...templateData}}"/>

引用

import

在一个页面引用定义在其它页面的模板时，这个模板本来的js和css就不能用了，需要在引用模板的页面重新写js和css，示例代码如下（.wxml后缀加不加都行）

1
2
<import src="/pages/templatetest/templatetest.wxml"/>
<template is="template1" data="{{...templateData}}"/>

include

include将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

1
<include src="/pages/templatetest/templatetest.wxml" />

PS.

微信官方文档：模板 | 微信开放文档 (qq.com)和引用 | 微信开放文档 (qq.com)