微信小程序?qū)嵗坛蹋涸趺床樵兓疖?chē)票（含demo）
微信小程序能夠通過(guò)搜索打開(kāi)使用，用完關(guān)閉，沒(méi)有移動(dòng)app的安裝、下載等過(guò)程，微信流量大，輕便、易用等特性是其優(yōu)點(diǎn)。使用微信小程序還能查詢獲取火車(chē)票呢，快來(lái)看看具體內(nèi)容吧!
主頁(yè)上半部分顯示用戶頭像與用戶名(和微信中的信息一致，這部分組件是工具自帶的，我們可以修改這部分組件和內(nèi)容，稍候會(huì)提到);下半部分顯示一個(gè)經(jīng)典的問(wèn)候語(yǔ)“Hello World”，提供一個(gè)可點(diǎn)擊的按鈕“點(diǎn)擊獲取火車(chē)票”;
點(diǎn)擊按鈕后，通過(guò)事先指定的參數(shù)(調(diào)用了百度APIStore中去哪網(wǎng)火車(chē)票查詢接口，站-站查詢所需參數(shù)為始發(fā)地、目的地及時(shí)間)發(fā)送網(wǎng)絡(luò)請(qǐng)求，將獲取到的JSON數(shù)據(jù)按火車(chē)車(chē)次為節(jié)點(diǎn)進(jìn)行解析并在新頁(yè)面顯示基本信息(除了詳細(xì)座位信息)，為每個(gè)車(chē)次提供一個(gè)可點(diǎn)擊的按鈕“點(diǎn)擊查看座位信息”;
點(diǎn)擊某車(chē)次中的座位查詢按鈕后，會(huì)將該車(chē)次對(duì)應(yīng)的所有座位信息顯示在新頁(yè)面中;
點(diǎn)擊后兩個(gè)頁(yè)面左上角的“返回”按鈕可回到上一頁(yè)，這個(gè)功能也是工具自帶的;
index
index是項(xiàng)目新建時(shí)自動(dòng)生成的，作為小程序的啟動(dòng)頁(yè)面。
index.wxml
首頁(yè)的頭像與用戶名，從上圖的演示過(guò)程可以看出我將微信的名字“***”改成了“用戶名”：
用戶名部分原本的內(nèi)容為{{userInfo.nickName}}，{{key_name}}的作用是獲取關(guān)鍵字名為key_name對(duì)應(yīng)的值(數(shù)據(jù)一般以key_name:value的形式定義在wxml文件同目錄下js文件的data成員中，后面會(huì)講解)，image顯示的頭像資源也是通過(guò)這種方式指定為src="{{userInfo.avatarUrl}}"，程序中產(chǎn)生的數(shù)據(jù)可以在開(kāi)發(fā)者工具頂部偏右的AppData欄中查看。
如果不需要從js文件中獲取數(shù)據(jù)，那么可以像代碼中“用戶名”那樣直接寫(xiě)入數(shù)據(jù)值，不過(guò)一般不推薦這樣做，因?yàn)橄馎ndroid等平臺(tái)App在開(kāi)發(fā)時(shí)會(huì)將數(shù)據(jù)值放入strings.xml等文件，目的是為了將數(shù)據(jù)與布局分離，布局和功能實(shí)現(xiàn)代碼分離，方便開(kāi)發(fā)與維護(hù)。
組件中的class項(xiàng)用來(lái)設(shè)置其樣式，屬性名對(duì)應(yīng)的樣式信息定義在wxss文件中，除了可以使用定義在本目錄wxss文件中的樣式，還可以使用app.wxss文件中定義的。如果樣式只是在某頁(yè)面中使用，那么建議定義在其目錄下的wxss文件中，即局部作用域內(nèi);如果是多個(gè)頁(yè)面共同使用，即全局樣式，那么一般定義在主程序app.wxss文件中。class樣式可以指定組件的寬高、背景顏色等屬性，本文不再進(jìn)行詳述。
在界面下方添加按鈕“點(diǎn)擊獲取火車(chē)票”組件：
按鈕的目標(biāo)是為了讓用戶可以點(diǎn)擊進(jìn)行交互，至于使用button、text或其他組件，視具體需求而定。這里是利用text組件，文本內(nèi)容直接寫(xiě)入了字串“點(diǎn)擊獲取火車(chē)票”，對(duì)于只有一個(gè)子組件的布局其實(shí)可以如下面代碼不用嵌套，一層布局搞定。一般來(lái)說(shuō)嵌套層數(shù)越少，加載速度越快，這對(duì)移動(dòng)程序的體驗(yàn)是至關(guān)重要的。
組件若要有點(diǎn)擊交互功能，須為其綁定事件響應(yīng)方法，常用的有單點(diǎn)－－bindtap，長(zhǎng)按－－binglongtap。bindtap="getTrainInfo"，雙引號(hào)中的文本是方法名稱(chēng)，在js文件中以該名定義方法，做需要的處理即可。
3.1.2 index.js
實(shí)現(xiàn)wxml布局中按鈕“點(diǎn)擊獲取火車(chē)票”綁定的函數(shù)功能：
//獲取火車(chē)票函數(shù)
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類(lèi)型轉(zhuǎn)為String類(lèi)型用以u(píng)rl參數(shù)傳遞，否則傳遞后會(huì)變成[object Object]
var jsonString = JSON.stringify(json);
wx.navigateTo({
url: '../train/train?trainInfos='+jsonString,
});
},
});
},
我們先來(lái)看看微信小程序官網(wǎng)對(duì)于網(wǎng)絡(luò)請(qǐng)求方法－－wx.request(OBJECT)的說(shuō)明：
一般來(lái)說(shuō)，wx api提供的方法默認(rèn)會(huì)有一個(gè)Object參數(shù)，需要時(shí)傳入，不需要時(shí)不傳便是。不過(guò)這對(duì)于像我這種Android開(kāi)發(fā)者來(lái)說(shuō)一開(kāi)始有點(diǎn)不適應(yīng)，怎么函數(shù)調(diào)用時(shí)都傳入一個(gè){...}參數(shù)，內(nèi)部各個(gè)項(xiàng)之間用逗號(hào)“,”分隔，代碼中的url、data等。
從代碼中看，發(fā)起網(wǎng)絡(luò)請(qǐng)求時(shí)傳入了圖中列出的四項(xiàng)參數(shù)：url、header、data及success，不同需求傳入的參數(shù)也會(huì)不同。對(duì)于wx.request方法而言，需根據(jù)網(wǎng)絡(luò)請(qǐng)求目標(biāo)來(lái)傳參數(shù)的是前四項(xiàng)：url、header、data及method。
以本案例利用百度APIStore去哪網(wǎng)火車(chē)票獲取站－－站火車(chē)票信息來(lái)說(shuō)(http://apistore.baidu.com/apiworks/servicedetail/697.html)，其官網(wǎng)給出的接口調(diào)用的參數(shù)信息與格式如下：
將上面兩張圖中的信息結(jié)合起來(lái)看，參數(shù)是一一對(duì)應(yīng)的：
wx url——火車(chē)票查詢 接口地址;
header——請(qǐng)求參數(shù)header;
data——請(qǐng)求參數(shù)urlParam;
method——請(qǐng)求方法;
因?yàn)閣x中的method參數(shù)默認(rèn)是GET，和火車(chē)票查詢接口指定的一致，所以調(diào)用時(shí)可以省略。
而對(duì)于最后三個(gè)回調(diào)函數(shù)：success、fail及comlete，代碼中添加了success，在請(qǐng)求成功時(shí)對(duì)數(shù)據(jù)進(jìn)行處理。當(dāng)然，一般的程序還得對(duì)請(qǐng)求失敗的情況做處理。下面就來(lái)分析success方法中的代碼，包括JSON數(shù)據(jù)的轉(zhuǎn)換與新頁(yè)面的跳轉(zhuǎn)，請(qǐng)求返回的數(shù)據(jù)以參數(shù)res的形式傳入到function中。先來(lái)看看res中包含了哪些信息，通過(guò)代碼console.log(res)可以將其打印在工具調(diào)試頁(yè)面的Console項(xiàng)中。
request－－ok和statusCode－－200表示請(qǐng)求成功，所以才會(huì)回調(diào)success方法。而data對(duì)象才是我們需要的數(shù)據(jù)，更精確地說(shuō)，data.data.trainList對(duì)象才是真正的火車(chē)票信息。
var json = res.data，獲取data對(duì)象(網(wǎng)絡(luò)請(qǐng)求返回的數(shù)據(jù)一般為JSON格式)，賦給變量json;
var jsonString = JSON.stringify(json)，將JSON類(lèi)型對(duì)象暫時(shí)轉(zhuǎn)換為String類(lèi)型，用來(lái)作為url的參數(shù)部分進(jìn)行傳遞;一開(kāi)始在這里耽擱了很久，不進(jìn)行轉(zhuǎn)換直接傳的話在目標(biāo)頁(yè)面獲取不到想要的數(shù)據(jù)，下面會(huì)說(shuō)明原因;
url: '../train/train?trainInfos='+jsonString，通過(guò)url指定的信息跳轉(zhuǎn)到對(duì)應(yīng)頁(yè)面，如果不需要額外參數(shù)，直接寫(xiě)url: '../train/train';如果只是傳遞簡(jiǎn)單的值，可寫(xiě)成url: '../train/train?param=123';
至此，如果網(wǎng)絡(luò)沒(méi)有問(wèn)題，點(diǎn)擊按鈕便可以進(jìn)行火車(chē)票的查詢并攜帶結(jié)果數(shù)據(jù)跳轉(zhuǎn)到新頁(yè)面了。
是不是覺(jué)得很有意思呢?下面我們?cè)賮?lái)看看微信小程序里面的嗨圖，一款低調(diào)奢華有內(nèi)涵的p圖工具，功能多多，驚喜多多！
1、專(zhuān)題——DIY圖片的模板，點(diǎn)擊可以生成使用，分享到朋友圈。
2、分享墻——用戶上傳的自己DIY作品。
3、立即制作——可以用自己的圖來(lái)DIY。
4、告訴我——告訴產(chǎn)品的改進(jìn)，內(nèi)容的增加。
想要體驗(yàn)怎么制作屬于自己個(gè)性朋友圈照片的用戶，等1月9號(hào)微信小程序上線后，就馬上掃碼關(guān)注吧！
網(wǎng)公網(wǎng)安備