一、为什么需要模板在小程序开发中我们经常会遇到大量重复的 WXML 结构。比如学生信息卡片、教师信息卡片、运动员卡片……如果每个页面都手写一遍既浪费时间又难以维护。模板就是解决这个问题的利器。二、模板的定义模板集中定义在 template.wxml 中使用 template 标签加上 name 属性来命名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 namechampion view姓名: {{name}}/view view项目: {{project}}/view /template三、模板的引用3.1 导入模板在需要使用模板的页面用 import 标签引入外部模板文件import src/template/template.wxml /路径以 / 开头表示项目根目录。3.2 使用模板通过 template is模板名 data{{...对象}}/ 来使用。这里有三种写法方式一动态模板名 展开运算符template is{{temp01}} data{{...student01}} /is 属性支持动态绑定——这里 temp01 的值是 student所以实际渲染的是 student 模板。方式二静态模板名 展开传参template isstudent data{{...student02}} /模板名直接写死适合固定场景。方式三内联对象直接传template isstudent data{{name:杨同学, age:21, major:人工智能}} /不依赖 data 里的变量直接写对象字面量适合临时展示。三种方式对 teacher 和 champion 模板同样适用灵活组合即可。四、数据准备在 index.js 的 data 里定义好模板需要的数据data: { temp01: student, temp02: teacher, student01: { name: 张同学, age: 19, major: 软件工程 }, student02: { name: 李同学, age: 20, major: 计算机科学与技术 }, teacher01: { name: 王老师, age: 40, course: 智能终端开发技术 }, teacher02: { name: 刘老师, age: 42, course: 物联网识别技术 }, champion01: { name: 马龙, project: 乒乓球男子单打 }, champion02: { name: 巩立姣, project: 女子铅球 } }关键点对象的属性名必须和模板里的 {{占位符}} 一一对应。... 展开运算符会把对象的每个属性映射到模板的作用域里。五、自定义导航栏页面顶部使用了一个自定义导航栏组件在 app.json 里通过 navigationStyle: custom 开启了自定义模式。这个组件做了几件贴心的事自动获取胶囊按钮位置计算安全距离区分 iOS 和 Android 平台适配不同的导航栏高度支持返回按钮、首页按钮、加载动画、slot 插槽等丰富功能用 CSS 变量管理样式方便二次定制六、Skyline 渲染引擎值得一提的是 app.json 里的配置renderer: skyline, componentFramework: glass-easelSkyline 是微信新一代原生渲染引擎相比传统 WebView 方案性能更高、启动更快。glass-easel 则是配套的下一代组件框架。不过模板写法是跨渲染引擎通用的不需要改动就能运行。