《智能前端技术与实践》——第 2 章前端开发基础 ——2.7 微信小程序开发—

《智能前端技术与实践》——第 2 章前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（4）

2023-05-25 128

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 《智能前端技术与实践》——第 2 章前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（4）

《智能前端技术与实践》——第 2 章前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（3）: https://developer.aliyun.com/article/1228015?groupCode=tech_library

4．模板

WXML 提供了模板（template），开发者可以在模板中定义代码片段，然后在不同的地方调用。首先，我们看定义模板的方法：使用 name 属性作为模板的名字，在

<template/>

内定义代码片段，如代码清单 2-41 所示。

代码清单 2-41

<templatename="userInfo"><viewclass="user"><view>姓名：{{item.name}}</view><view>年龄：{{item.age}}</view><view>性别：{{item.gender}}</view></view></template>

代码清单 2-41 首先定义模板 userInfo，然后依次在 view 组件中渲染出当前用户的姓名、年龄和性别。

定义模板后，为了使用模板，通过 is 属性声明需要使用的模板，然后将模板所需要的 data 传入，如代码清单 2-42 所示。

代码清单 2-42

<viewclass="container"><blockwx:for="{{users}}"wx:key="index"><templateis="userInfo"data="{{item}}"></template></block></view>

在代码清单 2-42 中，我们循环遍历 users 数组，并将数组中当前项作为数据传递给所调用的模板。

最后，我们看一下完整的代码。代码清单 2-43 即为 wxml 文件中的代码。

代码清单 2-43

<templatename="userInfo"><viewclass="user"><view>姓名：{{item.name}}</view><view>年龄：{{item.age}}</view><view>性别：{{item.gender}}</view></view></template><viewclass="container"><blockwx:for="{{users}}"wx:key="index"><templateis="userInfo"data="{{item}}"></template></block></view>

代码清单 2-44 即为 JavaScript 文件中的代码。

代码清单 2-44

Page({
data: {
users: [
      {
name: "石璞东",
age: 22,
gender: "M"      },
      {
name: "郑合惠子",
age: 27,
gender: "F"      },
      {
name: "孙悟空",
age: 999,
gender: "M"      }
    ]
  }
})