前言在小程序开发中经常会遇到页面多处重复展示相同结构的 UI比如列表卡片、信息条目。如果重复写多份相同 wxml 代码代码冗余、后期维护麻烦。小程序提供template模板可以把重复 UI 结构封装一处定义多处复用。本篇是课堂案例 3.9基础需求封装学生、教师模板拓展作业新增奥运冠军模板展示冠军姓名与参赛项目完整演示模板定义、导入、传参、动态渲染。官方文档参考模板片段 | 微信开放文档项目预览效果页面标题模板的定义和引用 依次渲染3 条学生信息卡片3 条教师信息卡片3 条奥运冠军信息卡片作业新增部分 每一条信息之间使用分割线隔开结构统一数据各自独立。项目目录结构模板├─ template│ └─ template.wxml # 存放student、teacher、champion三个模板定义├─ pages│ └─ index│ ├─ index.js│ ├─ index.wxml│ ├─ index.wxss│ └─ index.json├─ app.js├─ app.json└─ app.wxss一、模板定义 template/template.wxml使用template name模板名封装 UI 结构name 是模板唯一标识后续引用时靠这个名字匹配。!--template.wxml--template namestudentview姓名{{name}}/viewview年龄{{age}}/viewview所学专业{{major}}/view/templatetemplate nameteacherview姓名{{name}}/viewview年龄{{age}}/viewview讲授课程{{course}}/view/template!--作业拓展奥运冠军模板--template namechampionview奥运冠军姓名{{name}}/viewview项目{{sport}}/view/template重点模板内部只能使用传入的数据不能直接读取页面 Page 的 data。二、页面视图 pages/index/index.wxmlimport src相对路径/导入外部 wxml 模板文件只引入 template 片段template is模板名 data{{...对象}}/使用模板...为对象展开语法is属性既可以写固定字符串也可以绑定变量动态切换模板!--index.wxml--view classboxview classtitle模板的定义和引用/view!--导入外部模板文件重点pages/index下向上两层找到template文件夹--import src../../template/template.wxml /!--动态指定模板--template is{{temp01}} data{{...student01}} /view------------------------------/viewtemplate isstudent data{{...student02}} /view------------------------------/view!--直接字面量传参不借助data对象--template isstudent data{{name:杨同学, age:21, major:人工智能}} /view------------------------------/viewtemplate is{{temp02}} data{{...teacher01}} /view------------------------------/viewtemplate isteacher data{{...teacher02}} /view------------------------------/viewtemplate isteacher data{{name:薛老师, age:38, course:线性代数}} /view------------------------------/view!--作业新增奥运冠军模板渲染--template ischampion data{{...champion01}} /view------------------------------/viewtemplate ischampion data{{...champion02}} /view------------------------------/viewtemplate ischampion data{{...champion03}} //view⚠️踩坑重点import路径index.wxml 在pages/index/需要../../回到项目根目录很多同学直接写/template/template.wxml会出现Template not found模板找不到警告。三、页面逻辑 pages/index/index.jsPage 的 data 存放所有需要渲染的数据对象通过...展开传递给模板。// index.jsPage({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: 物联网识别技术},//作业奥运冠军数据champion01:{name:许海峰,sport:男子自选手枪慢射},champion02:{name:刘翔,sport:男子110米栏},champion03:{name:全红婵,sport:女子10米跳台}}})四、样式文件pages/index/index.wxss/**index.wxss**/page {height: 100vh;display: flex;flex-direction: column;}app.wxss全局样式/**app.wxss**/.box {margin: 20rpx;padding: 20rpx;border: 2rpx solid silver;}.title {font-size: 40rpx;font-weight: bold;text-align: center;margin-bottom: 30rpx;color: red;}view {font-size: 30rpx;}五、app.json 项目配置关闭 Skyline防止页面空白{pages: [pages/index/index],window: {navigationBarTitleText: 模板,navigationBarBackgroundColor: #ffffff,navigationBarTextStyle:black},sitemapLocation: sitemap.json}六、核心知识点总结template 定义template namexxxname 是模板唯一标识一个 wxml 文件内可以定义多个模板。import 导入只导入目标文件里的 template 模板不会递归导入其他 import。模板引用is指定使用哪一个模板可以写固定字符串也可以绑定变量动态切换模板。data{{...obj}}对象展开语法把 obj 里面的属性直接传递给模板模板内直接使用{{name}}取值。模板作用域模板是孤立作用域模板里面不能直接访问页面 data所有数据必须通过data属性传入。import 和 include 的区别import只引入template模板片段适合 UI 卡片复用。include直接拷贝整个文件的 wxml 代码排除 template/wxs适合公共页头页脚。七、高频踩坑排错Template xxx not found最常见import路径错误。index 在 pages/index要用../../template/template.wxml不要直接写/template/template.wxml。同时检查模板 name 拼写大小写不能错。模板内文字空白没有数据 忘记写...展开对象写成data{{student01}}模板拿不到字段必须写data{{...student01}}。页面空白 app.json 中删除 skyline 相关配置使用传统 webview 渲染清理缓存后重新编译。基础库内部报错 Cannot read property __subPageFrameEndTime__ of null 属于微信开发者工具灰度基础库 3.17.3 内部 bug不是你的代码问题切换基础库到稳定版本 3.11.3 即可消除。八、模板的使用场景适合页面中大量重复结构的 UI列表条目、信息卡片、商品卡片、用户信息卡片。把重复 UI 抽成模板一处修改所有引用位置同步更新减少重复代码提升可维护性。完整代码复制后修改 import 路径、清缓存即可正常运行满足课堂作业要求。
