《智能前端技术与实践》——第 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" } ] } })
代码清单 2-45 即为 wxss 文件中的代码。
代码清单 2-45
.user{ margin-top: 50rpx; }
运行结果如图 2-43 所示。
《智能前端技术与实践》——第 2 章 前端开发基础 ——2.7 微信小程序开发——2.7.2 页面描述文件（5）: https://developer.aliyun.com/article/1227994?groupCode=tech_library
