一、案例简介本案例学习微信小程序template模板的定义与引用。模板可以把一段 wxml 代码封装起来实现代码复用。 作业要求完成基础案例创建学生信息模板展示学生姓名、年龄、性别。在原有基础上新增一套奥运冠军模板展示中国奥运冠军姓名、参赛项目、获奖信息。打包代码提交撰写博客记录开发过程。二、核心知识点template name模板名定义模板name 是模板唯一名称。template is模板名 data{{数据}}使用模板is 指定要调用哪个模板data 向模板传递数据。模板作用封装重复页面结构减少重复代码方便统一修改 UI提升代码可维护性。模板拥有独立作用域只能接收 data 传入的数据不能直接访问页面里其他变量。三、开发步骤在 index.wxml使用template标签定义第一个模板 studentTemplate用于展示学生信息。新增第二个模板 championTemplate用来展示奥运冠军信息本次作业新增需求。在 index.js 的 data 中准备学生数组数据和奥运冠军数据。在页面中使用template isxxx data{{}} /分别调用两套模板传入对应数据。在 wxss 写样式学生卡片与冠军卡片使用不同背景色区分两套模板。编译预览查看页面渲染效果。导出项目 zip 包作为作业附件。四、核心代码片段index.wxml!-- 模板1学生信息模板 -- template namestudentTemplate view classcard student view classcard-title学生信息/view view姓名{{name}}/view view年龄{{age}}/view view性别{{gender}}/view /view /template !-- 模板2奥运冠军模板 -- template namechampionTemplate view classcard champion view classcard-title奥运冠军信息/view view姓名{{name}}/view view参赛项目{{sport}}/view view获得金牌{{goldMedal}}/view /view /template !-- 引用模板 -- view classcontainer template isstudentTemplate data{{stu1}}/template template isstudentTemplate data{{stu2}}/template template ischampionTemplate data{{champ1}}/template template ischampionTemplate data{{champ2}}/template template ischampionTemplate data{{champ3}}/template /viewindex.jsPage({ data: { stu1:{ name:张三, age:19, gender:男 }, stu2:{ name:李四, age:20, gender:女 }, champ1:{ name:全红婵, sport:女子10米跳台, goldMedal:奥运金牌 }, champ2:{ name:陈梦, sport:女子乒乓球单打, goldMedal:奥运金牌 }, champ3:{ name:苏炳添, sport:男子100米, goldMedal:打破亚洲纪录 } } })index.wxss.container{ padding:30rpx; } .card{ border:1rpx solid #ccc; border-radius:12rpx; padding:24rpx; margin-bottom:20rpx; font-size:30rpx; } .card-title{ font-weight:bold; margin-bottom:12rpx; } .student{ background:#f0f8ff; } .champion{ background:#fff4e6; }五、遇到的问题与解决方案问题 1模板渲染不出数据。 原因忘记写data{{}}没有给模板传参。 解决引用模板时必须添加data{{变量}}把页面数据传入模板。问题 2多个模板混淆。 原因模板 name 名字重复或者写错 is 的名称。 解决每个 template 的 name 不能重名is 的值必须和定义模板的 name 完全一致区分大小写。六、运行效果页面依次展示 2 张学生信息卡片、3 张奥运冠军卡片学生卡片浅蓝色背景奥运冠军卡片浅橙背景两套卡片结构独立复用各自模板代码。七、案例总结template 模板是小程序页面复用的基础方案适合重复 UI 卡片。本案例实现两套独立模板一套展示学生一套展示奥运冠军满足作业拓展要求。使用模板后相同结构的卡片只需要写一次代码后续修改样式只需要修改模板内部代码大大简化开发维护。