微信小程序的template,本质是wxml层面的可复用模块片段。它的核心意义是把重复的wxml结构抽出来通过传入不同的数据来复用减少重复代码提升维护效率。通过官方的文档了解 wxml模块template用法,补充一下template is{{tomp01}} data{{...student01}}/这里的data{{...student01}}指的是student01这个对象的参数如果没有写三个点写成data{{student01}}就会把student01当成参数输进去不会写入student01这个对象里面的参数。一、建立工程建立不使用云开发和模板的新工程然后建立template文件夹miniprogram ├── app.js ├── app.json ├── app.wxss #全局样式 ├── components │ └── navigation-bar │ ├── navigation-bar.js │ ├── navigation-bar.json │ ├── navigation-bar.wxml │ └── navigation-bar.wxss ├── pages │ └── index │ ├── index.js #在这里添加模板的数据 │ ├── index.json │ ├── index.wxml #主页 │ └── index.wxss #本页样式 ├── project.config.json ├── project.private.config.json ├── sitemap.json └── template #新建template文件夹 └── template.wxml #在这里定义模板片段新建template.wxml然后写入定义的模板片段的代码!-- /template/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在index.js添加模板数据// index.js Page({ data:{ tomp01:student, tomp02:teacher, tomp03:ceatherwin, student01:{ name:张同学, age:19, major:软件工程 }, student02:{ name:李同学, age:20, major:计算机科学与技术s }, teacher01:{ name:张老师, age:40, course:智能终端开发技术 }, teacher02:{ name:刘老师, age:42, course:计算机组成原理 }, } })然后在index.wxml写主页代码这里用import导入/template/template.wxml!--index.wxml-- navigation-bar titleWeixin back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle模拟的定力和引用/view import src/template/template/ template is{{tomp01}} data{{...student01}}/ --------------------------------------- template isstudent data{{...student02}}/ --------------------------------------- template isstudent data{{name:杨同学,age:21,major:人工智能}}/ --------------------------------------- template is{{tomp02}} data{{...teacher01}}/ --------------------------------------- template isteacher data{{...teacher02}}/ --------------------------------------- template isteacher data{{name:薛老师,age:38,course:线性代数}}/ ---------------------------------------- /view /scroll-view然后补全一下样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; } .scrollarea { flex: 1; overflow-y: hidden; } /* app.wxss */ .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; }运行结果如下