1 <view></view> 2 <block wx:for="{{trainList}}" wx:for-item="train"> 3 <text>{{index+1}}. 车次：{{train.trainNo}}</text> 4 <text>车型：{{train.trainType}}</text> 5 <text>起始时间：{{train.startTime}}</text> 6 <text>到站时间：{{train.endTime}}</text> 7 <text>总时长：{{train.duration}}</text> 8 <view bindtap="getSeatInfo"> 9 <text>点击查看座位信息</text> 10 </view> 11 <view></view> 12 </block>
第1、11行很简单，在站点与车次、车次与车次之间添加横线。
当布局中的组件个数和js中的数据有关，即在wxml中写死组件不能满足需求时，可以利用block和wx:for来进行组件的动态生成。
第2行wx:for="{{trainList}}"表示block块中的组件可以使用数组trainList中的内容，从下标0开始迭代，数据中有几个元素，就会动态生成几套组件。wx:for-item="train"指定数组中元素的名称为train（默认的是item，指定的意义之一是可读性强），后续获取属性值时可通过train.key_name的形式。
第3行开始添加组件，类型是text，值为{{index+1}}. 车次：{{train.trainNo}}，前半部分用来标明每个车次的序号，从1开始；而index和item类似，是默认的迭代索引名称，其实就是数组元素当前的下标，从0开始。
后面几行添加text组件和第3行差不多，但第8行有两个点说一下：
*1 bindtap="getSeatInfo"，绑定一个回调函数，点击时跳转到新页面，显示当前车次对应的座位信息；
*2，给组件指定id，可以看到之前的组件都没有设置过该属性（不需要就可以不设置），那么什么时候需要呢？其中一种情况，当js中某组件绑定的回调方法需要得知是哪个组件触发了自己的时候，比如第一点中的方法getSeatInfo，要想点击某车次的查看座位信息按钮后显示出对应的座位信息，就得知道点击组件对应的trainList数组下标，而这个需求，正好可以借助id和index属性来实现；
3.2.2 train.js
首先定义data成员trainList，用来接收index页面传递过来的数据：
trainList: []
页面启动时若有数据需要载入，那么得添加onLoad方法（一开始自动运行，在其中实现数据的加载与处理），否则可以不添加。
1 onLoad: function(options) { 2 var jsonString = options.trainInfos; 3 //将字串类型转为JSON类型 4 var json = JSON.parse(jsonString); 5 this.setData({ 6 trainList: json.data.trainList, 7 }); 8 },
当方法的调用者有参数传入时，我们可以通过添加方法参数的形式来获取。对于参数名，自动启方法一般为options，组件回调方法一般为e（event）。
第2行获取index页面在打开train页面时传入的火车票信息参数trainInfos。
第4行将String类型对象转换回JSON格式，之前在index页面提到过，url传的参数是由JSON格式对象转换过来的String类型。
第6行将真正的火车票车次信息数组取出，赋给数据成员trainList。
注意：给数据成员赋值时，必须调用页面自身的setData方法，否则就算赋值了也不会同步到wxml文件中去，这一点容易出错且不好定位原因。
车次数组得到后，wxml文件就会根据组件的属性设置显示对应的信息。再来看实现按钮“点击查看座位信息”对应的回调方法：
1 getSeatInfo: function(e) { 2 var prefix = 'trainindex-'; 3 var trainIndex = e.currentTarget.id.substring(prefix.length); 4 //输出根据组件id获取的车票索引，用以显示详细的座位信息 5 console.log(trainIndex); 6 var trainNo = this.data.trainList[trainIndex].trainNo; 7 var json = this.data.trainList[trainIndex].seatInfos; 8 //将JSON类型转为String类型用以url参数传递，否则传递后会变成[object Object]，同时传递车次 9 var jsonString = JSON.stringify(json); 10 wx.navigateTo({ 11 url: '../seat/seat?'+'trainNo='+trainNo+'&seatInfos='+jsonString, 12 }); 13 },
第2、3行获取之前定义的组件id中的index部分，即点击组件对应的trainList数组的下标。当然原先定义时也可以不添加前缀'trainindex-'，完全是为了可读性，因为当项目越来越大时有个一目了然的标示总是不错的。
第6、7行分别获取车次信息的列车号与座位信息，他们稍候会被传递到seat页面。
第9行同样地将得到的JSON格式对象先转换为String类型，让其可以在url中作为可被正确传递的参数。
第11行打开新的页面seat显示座位信息，多个参数之间以“&”符号分隔。
3.2.3 train.json