微信小程序模板中使用循环

本篇介绍如何在模板里使用循环。
方法一：
template.wxml，该文件内容为：

<template name="msgItem1"><block wx:for="{{product1}}" wx:for-item="item" wx:key="pro">  <view>    <text> {{item.index}}: {{item.msg}} </text>    <text> Time: {{item.time}} </text>  </view>  </block></template>

方法二：使用模板：
template.wxml，该文件内容为：

<template name="msgItem">  <view>    <text> {{index}}: {{msg}} </text>    <text> Time: {{time}} </text>  </view></template><template name="msgItem1"><block wx:for="{{product1}}" wx:for-item="item" wx:key="pro">  <template is="msgItem" data="{{...item}}"/></block></template>

index.js的内容为：

Page({  data: {    product1: [{      index: 0,      msg: 'this is a template',      time: '217-09-15'    }, {      index: 1,      msg: 'this is a template',      time: '2020-09-15'      }, {        index: 2,        msg: 'this is a template',        time: '2018-09-15'      },]   },})

我们在index.wxml里的内容为：

<import src="../template/template.wxml"/><template is="msgItem1" data="{{product1}}"/>

这里不需要使用扩展运算符展开product1。