企业官网建设流程全解析

继之前练习完小程序模块化之后，这次学习了 WXML 的 template 模板功能。模板主要用来封装重复的 UI 片段，相同的页面结构只需要写一次模板，后续可以多次复用，减少大量重复的 WXML 代码。本次作业除完成基础学生、老师信息展示之外，还额外新增奥运冠军模板作为拓展练习。

项目目录结构

模板 ├─ template │ └─ template.wxml //存放所有自定义模板 ├─ pages │ └─ index │ ├─ index.js │ ├─ index.wxml │ └─ index.wxss ├─ app.js ├─ app.json └─ app.wxss

代码实现

template/template.wxml

在这里定义student、teacher以及拓展新增的champion三个模板，使用name属性给模板命名，模板内部通过双花括号预留数据占位。

<!--template.wxml--> <template name="student"> <view>姓名: {{name}}</view> <view>年龄: {{age}}</view> <view>所学专业: {{major}}</view> </template> <template name="teacher"> <view>姓名: {{name}}</view> <view>年龄: {{age}}</view> <view>讲授课程: {{course}}</view> </template> <!--拓展作业：奥运冠军模板--> <template name="champion"> <view>奥运冠军姓名: {{name}}</view> <view>项目: {{sport}}</view> </template>

pages/index/index.js

在页面data中存放学生、老师、奥运冠军的原始数据，同时定义变量用来实现动态指定模板。

// index.js Page({ data: { temp01: 'student', temp02: 'teacher', temp03: 'champion', student01: { name: '张同学', age: 19, major: '软件工程' }, student02: { name: '李同学', age: 20, major: '计算机科学与技术' }, teacher01: { name: '王老师', age: 40, course: '智能终端开发技术' }, teacher02: { name: '刘老师', age: 42, course: '物联网识别技术' }, champion01:{ name:'许海峰', sport:'男子自选手枪慢射' }, champion02:{ name:'刘翔', sport:'男子110米栏' } } })

pages/index/index.wxml

使用import引入外部模板文件。调用模板有两种传参方式，一种通过...展开已经定义好的对象，另一种直接写对象字面量临时传值。

<!--index.wxml--> <navigation-bar title="模板" back="{{false}}" color="black" background="#FFF"></navigation-bar> <scroll-view class="scrollarea" scroll-y type="list"> <view class="box"> <view class="title">模板的定义和引用</view> <!--引入外部模板文件--> <import src="/template/template.wxml" /> <!--学生信息模板--> <template is="{{temp01}}" data="{{...student01}}" /> <view>--------------------------------</view> <template is="student" data="{{...student02}}" /> <view>--------------------------------</view> <template is="student" data="{{name:'杨同学', age:21, major:'人工智能'}}" /> <view>--------------------------------</view> <!--老师信息模板--> <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="{{name:'全红婵',sport:'女子10米跳台'}}"/> </view> </scroll-view>

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; }

运行效果

页面顶部红色标题，分割线隔开每一条数据，从上往下依次渲染 3 位学生信息、3 位老师信息，最后渲染 3 位奥运冠军信息，全部依靠复用模板完成页面展示。

学习小结

1. <template name="">用来定义模板，一个 wxml 文件可以存放多个模板。
2. import用来导入外部模板文件，它只会导入 template 片段，不会导入普通标签，同时存在作用域，不会递归导入嵌套的模板；注意区分include，include 是直接拷贝全部普通标签。
3. 使用<template is="" data="">调用模板，is属性既可以直接写模板名称，也可以绑定变量动态切换模板。
4. 模板有独立作用域，不能直接访问页面 data，所有的数据都必须通过data属性传入模板内部。
5. 数据传递两种写法：{{...对象}}展开已有对象；直接书写对象字面量适合临时少量数据。

遇到的问题

1. import 的 src 路径写错，模板加载失败，页面对应位置空白。根目录文件路径开头需要加上/。
2. 忘记书写data属性传参，模板里面的双花括号拿不到数据，内容无法渲染。
3. 混淆import和include，include 不会识别 template 标签，无法加载模板。