像我这样的老Java开发，尤其是写过JSP的开发，肯定用过JSTL，什么
列表渲染
上文做了很简单的展示。
js做数据准备：
data:{
productList:[
{"productImg":"产品图片1","productId":"1","productName":"商品名称1","price":10000},
{"productImg":"产品图片2","productId":"2","productName":"商品名称2","price":22200}
]
}
ID：{{product.productId}}；图片：{{product.productImg}}；名称：{{product.productName}}；价格：{{product.price}}
- wx:for，绑定的数组。
- wx:for-index，当前元素的下标，默认为index。
- wx:for-item，当前元素的变量名，默认为item。
- wx:key，列表中项目的唯一标识。如果不配置此项，编译器会报warning。如果此列表是动态会改变的（排序、添加新元素等），则需要指定元素中唯一的属性（例如ID）为key。好处是数据发生变更，渲染层重新渲染此组件时，会在组件本身进行处理，而非重新创建一个新组件，从而提高渲染效率。
注意：block不是view、text这样的组件，它就是把一些组件包起来，类似group的概念，也不会渲染出来，就是搭配wx:for、wx:if使用。
条件渲染
用处主要是判断要不要渲染该组件。与hidden不同，wx:if是决定此组件要不要渲染出来，hidden是肯定会渲染出来，只是显示不显示而已。
查看此页面，会显示一个button，源代码，也只会出现1个button。如果是hidden，则源代码会有3个button，只显示1个而已。
页面跳转
其实就是WEB页面的`详情`。
跳转
重定向
切换TAB
重启 open-type有几种：
- navigate。默认的，当前页面保存，跳转到目标页面（不能跳转到tabBar页面），目标页面可以回退到当前页面。
- redirect。重定向，当前页面关闭，跳转到目标页面（不能跳转到tabBar页面），目标页面无法回退到当前页面。
- switchTab。顾名思义，跳转到某个tabBar页面，其他非tabBar页面全关闭。
- reLaunch。重启。除了打开目标页，关闭其他所有页面。
- navigateBack。就是浏览器的后退按钮。
页面跳转传参
页面跳转传参的方法很多，比如通过app.js里的globalData传递，也可以通过本地缓存的存取（wx.setStorage）。
不过不是太推荐这两种。它们都算是全局数据，俩页面的数据传递还是不要上升到全局的层面了。微信官方文档在数据缓存一节，就很明确地说了：
storage 应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。
方法有3：
- wxml的url传参。
- js的方法传参。
这两者实际是一个东西的两种写法而已
源页面wxml：
跳转
源页面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：
源页面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的变量，为什么是这么个的写法，在后面的文章会详细解释。