設(shè)立微信小程序開發(fā)的flag已經(jīng)好久了，期間基本上都是碎片化時(shí)間學(xué)習(xí)。一方面回顧之前自學(xué)的javascript細(xì)節(jié)，一方面動(dòng)手按照教程進(jìn)行摸索。這不，最近這兩兩天試了試，跟著教程做了第一個(gè)有功能小程序，真的是“紙上得來終覺淺，絕知此事要躬行”。探索實(shí)踐中學(xué)到的知識(shí)點(diǎn)最生動(dòng)有趣，而且容易記憶。下面記錄一下這個(gè)過程，梳理一下中間的key point。

微信小程序的基本框架如下圖所示：

小程序的代碼結(jié)構(gòu)圖

按照代碼后綴，小程序主要分為四類文件：

1 js 該文件主要是描述頁面的交互邏輯，里面包含的主要是一些函數(shù)，如監(jiān)聽處理頁面的函數(shù)等，還有負(fù)責(zé)和其他頁面進(jìn)行交互。
2 wxml 這個(gè)文件主要是描述頁面的構(gòu)成?；旧暇褪莤ml的語法。
3 json 這個(gè)文件主要定義一些經(jīng)常修改的文本或者選項(xiàng)配置等
4 wxss 類似于css文件，定義了頁面的顏色大小格式等內(nèi)容

總體上，微信小程序相當(dāng)于簡單的網(wǎng)頁開發(fā)，非常適合我們這種入門者接觸和體驗(yàn)前端開發(fā)的魅力?？爝f查詢是一個(gè)非常簡單的功能，一個(gè)單頁面就能搞定，接下來我細(xì)細(xì)的總結(jié)一下快遞查詢開發(fā)的關(guān)鍵要點(diǎn)。

1. 第一步，定義主頁面標(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="請(qǐng)輸入快遞號(hào)"/>

然后在index.wxss中加入：

input{
  border: 1px solid red;
  width: 90%;
  margin: 10%;
  padding: 5px;
}

這樣就可以在頁面中加入一條這樣的條形框：

加入條形框

（2）添加查詢按鈕
查詢按鈕的組件如下所示，也加入到index.wxml中

  <button type="primary" bindtap="btnClick" > 查詢 </button>

bindtap表示綁定按鈕對(duì)應(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對(duì)象中,表示查詢的編號(hào)，expressionInfo是表示查詢之后的物流信息，也是定義在page.data中。這里有一個(gè)點(diǎn)需要注意

Q:為什么需要把this賦給thispage,不直接在下面用this.setData?
A:這是因?yàn)樯厦娴膖his指代的是page對(duì)象，而在函數(shù)getExpressInfo中如果使用this,this就表示app對(duì)象，因?yàn)檫@個(gè)函數(shù)的調(diào)用者是app對(duì)象,所以此處不能直接用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ò)請(qǐng)求。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ù)。

3. 到這里之前，主題的結(jié)構(gòu)已經(jīng)搭建差不多了，接下來主要是數(shù)據(jù)的輸入和結(jié)果的展示。
   (1) 從輸入框輸入物流編號(hào)。之前定義了page.data中的expressNo 我們需要設(shè)置從輸入框獲取這個(gè)變量的值。
   在剛才的輸入框組件中加入bindinput字段

  <input placeholder="請(qǐng)輸入快遞號(hào)" 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í)，會(huì)在回調(diào)函數(shù)中保存至expressionInfo變量中，我們即把該變量展示到index頁面中即可。同時(shí)，由于物流信息一般比較長，需要加入滾動(dòng)條，方便查閱。
在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í)，對(duì)微信小程序開發(fā)的框架和流程有了清晰的認(rèn)識(shí)，嘗試了一些簡單的組件，大大提升了興趣。下次更新，希望能做出一個(gè)更加復(fù)雜的東西出來。