前言
在微信小程序开发中，当多个页面或同一页面内有重复的UI结构时，可以使用模板（template）来提高代码复用性。本文通过一个案例，演示模板的定义和使用方法。
一、案例描述
设计一个小程序，演示模板的定义和使用方法。小程序运行后，能够根据模板格式显示学生和老师的相关信息。在此基础上增加了奥运冠军模板。
二、编写模板文件
在根目录下新建template文件夹，新建template.wxml文件，定义三个模板：
<!--template/template.wxml--><templatename="student"><view><text>学号：{{stuId}}</text><text>姓名：{{stuName}}</text><text>年龄：{{stuAge}}</text></view></template><templatename="teacher"><view><text>工号：{{teaId}}</text><text>姓名：{{teaName}}</text><text>职称：{{teaTitle}}</text></view></template><templatename="champion"><view><text>姓名：{{name}}</text><text>项目：{{sport}}</text><text>届数：{{edition}}</text></view></template>模板定义说明
使用
template标签定义模板name属性指定模板名称一个文件中可以定义多个模板
使用数据绑定的方式指定模板中的动态数据
三、使用模板
3.1 引入模板文件
在index.wxml中使用import引入模板文件：
<importsrc="/template/template.wxml"/>3.2 使用模板
通过template标签及其is属性来引用模板：
<templateis="student"data="{{...student01}}"></template><templateis="teacher"data="{{...teacher01}}"></template><templateis="champion"data="{{...champion01}}"></template>3.3 数据传入
通过data属性传入模板数据，使用...对象名的方式展开对象：
student01:{stuId:'2024001',stuName:'张三',stuAge:20}{{...student01}}会将对象的属性展开为模板中的变量。
四、import和include的区别
| 方式 | 说明 |
|---|---|
import | 引入目标文件中定义的template，有作用域概念 |
include | 将目标文件除template和wxs外的整个代码引入，相当于拷贝 |
import有作用域的概念，只会import目标文件中定义的template，而不会import目标文件import的template。
五、扩展实践：增加奥运冠军模板
在原有student和teacher两个模板基础上，新增champion模板，列出几位中国奥运冠军及其所属项目：
champion01:{name:'全红婵',sport:'跳水',edition:'2024巴黎奥运会'},champion02:{name:'潘展乐',sport:'游泳',edition:'2024巴黎奥运会'},champion03:{name:'郑钦文',sport:'网球',edition:'2024巴黎奥运会'}在index.wxml中通过<template is="champion" data="{{...champion01}}">使用模板。
六、总结
- 定义模板：使用
template标签和name属性 - 引入模板：使用
import引入模板文件 - 使用模板：通过
is属性指定模板名，data属性传入数据 - 数据展开：使用
{{...对象名}}展开对象数据 - 模板作用域：模板只能使用data传入的数据，不能直接访问页面的data
- 多模板：一个文件中可以定义多个模板
如果觉得本文对你有帮助，欢迎点赞收藏！有问题可以在评论区交流。