微信小程序案例 3.9：模板实验博客

一、实验目的

1. 理解 WXML 模板template的作用，掌握模板的定义、导入、引用完整流程。
2. 学会使用<template name="">定义模板，掌握import引入外部模板文件。
3. 掌握is属性指定模板、data属性给模板传参，理解...对象展开运算符用法。
4. 区分 import 与 include 的文件引用差异，理解模板独立作用域。
5. 拓展作业：新增奥运冠军模板，渲染多条冠军信息，练习多模板在同一个文件中的定义与调用。

二、实验环境

微信开发者工具，新建小程序项目，不使用云服务、不使用模板。

项目目录结构

模板
├─template
│  └─template.wxml      //存放student、teacher、champion三套模板
├─pages
│  └─index
│     ├─index.js
│     ├─index.wxml
│     └─index.wxss
├─app.js
├─app.json
└─app.wxss

三、实验效果

页面红色居中标题：模板的定义和引用

1. 输出 3 个学生信息：姓名、年龄、所学专业，横线分割；
2. 输出 3 个老师信息：姓名、年龄、讲授课程，横线分割；
3. 拓展作业输出 3 位奥运冠军信息：奥运冠军姓名、项目，横线分割。 所有条目均复用模板渲染，减少重复 wxml 代码。

四、核心知识点

1. <template name="模板名称">：定义模板，name作为模板唯一标识，一个 wxml 文件内可以写多个 template 模板。模板内部使用{{}}预留动态数据占位。
2. <import src="文件路径"/>：导入外部 wxml 模板文件，只会导入 template 标签内容，不会引入其他标签。

   import 有作用域：只会导入目标文件的 template，不会递归导入目标文件内部 import 的模板。

3. <template is="" data=""/> 使用模板
   • is：指定要使用哪个模板。可以直接写固定模板名字，也可以使用{{变量}}动态选择模板。
   • data="{{...obj}}"：...对象展开运算符，把对象的属性拆解，传入模板；也可以直接书写字面量对象传参。
4. 模板拥有独立作用域：模板内部只能使用data传递过来的数据，不能直接访问页面 data 中的变量。
5. import 和 include 区别
   • import：只引入<template>模板片段；
   • include：拷贝除<template>、<wxs>以外全部代码到当前位置。

五、完整代码实现

1. template/template.wxml（根目录 template 文件夹）

<!--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>

2. pages/index/index.wxml

<!--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" />

    <!--动态指定模板名称渲染学生1-->
    <template is="{{temp01}}" data="{{...student01}}" />
    <view>---------------------------</view>

    <!--直接指定模板名称渲染学生2-->
    <template is="student" data="{{...student02}}" />
    <view>---------------------------</view>

    <!--直接传对象字面量渲染学生3-->
    <template is="student" data="{{name:'杨同学', age:21, major:'人工智能'}}" />
    <view>---------------------------</view>

    <!--动态指定模板名称渲染老师1-->
    <template is="{{temp02}}" data="{{...teacher01}}" />
    <view>---------------------------</view>

    <!--直接指定模板名称渲染老师2-->
    <template is="teacher" data="{{...teacher02}}" />
    <view>---------------------------</view>

    <!--直接传对象字面量渲染老师3-->
    <template is="teacher" data="{{name:'薛老师', age:38, course:'线性代数'}}" />
    <view>---------------------------</view>

    <!--作业新增：奥运冠军模板渲染-->
    <template is="champion" data="{{...champ01}}" />
    <view>---------------------------</view>
    <template is="champion" data="{{...champ02}}" />
    <view>---------------------------</view>
    <template is="champion" data="{{...champ03}}" />

  </view>
</scroll-view>

3. pages/index/index.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:'许海峰',
      sport:'男子自选手枪慢射'
    },
    champ02:{
      name:'刘翔',
      sport:'男子110米栏'
    },
    champ03:{
      name:'全红婵',
      sport:'女子10米跳台'
    }
  }
})

4. pages/index/index.wxss

/**index.wxss**/
page {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scrollarea {
  flex: 1;
  overflow-y: hidden;
}

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

6. app.json

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "模板",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

六、实验步骤

1. 创建新项目，选择不使用云服务，不使用模板。
2. 在项目根目录新建template文件夹，创建template.wxml模板文件。
3. 将上面代码分别复制到对应文件，确认全部标点符号为英文半角。
4. Ctrl+S全部保存，开发者工具清缓存、重新编译。
5. 在模拟器观察页面，查看学生、老师、奥运冠军全部信息渲染结果。

七、踩坑与问题总结

1. 模板内容不显示：import src路径写错，注意开头/代表项目根目录。
2. 模板拿不到数据：忘记写data属性传参；模板有独立作用域，不能直接访问页面 data。
3. ...展开语法报错：必须写 data="{{...对象名}}"，外层双大括号不能省略。
4. 动态模板不生效：is属性的变量名要和 js 的 data 字段完全一致，区分大小写。
5. import 不会递归导入：A 文件 import B，B 文件 import C，A 拿不到 C 内部的 template。
6. navigation‑bar 警告：Skyline 渲染组件提示，不影响功能运行。

小提示：模板适合 UI 片段复用，如果逻辑复杂，优先使用小程序自定义组件 component。

八、实验小结

WXML 的 template 模板用于封装重复的 UI 片段，实现页面代码复用。本次实验完成 student、teacher、champion 三套模板，练习固定模板调用、动态模板调用、对象展开传参、字面量直接传参多种用法。区分import和include两种文件引入方式，理解模板的独立作用域。拓展作业新增奥运冠军模板，进一步巩固模板定义与引用流程。模板可以减少重复 wxml 代码，提升代码可维护性。