文件结构├─template │ └─template.wxml 【模板定义student、teacher、champion】 ├─pages │ └─index │ ├─index.js │ ├─index.wxml │ ├─index.wxss │ └─index.json └─app.wxss1. template/template.wxml模板定义文件!-- 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 !--新增奥运冠军模板 champion -- template namechampion view奥运冠军姓名: {{name}}/view view项目: {{item}}/view /template2. pages/index/index.wxml页面引用模板!--index.wxml-- navigation-bar title模板 back{{false}} colorblack background#FFF/navigation-bar scroll-view classscrollarea scroll-y typelist view classbox view classtitle模板的定义和引用/view !--导入外部模板文件-- import src/template/template.wxml / !--学生1动态is变量-- template is{{temp01}} data{{...student01}} / view---------------------------/view !--学生2直接写模板名student展开对象传参-- template isstudent data{{...student02}} / view---------------------------/view !--学生3直接行内写data数据-- template isstudent data{{name:杨同学, age:21, major:人工智能}} / view---------------------------/view !--老师1动态is变量-- template is{{temp02}} data{{...teacher01}} / view---------------------------/view !--老师2展开对象传参-- template isteacher data{{...teacher02}} / view---------------------------/view !--老师3行内data传参-- template isteacher data{{name:薛老师, age:38, course:线性代数}} / view---------------------------/view !--新增奥运冠军模板调用-- template ischampion data{{...champ01}} / view---------------------------/view template ischampion data{{...champ02}} / view---------------------------/view template ischampion data{{name:全红婵, item:女子10米跳台}} / /view /scroll-view3. pages/index/index.js页面 js 数据// index.js Page({ 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: 物联网识别技术 }, // 新增奥运冠军数据 champ01:{ name:许海峰, item:男子自选手枪慢射 }, champ02:{ name:刘翔, item:男子110米栏 } } })4. app.wxss全局样式/**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; }5. pages/index/index.json{ navigationBarTitleText:模板, usingComponents: {} }
