「微信小程序」快遞查詢

前言

看了很久的視頻，加上自己的摸索，想寫一篇易懂的博客供大家參考，儘量把每一步都寫到最詳細。

分析

1.準備工作：
（1）需要準備一個查詢快遞的API
（2）一個真實的快遞運單號
2.編寫界面
（1）輸入框（需綁定事件）
（2）按鈕（需綁定事件）
（3）修改樣式
3.邏輯實現
（1）編寫getExpressInfo方法調用快遞查詢接口
（2）在data中設置兩個變量（ expressNu expressInfo）
（3）編寫輸入框的事件
（4）編寫按鈕的事件
4.在模擬器輸出信息
（1）用wx:for遍歷數組輸出

一.準備工作

我是用的接口是 API Shop

1. 註冊賬號，等審覈結束後就會生成apiKey。
   
   這個是之後接口的使url（從這找）

2. 準備一個真實的運單號

二.編寫界面

1. 輸入框（需綁定事件）
   bindinput:用輸入框輸入中文的過程中就觸發了事件。

<!--express.wxml-->
<input placeholder="請輸入運單號" bindinput="input"></input>

2. 按鈕（需綁定事件）
   bindtap:綁定點擊,點擊的時候會觸發。

<!--express.wxml-->
<button bindtap="btnClick">查詢</button>

3. 修改樣式

/*按自己的需求設定*/
input{
  border: 2px solid LightPink;
  height: 60rpx;
  width: 80%;
  margin: 10%;
  padding: 5rpx;
}
button{
  background-color: Snow;
  color:Plum;
}

三.邏輯實現

1. 編寫getExpressInfo方法調用快遞查詢接口

  getExpressInfo:function(expressNumber,cb){
    wx.request({
      url: 'https://api.apishop.net/common/express/getExpressInfo?apiKey=nWhZMdhca51263978dc3c9ac81cf9cf83bxxxxxxxxx&expressNumber='+expressNumber, 
      data: {
        x: '',
        y: ''
      },
      header: {
        'apiKey': 'nWhZMdhca51263978dc3c9ac81cf9cf83bxxxxxxxxx' 
      },
      success (res) {
        cb(res.data) //cb是指callback( )回調函數
      }
    })
  },

這裏面的 請求轉發 是在微信官方文檔中可搜索到

2. 在data中設置兩個變量（ expressNu expressInfo）
   全都設置爲null

/*express.js*/
  data: {
      motoo:'Hello World',
      userInfo: {},
      expressNu:null,   //用來保存輸入的運單號
      expressInfo:null  //用來保存查詢到的快遞信息
  },

3. 編寫輸入框的事件

input:function(e){
  this.setData({expressNu:e.detail.value})
},

如何知道 e.detail.value？

4. 編寫按鈕的事件
   （在這步開始是要在express.js最開頭寫上）

const app = getApp()

/*express.js*/
  btnClick: function() {  
    var thispage = this;
    app.getExpressInfo(this.data.expressNu,function(data){
      console.log(data)
      thispage.setData({expressInfo:data})
 })
},

調用app.js中的 getExpressInfo 方法，把 this.data.expressNu （這是鍵盤輸入的訂單號） function(data) 傳入到這個方法中。

四.在模擬器輸出信息

1. 用wx:for遍歷數組輸出

    <view>{{expressInfo.result.expName}}</view>
    <view wx:for="{{expressInfo.result.list}}">
      {{item.status}}【{{item.time}}】
    </view>

五.展示

若大家還有疑問的話，希望能收到你的回覆！祝大家成爲優秀的學習冠軍！！