在小程序开发中如果多个页面或同一页面内存在结构相似的 WXML 结构重复编写不仅冗余还难以维护。小程序提供了 template 模板机制把一段 WXML 结构单独抽出来通过 import 引入、通过 template is... 调用再用 data 传入动态数据让代码更加简洁、复用性更强。本文结合一个学生和教师信息的完整案例演示模板的定义、引入和调用方法。一、需求说明设计一个小程序演示模板的定义和使用方法。小程序运行后能够根据模板格式显示学生和老师的相关信息。具体要求1. 小程序界面上显示三个学生和三位老师的信息。2. 内容的显示格式使用模板实现。3. 每个模板负责一类信息学生 / 教师通过数据绑定展示不同人的具体内容。二、编写模板文件template/template.wxml操作步骤1. 在小程序根目录下新建 template 文件夹。2. 在该文件夹下新建 template.wxml 文件。3. 在文件中定义两个模板一个叫 student另外一个叫 teacher。template/template.wxml 示例代码template namestudentview姓名{{name}}/viewview年龄{{age}}/viewview所学专业{{major}}/view/templatetemplate nameteacherview姓名{{name}}/viewview年龄{{age}}/viewview讲授课程{{course}}/view/template说明- 代码中定义了两个模板一个是 student另外一个是 teacher。- 定义模板要使用 template 标签并用 name 属性指定模板的名字。- 一个文件中可以定义多个模板。- 使用数据绑定的方式指定模板中的动态数据。三、在 index.wxml 中引入模板引入模板文件使用 import src... /例如navigation-bar title模板 back{{false}} colorblack background#FFF/navigation-barscroll-view classscrollarea scroll-y typelistview classboxview classtitle模板的定义和引用/viewimport src/template/template.wxml /template is{{temp01}} data{{...student01}} /------------------------template isstudent data{{...student02}} /------------------------template isstudent data{{name:杨同学, age:21, major:人工智能}} /------------------------template is{{temp02}} data{{...teacher01}} /------------------------template isteacher data{{...teacher02}} /------------------------template isteacher data{{name:薛老师, age:38, course:线性代数}} //view/scroll-view说明- 使用 import 引入文件例如 import src/template/template.wxml /。- WXML 提供两种文件引用方式 import 和 include- import 表示可以在该文件中使用目标文件定义的 template。- include 可以将目标文件除了 template/、wxs/ 外的整个代码引入相当于拷贝到 include 的位置。- import 有作用域的概念即只会 import 目标文件中定义的 template而不会 import 目标文件 import 的 template。四、调用模板并传入数据调用模板使用 template 标签及其 is 属性说明- 使用 template 标签及其 is 属性来引用模板。- is 属性可以使用 Mustache双花括号语法来动态决定需要渲染的模板也可以直接指定模板的名字。- 模板有自己的作用域只能使用 data 传入的数据或者模板文件中定义的 wxs / 模块。- 通过 template 的 data 属性传入模板数据。data 对象数据的传入可以通过 ...对象名 的方式展开也可以通过 属性名1:属性值1, 属性名2:属性值2 传入数据。在本案例中调用方式包含以下几种组合用法一模板名从 data 中取数据通过对象展开传入。用法二模板名直接写字符串数据通过对象展开传入。用法三模板名直接写字符串数据内联写对象字面量传入。把学生和教师两种模板分别搭配上述三种数据传入方式页面上就会渲染出 3 个学生信息和 3 个教师信息。五、在 index.js 中准备数据页面需要提供以下数据- 两个模板名变量 temp01 和 temp02分别对应 student 和 teacher。- 三组学生数据student01、student02以及一段内联对象。- 三组教师数据teacher01、teacher02以及一段内联对象。pages/index/index.js 示例代码Page({data: {temp01: student,temp02: teacher,student01: {name: 张同学,age: 19,major: 软件工程},student02: {name: 李同学,age: 20,major: 计算机科学与技术},teacher01: {name: 王老师,age: 40,course: 智能终端开发技术},teacher02: {name: 刘老师,age: 42,course: 物联网识别技术}}})要点- temp01: student 和 temp02: teacher 用于在 is 属性中动态指定模板名。- student01、student02 和 teacher01、teacher02 分别提供不同学生和教师的具体信息。六、页面样式样式主要用于控制外层容器和标题的显示效果模板内部的展示沿用模板自身的结构。app.wxss 示例代码.box {margin: 20rpx;padding: 20rpx;border: 2rpx solid silver;}.title {font-size: 40rpx;font-weight: bolder;text-align: center;margin-bottom: 30rpx;color: red;}view {font-size: 30rpx;}要点- .box 控制外层容器的边距、内边距和边框。- .title 控制标题的字号、粗细、对齐方式和颜色。- view 统一字号让模板内的文字保持统一风格。七、成果展示运行后页面会依次展示以下内容- 顶部是一个标题“模板的定义和引用”。- 接下来是 6 段信息分别由三种调用方式渲染出来。- 学生模板展示姓名、年龄、所学专业。- 教师模板展示姓名、年龄、讲授课程。- 学生数据分别来自 student01、student02 以及一段内联数据。- 教师数据分别来自 teacher01、teacher02 以及一段内联数据。对比可以发现同一套模板结构可以渲染出多组不同数据这正是模板复用的价值所在。学生和教师信息分别用各自的模板渲染结构清晰、易于维护。八、小结通过本案例可以掌握小程序模板的核心用法- 用 template name... 定义模板。- 用 import src... 引入模板文件。- 用 template is... data... / 调用模板。- is 既可以用字符串字面量也可以用 data 中的变量。- data 既可以用 {{...obj}} 展开对象也可以内联写对象字面量。- 模板有独立作用域只能访问 data 传入的数据和模板文件中的 wxs/。关键记住两点1. 模板必须先定义、再引入、后调用顺序不能乱。2. 模板只负责结构数据来源由调用方通过 data 传入模板本身不关心数据从哪来。掌握模板机制后遇到列表、卡片、详情等结构重复的场景就可以抽成模板大幅减少重复代码。