一、案例简介本案例学习微信小程序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 卡片。本案例实现两套独立模板一套展示学生一套展示奥运冠军满足作业拓展要求。使用模板后相同结构的卡片只需要写一次代码后续修改样式只需要修改模板内部代码大大简化开发维护。
企业数字化 ERP 产品动态
相关推荐
3分钟搞懂温水煮青蛙图片原理附完整示例避坑指南 3分钟搞懂温水煮青蛙图片原理附完整示例避坑指南 复制来的代码跑不通不知道怎么调？别急，这锅不全是你的。很多刚入行的嵌入式小白，从网上扒下一段处理“温水煮青蛙”效应的图像算法代码，往自己环境一扔，报错满天飞。其实问题出在环境依赖和参数配置上。… · 2026/9/23 18:54:49
CentOS卸载软件避坑指南：3个坑让系统秒崩，源码级拆解 CentOS卸载软件避坑指南：3个坑让系统秒崩，源码级拆解 刚入行运维或后端开发，面试时被问到“Linux包管理原理”，很多人答不上来。更扎心的是，你在生产环境CentOS上随手敲个 yum remove 或 rpm -e… · 2026/9/23 18:54:43
C# Math函数深度解析：精度陷阱、边界条件与高效实践 做C#开发这些年，Math类是那种看起来简单、用起来也简单，但真往深了挖全是坑的类型。很多人都觉得Math函数不就是Abs、Floor、Round这些吗，查个文档就完事了，但实际在项目里跑起来，精度问题、边界条件、性能损耗全冒出来… · 2026/9/23 19:22:45
自动驾驶多类别交通物体检测数据集：28类标注与YOLO训练实战 简介：这份自动驾驶多类别交通物体检测数据集面向从事目标检测算法研发的工程师、学生与科研人员，尤其适合使用YOLO系列（含YOLOv12）进行模型训练与验证的场景。数据集覆盖28类交通与道路相关目标，从行人、车辆、交通灯到… · 2026/9/23 19:22:45
Python岩石裂缝CT岩心语义分割源码与数据集：U-Net实战 简介：这份资源面向计算机视觉与地质工程方向的本科生、研究生及课程设计开发者，提供一套基于Python的CT岩芯与岩石裂缝语义分割完整方案，可用于期末大作业、课程设计或相关课题的快速复现与二次开发。压缩包共15个文件，约1.15MB&a… · 2026/9/23 19:22:45
摩尔投票法原理与高性能优化实践 1. 摩尔投票法基础原理摩尔投票法（Moore Voting Algorithm）是一种用于在数据流或数组中高效寻找多数元素的算法。我第一次接触这个算法是在处理一个实时日志分析系统时，需要快速识别出高频出现的错误类型。1.1 算法核心思想摩尔投票法的精妙之… · 2026/9/23 19:22:45
TensorRT-LLM部署Qwen1.5：从权重转换到引擎构建的完整指南 简介：面向大模型部署工程师与算法开发者的实战资源，聚焦TensorRT-LLM框架下部署Qwen1.5大语言模型的完整过程，针对推理时延高、显存占用大等常见难题，给出从模型转换到生产级部署的可行方案。压缩包共5个文件，包含4个P… · 2026/9/23 19:22:39
WMS库存查询全解析：从底层逻辑到多仓选型实战 做仓储这行，你会发现所有业务最后都会落到同一个问题：货在哪、有多少、能不能发。不同角色问法不一样，客服问的是“客户下单了，库存够不够”，仓管员问的是“这批货在哪个库位”，老板问的是“整体库存健康吗… · 2026/9/23 19:22:39
3招搞定手机怎么下载微信面试难题实战项目解析 3招搞定手机怎么下载微信面试难题实战项目解析 面试被问“手机怎么下载微信”背后的原理，90%的人答不上来。别笑，这看似弱智的问题，实则是考察你对移动应用分发机制、安全校验及网络协议理解的试金石。我带过不少校招新人，他们背了八股文，却连一个A… · 2026/9/23 0:00:03
你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 你有新短消息请注意查收：3个新手避坑指南搞定消息系统选型 面试被问“高并发下如何保证消息不丢失”，你张口就是“用Redis”，结果面试官追问“如果Redis宕机了怎么办”，你瞬间卡壳。这种场景太常见了，很多新手在背八股文时，只记住了技术名词… · 2026/9/23 0:00:29
