企业官网建设流程全解析

一、实验目的

掌握 WXML template 模板的定义、导入与调用方法。利用模板封装重复界面，实现代码复用，完成学生、教师信息展示，并拓展实现奥运冠军信息展示。

二、实验环境

微信开发者工具，新建小程序项目，不启用云服务、不使用项目模板。

三、实验原理

template 模板可以封装重复的 UI 结构。使用template标签配合 name 属性定义模板；通过import引入外部模板文件；调用模板时 is 属性指定模板，data 属性传递数据。模板拥有独立作用域，数据必须通过 data 传入，不能直接读取页面数据。注意区分import和include，import 只引入模板片段，include 为拷贝页面代码。

四、实验步骤

1. 在项目根目录创建 template 文件夹，和 pages 同级，新建模板文件，分别定义学生、教师、奥运冠军三套模板，规定各自展示的字段。
2. 在首页使用 import 导入外部模板，多次调用模板组件，分别渲染学生、教师、奥运冠军数据，信息之间增加分割线，同时练习静态指定模板、动态变量选择模板两种写法。
3. 在页面 js 中编写学生、教师、奥运冠军的数据。
4. 设置全局样式，完成容器、标题、文字样式配置。
5. 保存文件，编译小程序，查看页面显示效果。

五、实验现象

页面红色居中展示标题 “模板的定义和引用”。依次输出 3 位学生、3 位教师、3 位奥运冠军信息，各组信息使用横线隔开。学生显示姓名、年龄、所学专业；教师显示姓名、年龄、讲授课程；奥运冠军展示姓名和参赛项目。

六、问题与解决

1. 提示找不到模板文件：文件夹建错位置，将 template 移动至根目录与 pages 同级，引用路径以/开头。
2. 只有分割线标题，模板内容空白：检查模板 name 有无多余空格，检查 JS 语法是否正确；可把模板写在当前页面做调试。
3. 页面内容被遮挡：关闭自定义导航栏，使用小程序原生导航。

七、实验总结

模板主要用来复用重复页面结构，减少重复代码，便于后期维护。模板有独立作用域，数据需要通过 data 传递。is 属性既可以写固定模板名，也可以用变量动态切换模板。开发时可以把通用模板抽离到单独文件，供多个页面重复使用，提升开发效率。