微信小程序 火车票查询实例讲解

1 <view bindtap="bindViewTap" class="userinfo">
2 　　<image class="userinfo-avatar" src="/UploadFiles/2021-04-02/{{userInfo.avatarUrl}}">

用户名部分原本的内容为{{userInfo.nickName}}，{{key_name}}的作用是获取关键字名为key_name对应的值（数据一般以key_name:value的形式定义在wxml文件同目录下js文件的data成员中，后面会讲解），image显示的头像资源也是通过这种方式指定为src="{{userInfo.avatarUrl}}">
如果不需要从js文件中获取数据，那么可以像代码中“用户名”那样直接写入数据值，不过一般不推荐这样做，因为像Android等平台App在开发时会将数据值放入strings.xml等文件，目的是为了将数据与布局分离，布局和功能实现代码分离，方便开发与维护。
组件中的class项用来设置其样式，属性名对应的样式信息定义在wxss文件中，除了可以使用定义在本目录wxss文件中的样式，还可以使用app.wxss文件中定义的。如果样式只是在某页面中使用，那么建议定义在其目录下的wxss文件中，即局部作用域内；如果是多个页面共同使用，即全局样式，那么一般定义在主程序app.wxss文件中。class样式可以指定组件的宽高、背景颜色等属性，本文不再进行详述。
在界面下方添加按钮“点击获取火车票”组件：


1 <view class="gettrain-button" bindtap="getTrainInfo">
2 　　<text>点击获取火车票</text>
3 </view>



按钮的目标是为了让用户可以点击进行交互，至于使用button、text或其他组件，视具体需求而定。这里是利用text组件，文本内容直接写入了字串“点击获取火车票”，对于只有一个子组件的布局其实可以如下面代码不用嵌套，一层布局搞定。一般来说嵌套层数越少，加载速度越快，这对移动程序的体验是至关重要的。


1 <view class="gettrain-button" bindtap="getTrainInfo">
2 　　点击获取火车票
3 </view>


但如果在父容器下有多个子组件共享其定义的样式，那么嵌套可以另代码简洁很多：


1 <view class="gettrain-button">
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"theimg" alt="" src="/UploadFiles/2021-04-02/20161017141853481.png">

  一般来说，wx api提供的方法默认会有一个Object参数，需要时传入，不需要时不传便是。不过这对于像我这种Android开发者来说一开始有点不适应，怎么函数调用时都传入一个{...}参数，内部各个项之间用逗号“,”分隔，代码中的url、data等。
从代码中看，发起网络请求时传入了图中列出的四项参数：url、header、data及success，不同需求传入的参数也会不同。对于wx.request方法而言，需根据网络请求目标来传参数的是前四项：url、header、data及method。
以本案例利用百度APIStore去哪网火车票获取站--站火车票信息来说（http://apistore.baidu.com/apiworks/servicedetail/697.html），其官网给出的接口调用的参数信息与格式如下：
 
将上面两张图中的信息结合起来看，参数是一一对应的：
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"pages/train/train",  //火车票车次信息页面

2 "pages/seat/seat"  //车次余票信息页面


3.2.1 train.wxml
由于站--站火车票所有车次的始发站和终点站是一样，如北京--杭州东，所以先在页面顶部显示站点信息：
1 <text class="train-item">出发地：{{trainList[0].from}}</text>

2 <text class="train-item">目的地：{{trainList[0].to}}</text>


trainList对象会在js文件中定义成data成员，值为上面最后一张图中的JSON对象--trainList，即火车票车次数组，每个元素包含一个车次的具体信息。
接下来显示每个车次的信息，以横线作分隔（由于是以学习和测试为目的，所以就没有在布局的美观上下功夫，大家见谅）：




 1 <view class="line"></view>
 2 <block wx:for="{{trainList}}" wx:for-item="train">
 3  <text class="train-item">{{index+1}}. 车次：{{train.trainNo}}</text>
 4  <text class="train-item">车型：{{train.trainType}}</text>
 5  <text class="train-item">起始时间：{{train.startTime}}</text>
 6  <text class="train-item">到站时间：{{train.endTime}}</text>
 7  <text class="train-item">总时长：{{train.duration}}</text>
 8  <view id="trainindex-{{index}}" class="getseat-button" bindtap="getSeatInfo">
 9   <text>点击查看座位信息</text>
10  </view>
11  <view class="line"></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="trainindex-{{index}}"，给组件指定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"htmlcode">

1 {
2 　　"navigationBarTitleText": "站-站火车查询信息"
3 }



还有一点，页面的json文件不需要也不能页面配置属性（Pages），只能设置window属性，所以就可以省略window名称，直接像上述代码用{...}形式即可。
3.3 seat
seat页面用来显示某车次的座位信息，包括座位等级、票价及余票。通过train页面的分析，相信大家对网络请求，数据在页面与页面、wxml与js文件之间的传递渐渐熟悉了。而seat和train类似，没有什么特别的地方，所以和logs一样这里就不再讲什么了。
4. 小感悟
 微信小程序，虽然目前还不知道其在微信的接入口，但应该和订阅号、服务号以及企业号会有所不同。搜索打开使用，用完关闭，没有移动app的安装、下载等过程，微信流量大，轻便、易用等特性是其优点。然而正是因为这个优点，开发者担心这有可能使得小程序不能够像app那样强大，毕竟接入口、审核机制、推广成本以及最大允许内存等这些还未确定的因素对一款应来说都是至关重要的。
对于初学者（如原先搞android开发），暂且不管上面提到的那些，在弄明白应用需求的同时，得迈开并加快对前端知识学习的脚步了。
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

            
            上一篇：学习Node.js模块机制

            下一篇：让编辑器支持word复制黏贴、截屏的js代码