一、实验目的掌握 WXML template 模板的定义、导入与调用方法。利用模板封装重复界面实现代码复用完成学生、教师信息展示并拓展实现奥运冠军信息展示。二、实验环境微信开发者工具新建小程序项目不启用云服务、不使用项目模板。三、实验原理template 模板可以封装重复的 UI 结构。使用template标签配合 name 属性定义模板通过import引入外部模板文件调用模板时 is 属性指定模板data 属性传递数据。模板拥有独立作用域数据必须通过 data 传入不能直接读取页面数据。注意区分import和includeimport 只引入模板片段include 为拷贝页面代码。四、实验步骤在项目根目录创建 template 文件夹和 pages 同级新建模板文件分别定义学生、教师、奥运冠军三套模板规定各自展示的字段。在首页使用 import 导入外部模板多次调用模板组件分别渲染学生、教师、奥运冠军数据信息之间增加分割线同时练习静态指定模板、动态变量选择模板两种写法。在页面 js 中编写学生、教师、奥运冠军的数据。设置全局样式完成容器、标题、文字样式配置。保存文件编译小程序查看页面显示效果。五、实验现象页面红色居中展示标题 “模板的定义和引用”。依次输出 3 位学生、3 位教师、3 位奥运冠军信息各组信息使用横线隔开。学生显示姓名、年龄、所学专业教师显示姓名、年龄、讲授课程奥运冠军展示姓名和参赛项目。六、问题与解决提示找不到模板文件文件夹建错位置将 template 移动至根目录与 pages 同级引用路径以/开头。只有分割线标题模板内容空白检查模板 name 有无多余空格检查 JS 语法是否正确可把模板写在当前页面做调试。页面内容被遮挡关闭自定义导航栏使用小程序原生导航。七、实验总结模板主要用来复用重复页面结构减少重复代码便于后期维护。模板有独立作用域数据需要通过 data 传递。is 属性既可以写固定模板名也可以用变量动态切换模板。开发时可以把通用模板抽离到单独文件供多个页面重复使用提升开发效率。