微信小程序?qū)嵗坛蹋涸趺床樵兓疖嚻保ê琩emo)
微信小程序能夠通過搜索打開使用,用完關(guān)閉,沒有移動(dòng)app的安裝、下載等過程,微信流量大,輕便、易用等特性是其優(yōu)點(diǎn)。使用微信小程序還能查詢獲取火車票呢,快來看看具體內(nèi)容吧!
主頁上半部分顯示用戶頭像與用戶名(和微信中的信息一致,這部分組件是工具自帶的,我們可以修改這部分組件和內(nèi)容,稍候會(huì)提到);下半部分顯示一個(gè)經(jīng)典的問候語“Hello World”,提供一個(gè)可點(diǎn)擊的按鈕“點(diǎn)擊獲取火車票”;

點(diǎn)擊按鈕后,通過事先指定的參數(shù)(調(diào)用了百度APIStore中去哪網(wǎng)火車票查詢接口,站-站查詢所需參數(shù)為始發(fā)地、目的地及時(shí)間)發(fā)送網(wǎng)絡(luò)請求,將獲取到的JSON數(shù)據(jù)按火車車次為節(jié)點(diǎn)進(jìn)行解析并在新頁面顯示基本信息(除了詳細(xì)座位信息),為每個(gè)車次提供一個(gè)可點(diǎn)擊的按鈕“點(diǎn)擊查看座位信息”;

點(diǎn)擊某車次中的座位查詢按鈕后,會(huì)將該車次對應(yīng)的所有座位信息顯示在新頁面中;

點(diǎn)擊后兩個(gè)頁面左上角的“返回”按鈕可回到上一頁,這個(gè)功能也是工具自帶的;
index
index是項(xiàng)目新建時(shí)自動(dòng)生成的,作為小程序的啟動(dòng)頁面。
index.wxml
首頁的頭像與用戶名,從上圖的演示過程可以看出我將微信的名字“***”改成了“用戶名”:

用戶名部分原本的內(nèi)容為{{userInfo.nickName}},{{key_name}}的作用是獲取關(guān)鍵字名為key_name對應(yīng)的值(數(shù)據(jù)一般以key_name:value的形式定義在wxml文件同目錄下js文件的data成員中,后面會(huì)講解),image顯示的頭像資源也是通過這種方式指定為src="{{userInfo.avatarUrl}}",程序中產(chǎn)生的數(shù)據(jù)可以在開發(fā)者工具頂部偏右的AppData欄中查看。
如果不需要從js文件中獲取數(shù)據(jù),那么可以像代碼中“用戶名”那樣直接寫入數(shù)據(jù)值,不過一般不推薦這樣做,因?yàn)橄馎ndroid等平臺(tái)App在開發(fā)時(shí)會(huì)將數(shù)據(jù)值放入strings.xml等文件,目的是為了將數(shù)據(jù)與布局分離,布局和功能實(shí)現(xiàn)代碼分離,方便開發(fā)與維護(hù)。
組件中的class項(xiàng)用來設(shè)置其樣式,屬性名對應(yīng)的樣式信息定義在wxss文件中,除了可以使用定義在本目錄wxss文件中的樣式,還可以使用app.wxss文件中定義的。如果樣式只是在某頁面中使用,那么建議定義在其目錄下的wxss文件中,即局部作用域內(nèi);如果是多個(gè)頁面共同使用,即全局樣式,那么一般定義在主程序app.wxss文件中。class樣式可以指定組件的寬高、背景顏色等屬性,本文不再進(jìn)行詳述。
在界面下方添加按鈕“點(diǎn)擊獲取火車票”組件:

按鈕的目標(biāo)是為了讓用戶可以點(diǎn)擊進(jìn)行交互,至于使用button、text或其他組件,視具體需求而定。這里是利用text組件,文本內(nèi)容直接寫入了字串“點(diǎn)擊獲取火車票”,對于只有一個(gè)子組件的布局其實(shí)可以如下面代碼不用嵌套,一層布局搞定。一般來說嵌套層數(shù)越少,加載速度越快,這對移動(dòng)程序的體驗(yàn)是至關(guān)重要的。

