微信小程序实战教程：火车票查询（含demo）

界面展现

融合动态图叙述一下目前同时实现的功能：

2.1 主页上半部分表明用户头像与用户名（和微信中的信息一致，这部分组件就是工具自带的，我们可以修正这部分组件和内容，稍候可以提及）；下半部分表明一个经典的问候语“Hello World”，提供更多一个可以页面的按钮“页面以获取火车票”；

2.2 页面按钮后，通过事先选定的参数（调用了百度APIStore中去哪网火车票查阅USB，东站-东站查阅所须要参数为始发地、目的地及时间）传送网络命令，将以获取至的JSON数据按火车车次为节点展开解析并在新页面表明基本信息（除了详尽座位信息），为每个车次提供更多一个可以页面的按钮“页面查阅座位信息”；

2.3 页面某车次中的座位查阅按钮后，可以将该车次对应的所有座位信息表明在新页面中；

2.4 页面后两个页面左上角的“回到”按钮可以返回上一页，这个功能也就是工具自带的；

顺带加一下在博客园中填入动画，上面的模拟过程就是一张格式为gif的图片，像是嵌入普通图片一样操作方式即可。演唱工具采用的就是灵者Gif演唱，可以选定已经开始、暂停时所须要操作方式与区域等演唱信息。

3. 要点分析

关于微信小程序工具的采用及起始项目的结构表明，网上资源已经很多样，这里不急于再啰嗦

下面已经开始谈谈我个人在自学与研发过程中指出应该互动与记录的点，热烈欢迎大小神们一起探讨与科粉，特别就是谈得不对或尚待提升的地方。下面只得出和谈的点轻易有关的代码，整体代码可以至项目工程中回去查阅，建议大家自己调试一遍。

3.1 index

index就是项目新建时自动分解成的，做为小程序的启动页面。

3.1.1 index.wxml

首页的头像与用户名，从注的模拟过程可以窥见我将微信的名字“***”换成了“用户名”：

用户名

用户名部分原本的内容为{{userInfo.nickName}}，{{key_name}}的促进作用就是以获取关键字名叫key_name对应的值（数据通常以key_name:value的形式定义在wxml文件同目录之下js文件的data成员中，后面可以传授），image表明的头像资源也就是通过这种方式选定为src="{{userInfo.avatarUrl}}"，程序中产生的数据可以在开发者工具顶部偏右的AppData栏中查阅。

如果不须要从js文件中获取数据，那么可以像是代码中“用户名”那样轻易载入数据值，不过通常不所推荐这样搞，因为像是Android等平台App在研发时会将数据值放进strings.xml等文件，目的就是为了将数据与布局拆分，布局和功能同时实现代码拆分，便利研发与保护。

组件中的class项用以设置其样式，属性名对应的样式信息定义在wxss文件中，除了可以采用定义在本目录wxss文件中的样式，还可以采用app.wxss文件中定义的。如果样式只是在某页面中采用，那么建议定义在其目录下的wxss文件中，即为局部促进作用域内；如果就是多个页面共同采用，即为全局样式，那么通常定义在主程序app.wxss文件中。class样式可以选定组件的收录机、背景颜色等属性，本文不再展开详细描述。

在界面下方嵌入按钮“页面以获取火车票”组件：

页面以获取火车票

按钮的目标就是为了使用户可以页面展开可视化，至于采用button、text或其他组件，视具体内容市场需求而的定。这里就是利用text组件，文本内容轻易载入了字串“页面以获取火车票”，对于只有一个子组件的布局其实可以例如下面代码不必嵌套，一层布局搞掂。一般来说嵌套层数越太少，读取速度越慢，这对移动程序的体验就是至关重要的。

页面以获取火车票

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

页面以获取火车票

页面以获取汽车票

页面以获取飞机票

组件若要存有页面可视化功能，须为其存取事件积极响应方法，常用的存有单点--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回去哪网火车票以获取东站--东站火车票信息来说（http://apistore.baidu.com/apiworks/servicedetail/697.html），其官网得出的USB调用的参数信息与格式如下：

wx url——火车票查阅 USB地址；

header——命令参数header；

data——命令参数urlParam；

method——命令方法；

因为wx中的method参数预设就是GET，和火车票查阅USB选定的一致，所以调用时可以省略。

而对于最后三个反弹函数：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文件中展开布局。

"pages/train/train", //火车票车次信息页面

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

3.2.1 train.wxml

由于东站--东站火车票所有车次的始发站和终点站就是一样，例如北京--杭州东，所以先在页面顶部表明站点信息：

出发地：{{trainList[0].from}}

目的地：{{trainList[0].to}}

trainList对象可以在js文件中定义成data成员，值上面最后一张图中的JSON对象--trainList，即为火车票车次数组，每个元素涵盖一个车次的具体内容信息。

