3.9 模板的定义和使用

一、项目概述本次实验基于微信小程序原生开发练习 WXML 中 template 模板的定义、引入与复用。首先完成教材案例 3.9 模板在此基础之上新增一套模板用来展示中国奥运冠军姓名与参赛项目理解模板复用思想减少重复代码提升页面可维护性。实验目标掌握 template 模板定义、import 引入、数据传参用法。在原有案例模板基础上扩展新模板渲染奥运冠军列表。理解小程序模板化开发思想实现代码复用。完成项目打包整理开发笔记。二、核心知识点WXML 的template模板用于封装可复用的 UI 片段使用name命名模板通过import引入模板文件使用template is模板名 data{{数据}}/调用模板并传递数据。模板只渲染 wxml 结构wxss 样式需要另外引入模板作用域只接收传入的 data 数据无法直接访问页面 data 里其他变量。定义模板template name模板名称封装 UI 代码引入模板import src模板文件路径/使用模板template is模板名 data{{对象}}/三、完整代码: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 nameathletes view姓名:{{name}}/view view项目:{{project}}/view /template index.wxml: !--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/ template is{{temp01}} data{{...student01}}/ ------------------------------------------------------- template isstudent data{{...student02}}/ ------------------------------------------------------- template is{{temp02}} data{{...teacher01}}/ ------------------------------------------------------- template isteacher data{{...teacher02}}/ ------------------------------------------------------- template is{{temp03}} data{{...athletes01}}/ ------------------------------------------------------- template isathletes data{{...athletes02}}/ ------------------------------------------------------- /view /scroll-view index.js: // index.js Page({ data:{ temp01:student, temp02:teacher, temp03:athletes, student01:{ name:邓同学, age:20, major:软件工程 }, student02:{ name:李同学, age:21, major:计算机科学与技术 }, teacher01:{ name:邓老师, age:40, course:软件工程 }, teacher02:{ name:周老师, age:49, course:人工智能 }, athletes01:{ name:刘翔, project:男子110米跨栏 }, athletes02:{ name:全文婵, project:女子10米跳台 }, } }) app.wxss: /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box; } .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; }四、运行效果五、遇到的问题与解决模板不显示忘记写 import 引入模板文件is 属性名称和模板 name 大小写不一致。解决确认 import 路径正确模板 name 和 is 的名字严格一致。模板拿不到数据没有使用 data 传递参数。解决调用模板必须带上data{{...item}}传递数据模板不能直接读取页面 data。模板没有样式模板 wxml 不会携带 wxss样式需要写在页面 wxss。解决把卡片样式写在页面 wxss 文件。六、实验总结通过本次实验熟悉了微信小程序 template 模板开发模式。模板可以把重复的 UI 封装起来一处定义多处调用减少大量重复代码。本次在原有案例 3.9 模板基础上扩展实现奥运冠军列表加深理解 import 导入、模板传参、wx:for 循环渲染。模板是小程序组件化开发的基础思想适合列表卡片等大量重复 UI 场景。后续开发可以多用模板封装通用模块提高代码复用率。