企业官网建设流程全解析

# 【微信小程序】案例3.9 WXML模板template的定义与引用（增加奥运冠军模板） ## 一、实验目的 掌握微信小程序WXML中template模板的定义、外部文件导入`<import>`、模板调用、多种数据传递方式； 在原有学生、教师模板基础上，新增奥运冠军模板，实现页面复用。 ### 知识点 1. `<template name="xxx">`：定义模板片段，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 name="student"> <view>学生信息：姓名{{name}}，年龄{{age}}，专业{{major}}</view> </template> <template name="teacher"> <view>教师信息：姓名{{name}}，年龄{{age}}，课程{{course}}</view> </template> <!--作业新增：奥运冠军模板--> <template name="champion"> <view>奥运冠军：{{name}}，参赛项目：{{item}}，获得金牌年份：{{year}}</view> </template>

2. pages/index/index.wxml 页面调用代码

<page-meta> <navigation-bar title="模板" back="{{false}}" color="black" background="#FFF"></navigation-bar> </page-meta> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">模板的定义和引用</view> <!--导入外部模板文件--> <import src="/template/template.wxml" /> <!--学生模板 第一种：变量动态指定模板is--> <template is="{{temp01}}" data="{{...student01}}" /> <view>------------------------</view> <!--学生模板 第二种：直接写模板名字，展开对象传参--> <template is="student" data="{{...student02}}" /> <view>------------------------</view> <!--学生模板 第三种：直接行内写数据，不使用data里对象--> <template is="student" data="{{name:'杨同学', age:21, major:'人工智能'}}" /> <view>------------------------</view> <!--老师模板 动态is变量--> <template is="{{temp02}}" data="{{...teacher01}}" /> <view>------------------------</view> <!--老师模板 直接指定模板名称--> <template is="teacher" data="{{...teacher02}}" /> <view>------------------------</view> <!--老师模板 行内直接赋值--> <template is="teacher" data="{{name:'薛老师', age:38, course:'线性代数'}}" /> <view>------------------------</view> <!-- =========作业新增：奥运冠军模板展示 ========= --> <template is="{{temp03}}" data="{{...champion01}}" /> <view>------------------------</view> <template is="champion" data="{{...champion02}}" /> <view>------------------------</view> <template is="champion" data="{{...champion03}}" /> </view> </scroll-view>

3. 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巴黎奥运会" } } })

四、运行效果

页面依次展示：

1. 学生信息（3种调用方式：动态is变量、展开对象传参、行内直接写数据）

2. 教师信息（3种调用方式：动态is变量、展开对象传参、行内直接写数据）

3. 新增奥运冠军信息（3条奥运冠军数据复用champion模板，展示姓名、参赛项目、获奖年份）## 五、实验总结

4. template模板可以把重复UI抽离，实现代码复用，减少重复编写页面代码。

5. import只能引入template模板片段，不能引入普通标签；include用来引入完整页面。

6. is属性支持动态绑定变量，可以根据业务动态切换渲染不同模板。

7. 对象展开语法...可以快速把对象的属性直接注入模板，简化传参代码。

8. 本次作业在原有基础上扩展奥运冠军模板，进一步熟悉模板的定义与复用逻辑。
   截图：