1 <view> 2 <text bindtap="getTrainInfo">点击获取火车票</text> 3 <text bindtap="getCarInfo">点击获取汽车票</text> 4 <text bindtap="getPlaneInfo">点击获取飞机票</text> 5 </view>
组件若要有点击交互功能，须为其绑定事件响应方法，常用的有单点--bindtap，长按--binglongtap。bindtap="getTrainInfo"，双引号中的文本是方法名称，在js文件中以该名定义方法，做需要的处理即可。
3.1.2 index.js
实现wxml布局中按钮“点击获取火车票”绑定的函数功能：
//获取火车票函数 getTrainInfo: function() { wx.request({ url: 'http://apis.baidu.com/qunar/qunar_train_service/s2ssearch', header: { apikey: '361cf2a2459552575b0e86e0f62302bc', }, data: { version: '1.0', from: '北京', to: '杭州', date: '2016-11-15', }, success: function(res) { var json = res.data; //将JSON类型转为String类型用以url参数传递，否则传递后会变成[object Object] var jsonString = JSON.stringify(json); wx.navigateTo({ url: '../train/train?trainInfos='+jsonString, }); }, }); },
我们先来看看微信小程序官网对于网络请求方法--wx.request(OBJECT)的说明：
一般来说，wx api提供的方法默认会有一个Object参数，需要时传入，不需要时不传便是。不过这对于像我这种Android开发者来说一开始有点不适应，怎么函数调用时都传入一个{...}参数，内部各个项之间用逗号“,”分隔，代码中的url、data等。
从代码中看，发起网络请求时传入了图中列出的四项参数：url、header、data及success，不同需求传入的参数也会不同。对于wx.request方法而言，需根据网络请求目标来传参数的是前四项：url、header、data及method。
以本案例利用百度APIStore去哪网火车票获取站--站火车票信息来说（），其官网给出的接口调用的参数信息与格式如下：
将上面两张图中的信息结合起来看，参数是一一对应的：
wx url——火车票查询 接口地址；
header——请求参数header；
data——请求参数urlParam；
method——请求方法；
因为wx中的method参数默认是GET，和火车票查询接口指定的一致，所以调用时可以省略。
而对于最后三个回调函数：success、fail及comlete，代码中添加了success，在请求成功时对数据进行处理。当然，一般的程序还得对请求失败的情况做处理。下面就来分析success方法中的代码，包括JSON数据的转换与新页面的跳转，请求返回的数据以参数res的形式传入到function中。先来看看res中包含了哪些信息，通过代码console.log(res)可以将其打印在工具调试页面的Console项中。
request--ok和statusCode--200表示请求成功，所以才会回调success方法。而data对象才是我们需要的数据，更精确地说，data.data.trainList对象才是真正的火车票信息。
var json = res.data，获取data对象（网络请求返回的数据一般为JSON格式），赋给变量json；
var jsonString = JSON.stringify(json)，将JSON类型对象暂时转换为String类型，用来作为url的参数部分进行传递；一开始在这里耽搁了很久，不进行转换直接传的话在目标页面获取不到想要的数据，下面会说明原因；
url: '../train/train?trainInfos='+jsonString，通过url指定的信息跳转到对应页面，如果不需要额外参数，直接写url: '../train/train'；如果只是传递简单的值，可写成url: '../train/train?param=123'；
至此，如果网络没有问题，点击按钮便可以进行火车票的查询并携带结果数据跳转到新页面了。
3.2 train
train是自定义新建的页面，用来显示火车票基本信息，注意新添的页面需在app.json文件中进行配置。
1 "pages/train/train", //火车票车次信息页面
2 "pages/seat/seat" //车次余票信息页面
3.2.1 train.wxml
由于站--站火车票所有车次的始发站和终点站是一样，如北京--杭州东，所以先在页面顶部显示站点信息：
1 <text>出发地：{{trainList[0].from}}</text>
2 <text>目的地：{{trainList[0].to}}</text>
trainList对象会在js文件中定义成data成员，值为上面最后一张图中的JSON对象--trainList，即火车票车次数组，每个元素包含一个车次的具体信息。
接下来显示每个车次的信息，以横线作分隔（由于是以学习和测试为目的，所以就没有在布局的美观上下功夫，大家见谅）：