設(shè)立微信小程序開發(fā)的flag已經(jīng)好久了，期間基本上都是碎片化時(shí)間學(xué)習(xí)廓推。一方面回顧之前自學(xué)的javascript細(xì)節(jié)刷袍，一方面動手按照教程進(jìn)行摸索。這不樊展，最近這兩兩天試了試呻纹，跟著教程做了第一個(gè)有功能小程序，真的是“紙上得來終覺淺专缠，絕知此事要躬行”雷酪。探索實(shí)踐中學(xué)到的知識點(diǎn)最生動有趣，而且容易記憶涝婉。下面記錄一下這個(gè)過程哥力，梳理一下中間的key point。
微信小程序的基本框架如下圖所示：
按照代碼后綴墩弯，小程序主要分為四類文件：
1 js 該文件主要是描述頁面的交互邏輯吩跋，里面包含的主要是一些函數(shù)，如監(jiān)聽處理頁面的函數(shù)等渔工，還有負(fù)責(zé)和其他頁面進(jìn)行交互锌钮。
2 wxml 這個(gè)文件主要是描述頁面的構(gòu)成∫兀基本上就是xml的語法梁丘。
3 json 這個(gè)文件主要定義一些經(jīng)常修改的文本或者選項(xiàng)配置等
4 wxss 類似于css文件，定義了頁面的顏色大小格式等內(nèi)容
總體上旺韭，微信小程序相當(dāng)于簡單的網(wǎng)頁開發(fā)氛谜，非常適合我們這種入門者接觸和體驗(yàn)前端開發(fā)的魅力∏耍快遞查詢是一個(gè)非常簡單的功能值漫，一個(gè)單頁面就能搞定，接下來我細(xì)細(xì)的總結(jié)一下快遞查詢開發(fā)的關(guān)鍵要點(diǎn)珊燎。
- 第一步惭嚣，定義主頁面標(biāo)題遵湖。整體效果圖如下。
為此我們需要修改app.json文件晚吞。
{
"pages":[
"pages/index/index"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "快遞查詢",
"navigationBarTextStyle":"black"
}
}
圖中pages 屬性設(shè)置了該小程序所包含的頁面的路徑延旧，用一個(gè)array保存，第一個(gè)默認(rèn)是首頁槽地。連續(xù)兩個(gè)index 第一個(gè)index表示index文件夾迁沫，第二個(gè)index表示index作為文件名的各種文件(前面所說的四種文件) 一般文件名和文件夾名保持一致。
window屬性設(shè)置當(dāng)前頁面的相關(guān)屬性捌蚊。主要包含了背景的文字樣式集畅，導(dǎo)航條(頂部的一條）的背景顏色，導(dǎo)航條文本設(shè)置缅糟，導(dǎo)航條文字顏色挺智。我們只需要在這里把導(dǎo)航條文本設(shè)置為"快遞查詢"即可。
2 第二步窗宦，添加輸入框和查詢按鈕赦颇。
既然要做一個(gè)查詢的小程序，那必須包含條形的查詢框和確認(rèn)按鈕赴涵。這兩個(gè)組件都可以在微信小程序開發(fā)的組件頁面查找
（1）添加輸入框
在index.wxml中添加這樣一句
<input placeholder="請輸入快遞號"/>
然后在index.wxss中加入：
input{
border: 1px solid red;
width: 90%;
margin: 10%;
padding: 5px;
}
這樣就可以在頁面中加入一條這樣的條形框：
（2）添加查詢按鈕
查詢按鈕的組件如下所示媒怯，也加入到index.wxml中
<button type="primary" bindtap="btnClick" > 查詢 </button>
bindtap表示綁定按鈕對應(yīng)的處理函數(shù)。因此我們自然需要在index.js中加入btnClick函數(shù)
btnClick: function(){
var thispage = this;
app.getExpressInfo(this.data.expressNo,function(data){
console.log(data)
thispage.setData({expressionInfo:data})
})
}
其中 expressNo是定義在page.data對象中,表示查詢的編號髓窜，expressionInfo是表示查詢之后的物流信息扇苞，也是定義在page.data中。這里有一個(gè)點(diǎn)需要注意
Q:為什么需要把this賦給thispage,不直接在下面用this.setData?
A:這是因?yàn)樯厦娴膖his指代的是page對象寄纵，而在函數(shù)getExpressInfo中如果使用this,this就表示app對象鳖敷，因?yàn)檫@個(gè)函數(shù)的調(diào)用者是app對象,所以此處不能直接用this,需要在函數(shù)外部把this保存在thispage中
getExpressInfo是保存在app.js中的一個(gè)函數(shù),如下所示
getExpressInfo:function(num,cb){
wx.request({
url: 'http://kdwlcxf.market.alicloudapi.com/kdwlcx?no='+num, //僅為示例，并非真實(shí)的接口地址
header: {
"Authorization": "APPCODE 4cf870fa5534492dbf3623efbf57adba"
},
success: function (res) {
// console.log(res.data)
cb(res.data)
}
})
a. 微信的網(wǎng)絡(luò)請求擂啥。wx.request() 這個(gè)api見官網(wǎng)指南哄陶。
b. api接口的使用帆阳，該api是我從阿里云的api Market上找的,主要配置項(xiàng)包括url header success回調(diào)函數(shù)等哺壶。這里回調(diào)函數(shù)就是btnClick內(nèi)部定義的匿名函數(shù)。
- 到這里之前蜒谤，主題的結(jié)構(gòu)已經(jīng)搭建差不多了山宾，接下來主要是數(shù)據(jù)的輸入和結(jié)果的展示。
(1) 從輸入框輸入物流編號鳍徽。之前定義了page.data中的expressNo 我們需要設(shè)置從輸入框獲取這個(gè)變量的值资锰。
在剛才的輸入框組件中加入bindinput字段
<input placeholder="請輸入快遞號" bindinput="bindKeyInput"/>
bindinput綁定了一個(gè)輸入的函數(shù)bindKeyInput，因此我們需要在index.js中定義這個(gè)函數(shù)阶祭。
bindKeyInput:function(e){
this.setData({expressNo:e.detail.value})
},
這個(gè)detail.value是通過打log試出來的绷杜，e表示輸出框傳入的內(nèi)容直秆。
（2）接下來設(shè)置打印物流信息。
物流信息在點(diǎn)擊查詢按鈕時(shí)鞭盟，會在回調(diào)函數(shù)中保存至expressionInfo變量中圾结，我們即把該變量展示到index頁面中即可。同時(shí)齿诉，由于物流信息一般比較長筝野，需要加入滾動條，方便查閱粤剧。
在index.wxml中,先插入scroll-view組件歇竟，在組件內(nèi)插入view視圖組件，用于展示物流信息抵恋。代碼如下:
<scroll-view scroll-y style="height: 200px;" bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll" scroll-into-view="{{toView}}" scroll-top="{{scrollTop}}">
<view wx:for="{{expressionInfo.result.list}}">
{{item.time}}:{{item.status}}
</view>
</scroll-view>
scroll-view后面的一大堆配置是引用微信的官方文檔焕议。里面的view視圖使用了獨(dú)有的for循環(huán)功能。將保存物流信息的array逐個(gè)展示出來弧关。
最后的效果如下所示号坡，大功告成。
后記：通過這次學(xué)習(xí)梯醒，對微信小程序開發(fā)的框架和流程有了清晰的認(rèn)識宽堆，嘗試了一些簡單的組件，大大提升了興趣茸习。下次更新畜隶，希望能做出一個(gè)更加復(fù)雜的東西出來。
