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 场景。后续开发可以多用模板封装通用模块提高代码复用率。

3.9 模板的定义和使用

相关推荐

VMD-WOA-LSTM光伏功率预测组合模型Matlab实现

均匀线阵信号建模与波束形成：从延迟求和到MVDR的工程实践

快速PCR试剂优化指南：聚合酶、缓冲液与引物设计要点

更多资讯

护栏行业网络推广策略与数字化转型实践

基于Mediapipe骨架与LSTM的手语识别实战：从数据采集到实时推理

从默默无闻到被看见：个人品牌冷启动的核心方法论

SpringBoot+Vue全栈电子商城开发实战与优化

Mac环境变量配置指南：从zsh加载顺序到可视化工具实践

Axure流程图自定义元件库建设与实战方法论

今日更新

Play Framework 迁移指南：移除 GlobalSettings，全面转向依赖注入（Scala 与 Java）

Numba 类型推断机制详解：从 Numba IR 到编译期类型重建的完整原理与实践

企业级项目dragonballz_e159-1的技术架构与实现方案

本周精选

深入解析Transformer多头注意力机制与工程优化

OpenClaw 的 Skills 跑学习任务，模型通道改到 TaoToken 通道行不行？

ChatGPT报错Oops, an error occurred! 全链路排查指南

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

读完文章，想聊聊您的网站？