組件若要有點(diǎn)擊交互功能,須為其綁定事件響應(yīng)方法,常用的有單點(diǎn)--bindtap,長按--binglongtap。bindtap="getTrainInfo",雙引號中的文本是方法名稱,在js文件中以該名定義方法,做需要的處理即可。
3.1.2 index.js
實(shí)現(xiàn)wxml布局中按鈕“點(diǎn)擊獲取火車票”綁定的函數(shù)功能:
//獲取火車票函數(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類型轉(zhuǎn)為String類型用以url參數(shù)傳遞,否則傳遞后會(huì)變成[object Object]
var jsonString = JSON.stringify(json);
wx.navigateTo({
url: '../train/train?trainInfos='+jsonString,
});
},
});
},
我們先來看看微信小程序官網(wǎng)對于網(wǎng)絡(luò)請求方法--wx.request(OBJECT)的說明:

一般來說,wx api提供的方法默認(rèn)會(huì)有一個(gè)Object參數(shù),需要時(shí)傳入,不需要時(shí)不傳便是。不過這對于像我這種Android開發(fā)者來說一開始有點(diǎn)不適應(yīng),怎么函數(shù)調(diào)用時(shí)都傳入一個(gè){...}參數(shù),內(nèi)部各個(gè)項(xiàng)之間用逗號“,”分隔,代碼中的url、data等。
從代碼中看,發(fā)起網(wǎng)絡(luò)請求時(shí)傳入了圖中列出的四項(xiàng)參數(shù):url、header、data及success,不同需求傳入的參數(shù)也會(huì)不同。對于wx.request方法而言,需根據(jù)網(wǎng)絡(luò)請求目標(biāo)來傳參數(shù)的是前四項(xiàng):url、header、data及method。
以本案例利用百度APIStore去哪網(wǎng)火車票獲取站--站火車票信息來說(http://apistore.baidu.com/apiworks/servicedetail/697.html),其官網(wǎng)給出的接口調(diào)用的參數(shù)信息與格式如下:

將上面兩張圖中的信息結(jié)合起來看,參數(shù)是一一對應(yīng)的:
wx url——火車票查詢 接口地址;
header——請求參數(shù)header;
data——請求參數(shù)urlParam;
method——請求方法;
因?yàn)閣x中的method參數(shù)默認(rèn)是GET,和火車票查詢接口指定的一致,所以調(diào)用時(shí)可以省略。
而對于最后三個(gè)回調(diào)函數(shù):success、fail及comlete,代碼中添加了success,在請求成功時(shí)對數(shù)據(jù)進(jìn)行處理。當(dāng)然,一般的程序還得對請求失敗的情況做處理。下面就來分析success方法中的代碼,包括JSON數(shù)據(jù)的轉(zhuǎn)換與新頁面的跳轉(zhuǎn),請求返回的數(shù)據(jù)以參數(shù)res的形式傳入到function中。先來看看res中包含了哪些信息,通過代碼console.log(res)可以將其打印在工具調(diào)試頁面的Console項(xiàng)中。

request--ok和statusCode--200表示請求成功,所以才會(huì)回調(diào)success方法。而data對象才是我們需要的數(shù)據(jù),更精確地說,data.data.trainList對象才是真正的火車票信息。
var json = res.data,獲取data對象(網(wǎng)絡(luò)請求返回的數(shù)據(jù)一般為JSON格式),賦給變量json;
var jsonString = JSON.stringify(json),將JSON類型對象暫時(shí)轉(zhuǎn)換為String類型,用來作為url的參數(shù)部分進(jìn)行傳遞;一開始在這里耽擱了很久,不進(jìn)行轉(zhuǎn)換直接傳的話在目標(biāo)頁面獲取不到想要的數(shù)據(jù),下面會(huì)說明原因;
url: '../train/train?trainInfos='+jsonString,通過url指定的信息跳轉(zhuǎn)到對應(yīng)頁面,如果不需要額外參數(shù),直接寫url: '../train/train';如果只是傳遞簡單的值,可寫成url: '../train/train?param=123';
至此,如果網(wǎng)絡(luò)沒有問題,點(diǎn)擊按鈕便可以進(jìn)行火車票的查詢并攜帶結(jié)果數(shù)據(jù)跳轉(zhuǎn)到新頁面了。
是不是覺得很有意思呢?下面我們再來看看微信小程序里面的嗨圖,一款低調(diào)奢華有內(nèi)涵的p圖工具,功能多多,驚喜多多!

1、專題——DIY圖片的模板,點(diǎn)擊可以生成使用,分享到朋友圈。
2、分享墻——用戶上傳的自己DIY作品。
3、立即制作——可以用自己的圖來DIY。
4、告訴我——告訴產(chǎn)品的改進(jìn),內(nèi)容的增加。
想要體驗(yàn)怎么制作屬于自己個(gè)性朋友圈照片的用戶,等1月9號微信小程序上線后,就馬上掃碼關(guān)注吧!
