# 【微信小程序】案例3.9 WXML模板template的定义与引用增加奥运冠军模板 ## 一、实验目的 掌握微信小程序WXML中template模板的定义、外部文件导入import、模板调用、多种数据传递方式 在原有学生、教师模板基础上新增奥运冠军模板实现页面复用。 ### 知识点 1. template namexxx定义模板片段name为模板唯一名称 2. import src文件路径 /引入外部wxml模板文件仅导入template 3. template is模板名 data数据 /使用模板is可以动态绑定变量切换模板 4. data{{...对象}}展开对象快速把对象属性传入模板对象展开语法 5. 三种传参方式动态is变量、展开对象传参、行内直接写对象数据 ## 二、项目目录结构├──pages│ └──index│ ├─index.wxml│ ├─index.js│ ├─index.wxss│ └─index.json├──template│ └──template.wxml //存放所有模板定义├──app.js├──app.json└──app.wxss## 三、核心代码 ### 1. template/template.wxml 模板定义文件 xml !--template.wxml-- template namestudent view学生信息姓名{{name}}年龄{{age}}专业{{major}}/view /template template nameteacher view教师信息姓名{{name}}年龄{{age}}课程{{course}}/view /template !--作业新增奥运冠军模板-- template namechampion view奥运冠军{{name}}参赛项目{{item}}获得金牌年份{{year}}/view /template2. pages/index/index.wxml 页面调用代码page-meta navigation-bar title模板 back{{false}} colorblack background#FFF/navigation-bar /page-meta scroll-view classscrollarea scroll-y typelist view classbox view classtitle模板的定义和引用/view !--导入外部模板文件-- import src/template/template.wxml / !--学生模板 第一种变量动态指定模板is-- template is{{temp01}} data{{...student01}} / view------------------------/view !--学生模板 第二种直接写模板名字展开对象传参-- template isstudent data{{...student02}} / view------------------------/view !--学生模板 第三种直接行内写数据不使用data里对象-- template isstudent data{{name:杨同学, age:21, major:人工智能}} / view------------------------/view !--老师模板 动态is变量-- template is{{temp02}} data{{...teacher01}} / view------------------------/view !--老师模板 直接指定模板名称-- template isteacher data{{...teacher02}} / view------------------------/view !--老师模板 行内直接赋值-- template isteacher data{{name:薛老师, age:38, course:线性代数}} / view------------------------/view !-- 作业新增奥运冠军模板展示 -- template is{{temp03}} data{{...champion01}} / view------------------------/view template ischampion data{{...champion02}} / view------------------------/view template ischampion data{{...champion03}} / /view /scroll-view3. pages/index/index.js 页面数据Page({ data:{ temp01:student, temp02:teacher, temp03:champion, student01:{ name:张同学, age:20, major:计算机科学 }, student02:{ name:李同学, age:19, major:软件工程 }, teacher01:{ name:王老师, age:42, course:高等数学 }, teacher02:{ name:刘老师, age:35, course:Web前端开发 }, champion01:{ name:全红婵, item:女子10米跳台, year:2024巴黎奥运会 }, champion02:{ name:陈梦, item:乒乓球女子单打, year:2024巴黎奥运会 }, champion03:{ name:潘展乐, item:男子100米自由泳, year:2024巴黎奥运会 } } })四、运行效果页面依次展示学生信息3种调用方式动态is变量、展开对象传参、行内直接写数据教师信息3种调用方式动态is变量、展开对象传参、行内直接写数据新增奥运冠军信息3条奥运冠军数据复用champion模板展示姓名、参赛项目、获奖年份## 五、实验总结template模板可以把重复UI抽离实现代码复用减少重复编写页面代码。import只能引入template模板片段不能引入普通标签include用来引入完整页面。is属性支持动态绑定变量可以根据业务动态切换渲染不同模板。对象展开语法...可以快速把对象的属性直接注入模板简化传参代码。本次作业在原有基础上扩展奥运冠军模板进一步熟悉模板的定义与复用逻辑。截图