微信小程序 - template模板引用

定义 template 模板

为了方便代码组织，我们在 templates 目录下，新建一个
productCard 文件夹，并在 product-card 文件夹下新建 productCard.wxml 和 productCard.wxss 文件。
代码如下:

使用 name 属性，定义模板的名字，然后将代码片断保存在 template 中。

2. 引入 template 模板
   以首页为例，当要使用到 productCard 模板时，我们只需要使
   用 import 引入模板。
   在需要显示的位置，外层用 wx:for 循环渲染列表，template
   为子项，使用 is 声明需要的使用的模板，用 data 传入数据:

/*** index.wxml ***/


 
 

留意 data="{{ ...item }} 的写法，item 是 wx:for 中 代表数组当前项的默认变量名，item 前面的 ... 操作符相当于 ES6 中的展开运算符，可用于需要解构赋值的地方，没有了解过展开 运算符和解构(Destructuring)的同学可以先了解一下它们的基本概 念。
通过解构，template 中就可以直接写成 {{ id }}， {{ cover_image }}，而不用写 {{ item.id }}， {{ item.cover_image }}。
它的意义在于实现了 template 与 wx:for-item 之间的解 耦，比如这里设置了 wx:for-item="product"，我们只要设改变
data="{{ ...product }}" 就可以了。 如果数据没有通过解构，就要将 template 的 {{ item.id }}
修改成 {{ product.id }}，很不方便。

WXML 引用

import 可以在当前文件中使用目标文件定义的 template
在 item.wxml 中定义了一个 item 的 template

在 index.wxml 中引用 item.wxml，就可以使用 item 的模板