微信小程序開發(fā)之快遞查詢功能的實(shí)現(xiàn)

更新時(shí)間：2017年01月09日 15:36:14 作者：lanyanjing

這篇文章主要介紹了微信小程序開發(fā)之快遞查詢功能的實(shí)現(xiàn)的相關(guān)資料,這里實(shí)現(xiàn)微信小程序查詢快遞的功能，需要的朋友可以參考下

微信小程序快遞查詢功能：

產(chǎn)品需求，

準(zhǔn)備api,

代碼編寫。

第一步：產(chǎn)品需求，我們需要實(shí)現(xiàn)如下圖的一個(gè)功能，在文本框輸入快遞單號(hào)，點(diǎn)擊查詢，下面出來我們需要的快遞信息

第二步：準(zhǔn)備

我們先找一個(gè)快遞的api接口，通過http://apistore.baidu.com/我們可以看到很多的api，我們找一個(gè)快遞查詢的

我們可以看到有接口地址，和一些參數(shù)。做好這個(gè)準(zhǔn)備接下來就開始編碼工作了…………

第三步:編碼工作

我們新建一個(gè)Express的文件，然后默認(rèn)文件準(zhǔn)備齊全

我們現(xiàn)在app.js中把我們的頭部導(dǎo)航改為一個(gè)綠色的背景色

在index.json中設(shè)置導(dǎo)航的名稱：“快遞查詢”

在index.wxml中，把默認(rèn)的代碼刪掉，放上我們的一個(gè)文本輸入框，一個(gè)查詢按鈕

<!--index.wxml-->
<view class="container">
  <input placeholder="請(qǐng)輸入快遞單號(hào)" bindinput="input" />
  <button type="primary" bindtap="btnClick"> 查詢 </button> 
</view>

接下來我們需要給文本框和按鈕加上一個(gè)樣式：在index.wxss中設(shè)置

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}

到現(xiàn)在為止我們的布局就做好了如圖：

接下來我們需要去調(diào)用我們事先準(zhǔn)備好的api快遞查詢接口了，我們首先需要在app.js中設(shè)置一個(gè)網(wǎng)絡(luò)請(qǐng)求的方法getExpressInfo里面設(shè)置兩個(gè)參數(shù)一個(gè)快遞參數(shù)，一個(gè)返回的方法。

利用文檔給我們提供的wx.request發(fā)起網(wǎng)絡(luò)請(qǐng)求url:地址路徑，里面有幾個(gè)參數(shù)muti=0返回多行完整的數(shù)據(jù)，order=desc按時(shí)間由新到舊排列，com快遞的名稱（快遞公司的名稱），nu快遞單號(hào)，header:請(qǐng)求的參數(shù)apikey的值為我們自己百度賬號(hào)的apikey(可以登錄自己的百度賬號(hào)，在個(gè)人中心中查看)

//設(shè)置一個(gè)發(fā)起網(wǎng)絡(luò)請(qǐng)求的方法
 getExpressInfo:function(nu,cb){
  wx.request({
   url: 'http://apis.baidu.com/kuaidicom/express_api/express_api?muti=0&order=desc&com=zhongtong&nu='+nu, 
   data: {
    x: '' ,
    y: ''
   },
   header: {
     'apikey': '247d486b40d7c8da473a9a794f900508'
   },
   success: function(res) {
    //console.log(res.data)
    cb(res.data);
   }
  })
 },
 globalData:{
  userInfo:null
 }

有了這樣的請(qǐng)求方法，接下來就需要給我們的查詢按鈕添加一個(gè)點(diǎn)擊的事件：bindtap="btnClick"，在index.js中添加查詢事件，通過app來調(diào)用實(shí)現(xiàn)寫好的請(qǐng)求方法getExpressInfo,在此之前我們需要先獲取一下文本框內(nèi)輸入的快遞單號(hào)，

給文本框綁定一個(gè)bindinput事件，

獲取輸入的快遞單號(hào)。在data:對(duì)象中定義兩個(gè)變量一個(gè)輸入框的值，一個(gè)要顯示的快遞信息。

//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
 data: {
  motto: 'Hello World',
  userInfo: {}, 
  einputinfo:null,//輸入框值
  expressInfo:null //快遞信息
 },
 //事件處理函數(shù)
 bindViewTap: function() {
  wx.navigateTo({
   url: '../todos/todos'
  })
 },
 onLoad: function () {
  console.log('onLoad')
  var that = this
  //調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
  app.getUserInfo(function(userInfo){
   //更新數(shù)據(jù)
   that.setData({
    userInfo:userInfo
   })
  })
 },
 //快遞輸入框事件
 input:function(e){
   this.setData({einputinfo:e.detail.value});
 },
 //查詢事件
 btnClick:function(){ 
  var thisexpress=this; 
  app.getExpressInfo(this.data.einputinfo,function(data){
    console.log(data);
    thisexpress.setData({expressInfo:data})
  })
 }
})

最后我們需要在index.wxml中把查詢出來的快遞信息顯示出來了,利用vx:for來循環(huán)數(shù)組。

<!--index.wxml-->
<view class="container">
  <input placeholder="請(qǐng)輸入快遞單號(hào)" bindinput="input" />
  <button type="primary" bindtap="btnClick"> 查詢 </button> 
</view>
<view class="expressinfo" wx:for="{{expressInfo.data}}">
  <ul>
   <li>{{item.context}}</li>
   <li>{{item.time}}</li> 
  </ul> 
</view>

最后一步設(shè)置下顯示出來的快遞信息的樣式：

/**index.wxss**/
 input{border:1px solid #1AAD19; width:90%; height:20px; font-size:12px; padding:5px 10px;}
 button{margin-top:20px;}
 .expressinfo{font-size:12px; line-height: 18px;padding:10px; text-align:left;} 
 .expressinfo li{display:block}

到這里我們的整個(gè)查詢就完成了……