接下来表明每个车次的信息，以横线并作隔开（由于就是以自学和测试为目的，所以就没在布局的美观上下功夫，大家嘿嘿）：

{{index+1}}. 车次：{{train.trainNo}}

车型：{{train.trainType}}

初始时间：{{train.startTime}}

至东站时间：{{train.endTime}}

总时长：{{train.duration}}

页面查阅座位信息

第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方法（一已经开始自动运转，在其中同时实现数据的读取与处置），否则可以不嵌入。

onLoad: function(options) {

　　var jsonString = options.trainInfos;

　　//将字串类型变为JSON类型

　　var json = JSON.parse(jsonString);

　　this.setData({

    　　trainList: json.data.trainList,

　　});

},

当方法的调用者存有参数传至时，我们可以通过嵌入方法参数的形式去以获取。对于参数名，自动兴方法通常为options，组件反弹方法通常为e（event）。

第2行以获取index页面在关上train页面时传至的火车票信息参数trainInfos。

第4行将String类型对象切换回去JSON格式，之前在index页面提及过，url录的参数就是由JSON格式对象切换过来的String类型。

第6行将真正的火车票车次信息数组抽出，参数值数据成员trainList。

特别注意：给数据成员赋值时，必须调用页面自身的setData方法，否则即使赋值了也不能同步至wxml文件中回去，这一点难失效且不好定位原因。

车次数组获得后，wxml文件就可以根据组件的属性设置表明对应的信息。再来看同时实现按钮“页面查阅座位信息”对应的反弹方法：

getSeatInfo: function(e) {

    var prefix = 'trainindex-';

    var trainIndex = e.currentTarget.id.substring(prefix.length);

    //输入根据组件id以获取的车票索引，用来表明详尽的座位信息

    console.log(trainIndex);

    var trainNo = this.data.trainList[trainIndex].trainNo;

    var json = this.data.trainList[trainIndex].seatInfos;

    //将JSON类型变为String类型用来url参数传递，否则传达后可以变为[object Object]，同时传达车次

    var jsonString = JSON.stringify(json);

    wx.navigateTo({

        url: '../seat/seat?'+'trainNo='+trainNo+'&seatInfos='+jsonString,

    });

},

第2、3行以获取之前定义的组件id中的index部分，即为页面组件对应的trainList数组的负号。当然原先定义时也可以不嵌入后缀'trainindex-'，全然就是为了可读性，因为当项目越来越小时有个一目了然的标注总是极好的。

第6、7行分别以获取车次信息的列车号与座位信息，他们稍候可以被传达至seat页面。

第9行同样地将获得的JSON格式对象先切换为String类型，使其可以在url中做为可以被恰当传达的参数。

第11行关上代莱页面seat表明座位信息，多个参数之间以“&”符号隔开。

3.2.3 train.json

主程序中app.json文件除了布局须要调用onLoad方法的页面外，还选定了一些全局的window样式。若某个页面在自己的json文件中没定义局部的window属性，或显然没json文件，那预设将采用全局的。

项目起始没为index分解成json文件，因为其做为启动页，轻易用全局的“WeChat”就不好，其实index标题必须就是小程序的名称，我们自己真正研发的程序确实假白另一个名字。

可以看见，logs、train及seat都对标题展开了定义，结果就是可以全面覆盖掉全局的值。以train为基准，其在json文件中定义标题为“东站-东站火车查阅信息”：

{

 　　"navigationBarTitleText": "东站-东站火车查阅信息"

 }

除了一点，页面的json文件不须要也无法页面布局属性（Pages），就可以设置window属性，所以就可以省略window名称，轻易像是上述代码用{...}形式即可。

3.3 seat

seat页面用以表明某车次的座位信息，包含座位等级、票价及余票。通过train页面的分析，坚信大家对网络命令，数据在页面与页面、wxml与js文件之间的传达渐渐熟识了。而seat和train相似，没什么特别的地方，所以和logs一样这里就不再谈什么了。

4. 大体悟

 微信小程序，虽然目前还不晓得其在微信的接入口，但必须和下载号、服务号以及企业号可以有所不同。搜寻关上采用，用回去停用，没移动app的加装、浏览等过程，微信流量小，小巧、功能强大等特性就是其优点。然而正是因为这个优点，开发者害怕这有可能使小程序不能像是app那样强悍，毕竟接入口、审查机制、推展成本以及最小容许内存等这些还未确定的因素对一款应用领域来说都就是至关重要的。

对于初学者（例如原先搞出android研发），暂且不管上面提及的那些，在搬明白应用领域市场需求的同时，得踏出并大力推进对前端科学知识自学的脚步了。

本文项目代码以获取地址

Github：https://github.com/VincentWYJ/WXAppTrain.git；

Blog file：http://files.cnblogs.com/files/tgyf/WXAppTrain.rar；