继之前练习完小程序模块化之后这次学习了 WXML 的 template 模板功能。模板主要用来封装重复的 UI 片段相同的页面结构只需要写一次模板后续可以多次复用减少大量重复的 WXML 代码。本次作业除完成基础学生、老师信息展示之外还额外新增奥运冠军模板作为拓展练习。项目目录结构模板 ├─ template │ └─ template.wxml //存放所有自定义模板 ├─ pages │ └─ index │ ├─ index.js │ ├─ index.wxml │ └─ index.wxss ├─ app.js ├─ app.json └─ app.wxss代码实现template/template.wxml在这里定义student、teacher以及拓展新增的champion三个模板使用name属性给模板命名模板内部通过双花括号预留数据占位。!--template.wxml-- template namestudent view姓名: {{name}}/view view年龄: {{age}}/view view所学专业: {{major}}/view /template template nameteacher view姓名: {{name}}/view view年龄: {{age}}/view view讲授课程: {{course}}/view /template !--拓展作业奥运冠军模板-- template namechampion view奥运冠军姓名: {{name}}/view view项目: {{sport}}/view /templatepages/index/index.js在页面data中存放学生、老师、奥运冠军的原始数据同时定义变量用来实现动态指定模板。// index.js Page({ data: { temp01: student, temp02: teacher, temp03: champion, student01: { name: 张同学, age: 19, major: 软件工程 }, student02: { name: 李同学, age: 20, major: 计算机科学与技术 }, teacher01: { name: 王老师, age: 40, course: 智能终端开发技术 }, teacher02: { name: 刘老师, age: 42, course: 物联网识别技术 }, champion01:{ name:许海峰, sport:男子自选手枪慢射 }, champion02:{ name:刘翔, sport:男子110米栏 } } })pages/index/index.wxml使用import引入外部模板文件。调用模板有两种传参方式一种通过...展开已经定义好的对象另一种直接写对象字面量临时传值。!--index.wxml-- navigation-bar title模板 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle模板的定义和引用/view !--引入外部模板文件-- import src/template/template.wxml / !--学生信息模板-- template is{{temp01}} data{{...student01}} / view--------------------------------/view template isstudent data{{...student02}} / view--------------------------------/view template isstudent data{{name:杨同学, age:21, major:人工智能}} / view--------------------------------/view !--老师信息模板-- template is{{temp02}} data{{...teacher01}} / view--------------------------------/view template isteacher data{{...teacher02}} / view--------------------------------/view template isteacher data{{name:薛老师, age:38, course:线性代数}} / view--------------------------------/view !--拓展作业奥运冠军模板-- template is{{temp03}} data{{...champion01}}/ view--------------------------------/view template ischampion data{{...champion02}}/ view--------------------------------/view template ischampion data{{name:全红婵,sport:女子10米跳台}}/ /view /scroll-viewapp.wxss全局公共样式设置外框、标题以及文字大小。/**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; }运行效果页面顶部红色标题分割线隔开每一条数据从上往下依次渲染 3 位学生信息、3 位老师信息最后渲染 3 位奥运冠军信息全部依靠复用模板完成页面展示。学习小结template name用来定义模板一个 wxml 文件可以存放多个模板。import用来导入外部模板文件它只会导入 template 片段不会导入普通标签同时存在作用域不会递归导入嵌套的模板注意区分includeinclude 是直接拷贝全部普通标签。使用template is data调用模板is属性既可以直接写模板名称也可以绑定变量动态切换模板。模板有独立作用域不能直接访问页面 data所有的数据都必须通过data属性传入模板内部。数据传递两种写法{{...对象}}展开已有对象直接书写对象字面量适合临时少量数据。遇到的问题import 的 src 路径写错模板加载失败页面对应位置空白。根目录文件路径开头需要加上/。忘记书写data属性传参模板里面的双花括号拿不到数据内容无法渲染。混淆import和includeinclude 不会识别 template 标签无法加载模板。