像我这样的老Java开发，尤其是写过JSP的开发，肯定用过JSTL，什么<c:forEach>、<c:if>，wxml的也有非常相像的实现。

列表渲染

上文做了很简单的展示。

js做数据准备：

data:{
productList:[
{"productImg":"产品图片1","productId":"1","productName":"商品名称1","price":10000},
{"productImg":"产品图片2","productId":"2","productName":"商品名称2","price":22200}
]
}

<block wx:for="{{productList}}" wx:key="productId" wx:for-index="idx" wx:for-item="product">
<view>ID：{{product.productId}}；图片：{{product.productImg}}；名称：{{product.productName}}；价格：{{product.price}}</view>
</block>

• wx:for，绑定的数组。
• wx:for-index，当前元素的下标，默认为index。
• wx:for-item，当前元素的变量名，默认为item。
• wx:key，列表中项目的唯一标识。如果不配置此项，编译器会报warning。如果此列表是动态会改变的（排序、添加新元素等），则需要指定元素中唯一的属性（例如ID）为key。好处是数据发生变更，渲染层重新渲染此组件时，会在组件本身进行处理，而非重新创建一个新组件，从而提高渲染效率。

注意：block不是view、text这样的组件，它就是把一些组件包起来，类似group的概念，也不会渲染出来，就是搭配wx:for、wx:if使用。

条件渲染

<button type="default" wx:if="{{priority<3}}">普通提交</button>
<button type="primary" wx:elif="{{priority>=3&&priority<=5}}">提交按钮</button>
<button type="warn" wx:else>警告按钮</button>

用处主要是判断要不要渲染该组件。与hidden不同，wx:if是决定此组件要不要渲染出来，hidden是肯定会渲染出来，只是显示不显示而已。

查看此页面，会显示一个button，源代码，也只会出现1个button。如果是hidden，则源代码会有3个button，只显示1个而已。

页面跳转

其实就是WEB页面的`<a href="url">详情</a>`。

<navigator url="/pages/deviceapi/deviceapi">跳转</navigator>
<navigator url="/pages/deviceapi/deviceapi" open-type="redirect">重定向</navigator>
<navigator url="/pages/index/index" open-type="switchTab">切换TAB</navigator>
<navigator url="/pages/dataapi/dataapi" open-type="reLaunch">重启</navigator>

open-type有几种：

• navigate。默认的，当前页面保存，跳转到目标页面（不能跳转到tabBar页面），目标页面可以回退到当前页面。
• redirect。重定向，当前页面关闭，跳转到目标页面（不能跳转到tabBar页面），目标页面无法回退到当前页面。
• switchTab。顾名思义，跳转到某个tabBar页面，其他非tabBar页面全关闭。
• reLaunch。重启。除了打开目标页，关闭其他所有页面。
• navigateBack。就是浏览器的后退按钮。

页面跳转传参

页面跳转传参的方法很多，比如通过app.js里的globalData传递，也可以通过本地缓存的存取（wx.setStorage）。

不过不是太推荐这两种。它们都算是全局数据，俩页面的数据传递还是不要上升到全局的层面了。微信官方文档在数据缓存一节，就很明确地说了：

storage 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。

方法有3：

• wxml的url传参。
• js的方法传参。

这两者实际是一个东西的两种写法而已

源页面wxml：

<navigator url="/pages/locationapi/locationapi?from=url&id=1">跳转</navigator>
<button bind:tap="navigatorWithData">跳转传参</button>

源页面js：

navigatorWithData() {
wx.navigateTo({
url: '/pages/locationapi/locationapi?from=js&id=2',
})
}

目标页面js：

onLoad(options) {
  console.log(options.from)
  console.log(options.id)
  if(options.id){
    this.setData({from:options.from,id:options.id})
  }
}

• EventChannel传参

页面间事件通信通道，稍微复杂一点，但是相比用url传参，可以传更复杂的数据。

源页面wxml：

<button bind:tap="navigatorWithData2">跳转传参2</button>

源页面js：

navigatorWithData2() {
wx.navigateTo({
url: '/pages/locationapi/locationapi',
events: {
// 持续监听名为returnParam的事件，获取被打开页面传送到当前页面的数据
returnParam: function (data) {
console.log(data)
}
},
success: function (res) {
// 触发名为param的事件，通过eventChannel向被打开页面传送数据
res.eventChannel.emit('param', {
from: 'js2',
id: 3
})
}
})
}

目标页面js：

onLoad(options) {
const eventChannel = this.getOpenerEventChannel()
//触发returnParam事件，回传数据给调用页面
eventChannel.emit('returnParam', {data: '回传数据'});
//将接收的参数存入本页面的data
var that=this
//持续监听param事件
eventChannel.on('param', function (data) {
console.log("接收的参数",data)
that.setData({from:data.from,id:data.id})
})
}

一般目标页面拿到源页面传过来的参数，要放在自己的data进行处理的，不过写法就不是this.setData了，上面加了that的变量，为什么是这么个的写法，在后面的文章会详细解释。