摘要：最近雙十一過后，每天不是拿快遞就是去拿快遞的路上，翻開手機應用里的菜鳥裹裹查看快遞是很方便的，當我在微信端搜索菜鳥裹裹小程序時，卻沒有發現，于是便想自己動手仿版寫一個菜鳥裹裹的小程序，對其中的快遞查詢物流跟蹤很有興趣。

項目效果預覽

項目目錄結構

使用的開發工具 VScode和微信開發者工具

平臺提供：微信公眾品臺|小程序，在該品臺注冊賬號獲取AppId，使用AppId登入微信開發者工具，開啟項目

使用的API文檔: 微信小程序開發文檔,

微信小程序開發教程手冊文檔_w3c詳細介紹了微信各種工具的使用
Vant Weapp,提供了好多實用性的組件，我項目中搜索框使用了該組件庫的搜索組件
weUI微信團隊的基礎樣式庫，

使用的接口： 快遞鳥 接口 提供快遞單號和公司編碼可以查詢快遞的物流信息。

騰訊地圖開放品臺提供了關于使用地圖，地圖顯示，標注/多邊形繪制，路線顯示這些功能的實現。

## 頁面解構

如下圖，總共四個頁面

第一個主要頁面

  
   
  
  
    
      
        
      
      掃一掃
    
    
      
        
      
      快遞員上門
    
    
      
        
      
      精靈書屋
    
    
      
        
      
      領裹醬
    
  
  
    
      
    
  
  
    進行中
    
  
  


    
      

      {{item.text1}}
      
      
        {{item.text2}}
        {{item.text3}}
        {{item.text4}}
      
      
    
//最后一個廣告項
    

     有一個神秘包裹想你飛來
      
      
        已放入裹裹自提柜
        菜鳥裹裹
        神秘包裹已送至裹裹自提柜
      
    
    
    
     

查看全部
  
  

第二個頁面寫起來很簡單

  
    
      取消
    
    
      
      {{company}}
    
    
      
    
    
      保存到包裹列表
      
    
    
      查詢
    
  
  
    
      {{historyOrder}}
      
        {{item.code}}
        {{item.company}}
        
      
      {{delectHistory}}
      
    
  

第三個主要頁面

  
    
    
  
  
    
      
        {{item}}
      
    
    
      {{item.number}}
      
        
        {{item.text}}
        
          
        
      
    
  

第四個主要頁面

  
    
      
        
        
        已簽收
      
      
        
          
          物流客服
        
        
          
          物流投訴
        
        
          
        
      
    
  
  
    
      
      
        評價驛站 東華理工大學南區七棟菜鳥驛站
        
          
          
            
            
            
            
            
          
        
        
          {{company}}  {{code}}
          
        
      
      
        
          
          
            
          
          
            
            【收貨地址】江西省南昌市青山湖區 蛟橋鎮 東華理工大學廣蘭大道廣蘭校區
          
        
        
          {{time1}}
          
            
          
          
            已簽收
            您已在東華理工大學南區七棟菜鳥驛站完成取件，感謝使用菜鳥驛站，期待再次為您服務。
            我要退貨
            聯系賣家
            查看訂單
          
        
        
          {{time2}}
          
            
          
          
            待取件
            您已在東華理工大學南區七棟菜鳥驛站完成取件，感謝使用菜鳥驛站，期待再次為您服務。
          
        
        
          {{time3}}
          
            
          
          
            派送中
            {{text3}}
          
        
        
          {{time3}}
          
            
          
          
            運輸中
            {{text3}}
          
        
        
          {{item.AcceptTime}}
          
            
          
          
            
            {{item.AcceptStation}}
          
        
        
          {{time3}}
          
            
          
          
            已攬件
            
          
        
      
    
  

這個頁面的功能是實現查詢已簽收的快遞的物流狀態，而且簽收地固定了一下還有其他狀態比如運輸中，未發貨，快遞單號過期。為了把這個效果展現出來。這里沒有寫其他的頁面。
第一個數據detail-data 收 需要獲取用戶的收貨地址
第二個數據 detail-data 已簽收可以送請求的數據中獲取使用

easy-mock+小程序云開發數據庫使用

easy-mock可以實現高效偽造數據 easy-mock
在上面注冊后可以創建一個接口，編輯接口可以添加數據， 可以獲取接口的url，然后通過小程序的wx.request(url)獲取在easy-mock里的數據，本例使用easy-mock構建了首頁中expressLists的數據

{
"data": {
 expressList: [{
     image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/yy.jpg?sign=b28732bd498113a8c88cfa634121a363&t=1542776282",
     text1: "【送歷年真題】,朱偉老師推薦！新東方201...",
     text2: "簽收時間：10-29 21:01",
     text3: "百世快遞：71220099817129",
     text4: "北京北京市--江西南昌",
     contentId: "001",
   },
   {
     image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/lq.jpg?sign=82cc4a8eca681accf06dd4737f2422cc&t=1542776323",
     text1: "淘寶|運動護具籃球護指套艾弗森庫...",
     text2: "簽收時間：11-10 12:20",
     text3: "圓通快遞：802511355217367857",
     text4: "廣州廣州市--江西南昌",
     contentId: "002",
   },
   {
     image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/css.jpg?sign=324ebd7e4e3203b2071cb7e0f24a0d2e&t=1542776355",
     text1: "天貓|CSS世界web前端開發CSS3+...",
     text2: "簽收時間：10-17 17:11",
     text3: "圓通快遞：802022497906214489",
     text4: "河南省新鄉市--江西南昌",
     contentId: "003",
   },
   {
     image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/js.jpg?sign=d07ef9708724b5d20595923a16964fa8&t=1542776376",
     text1: "淘寶|二手包郵 你不知道的javaScri...",
     text2: "簽收時間：09-21 17:13",
     text3: "韻達快遞：3956570250807",
     text4: "河南洛陽--江西南昌",
     contentId: "004",
   }
 ]
}
}

小程序云開發數據庫使用

companyes：選擇快遞公司頁面對應的快遞公司圖片標志，快遞公司名字，和喜歡收藏icon圖片

expresses：每一個快遞單號對應的信息，這里通過接口獲取數據后添加到數據庫中，同時把快遞單號作為每一個記錄的一個字段，后面可以通過單號直接查詢，重復單號不添加，無效單號也不添加進云數據庫。

getExpresses：這是代取件里面的數據集合，

云數據庫存儲
這里把項目的圖片資源存儲在了小程序的云數據庫上，新建文件將名字為images點擊上傳可以把本地圖片上傳到存儲中

利用云數據庫提供的圖片地址可以實現本地圖片url書寫。

使用小程序云開發品臺里的數據庫，存儲管理，既不用占用本地資源，也方便請求和修改。

云開發為開發者提供完整的云端支持，不用操心后端的管理，同時也不需要很麻去構建服務器，直接使用小程序提供的云函數的API文檔和對小程序數據庫操作的相關API即可實現數據的增刪改操作，比mysql數據庫操作更簡單方便，這樣就可以可實現快速上線和迭代，同時這一能力，同開發者已經使用的云服務相互兼容，并不互斥。

整個查詢快遞的流程預覽

快遞鳥接口

首先注冊一個快遞鳥賬號，選擇訂購物流查詢免費版應用，期間需要上傳身份證，還需要填寫技術人員信息，通通寫自己就好了，申請成功后，可以得到自己的API key和用戶ID

查詢快遞的js代碼
這里需要先選擇快遞公司，在selectCompany頁面選擇，選擇完成返回到查詢訂單號sarch頁面

*
選擇后在selectCompany頁面的js代碼里保存選擇的快遞公司代碼。即companyname在搜索框中填入要搜索的快遞單號信息，用exp保存
即可獲得使用接口的兩個參數。這樣就得到了使用接口的兩個參數，詳情看快遞鳥即時查詢api接口的使用

下面是具體的請求參數

使用工具包util里的MD5函數進行加密運算
(util.md5(RequestData + "eb016c6c-ab32-47b2-be8c-8fddf3f59c1e"))

需要把請求的數據進行encodeURI()編碼，該函數可把字符串作為 URl 進行編碼。

使用util工具包中的Base64編碼算法對請求數據編碼成base64格式



Base64是當今比較流行的編碼方法，因為它編起來速度快而且簡單

好處: base64特別適合在http，協議下快速傳輸數據。
最后把數據內容簽名進行encodeURI編碼，請求數據準備好了

請求的地址，數據，請求頭的格式都在下面代碼里給出，這里不需要多說

var util = require("../../utils/util.js")
const db = wx.cloud.database()
const expresses = db.collection("expresses")
const app = getApp()
getExpressInfo:function(nu,cb){
    //查物流
    //快遞公司和，快遞單號
   let companyname=wx.getStorageSync("codename")||"YTO";
    let company = wx.getStorageSync("company") || "圓通快遞";
   console.log(companyname);
     let exp=nu.currentTarget.dataset.name
    var logistics = [companyname,exp];//保存在一個數組中
    this.setData({
      ShipperCode:logistics[0],
      LogisticCode:logistics[1]

    })
    //數據內容
    var RequestData = "{"OrderCode":"","ShipperCode":"" + logistics[0] + "","LogisticCode":"" + logistics[1] + ""}"
    //utf-8編碼的數據內容
    // OrderCode    String    訂單編號    O
    // ShipperCode    String    快遞公司編碼    R
    // LogisticCode    String    物流單號
    console.log(RequestData)
    var RequestDatautf = encodeURI(RequestData)
    console.log("RequestDatautf:" + RequestDatautf) //簽名
    console.log(RequestData + "eb016c6c-ab32-47b2-be8c-8fddf3f59c1e")
    var DataSign = encodeURI(util.Base64((util.md5(RequestData + "eb016c6c-ab32-47b2-be8c-8fddf3f59c1e"))))
    console.log("DataSign:" + DataSign)
    if (logistics != null&&exp>999) {
      wx.request({
        url: "https://api.kdniao.com/Ebusiness/EbusinessOrderHandle.aspx",
        data: {
          //數據內容(進行過url編碼)
          "RequestData": RequestDatautf,
          //電商ID
          "EBusinessID": "1399017",
          //請求指令類型：1002
          "RequestType": "1002",
          //數據內容簽名把（請求內容（未編碼）+ApiKey）進行MD5加密，然后Base64編碼，最后進行URL（utf-8）編碼
          "DataSign": DataSign,
          //請求、返回數據類型： 2-json；
          "DataType": "2",
        },
        header: {
          "content-type": "application/json"
        },
        success:(res)=> {
          console.log(res)
          let list = wx.getStorageSync("historys")||[];
          var item = {
            company: company,
            code: logistics[1]
          }
          if (list==null||list.length=== 0||list.every(res => {  return res.code!==logistics[1] })) {
           list.push(item);
          }
          wx.setStorage({
            key: "historys",
            data: list,
          })
          this.setData({
            historyList: list
          })
          this.setData({
            delectHistory: "清楚歷史記錄",
            historyOrder: "歷史記錄"
          })
          // this.setData({ mydata: res.data})
          expresses.where({
            code:exp
          }).count().then(res3=>{
            if (res3.total == 0){
              expresses.add({
                data: {
                  message: res.data,
                  code: exp
                }
              })
            } else {
              // wx.showToast({
              //   // title: "不能重復加"
              // })
            }
          })
         .then(res2 => {
           if(res.data.State>1) {
             wx.navigateTo({
               url: "../Todetail/index",
             })
           }
           wx.setStorage({
             key: "code",
             data: exp,
           }),
             wx.setStorage({
               key: "nowcompany",
               data: logistics[0],
             })
            
          })
        }
      })
    }
  },

數據請求成功以后打印出res.data

成功后做以下操作
全是小程序MVVM的思想的體現

M -Model數據 模型

 V -view 頁面 視圖

 VM -ViewModel數據綁定到界面上 視圖模型層->模板{{}}

顯示在歷史記錄中.為了防止第一次從storage中取不到鍵為historys的歷史記錄，這樣子寫比較好let list = wx.getStorageSync("historys")||[];,如果數組list為空或者已經不存在正在查詢的快遞單號，則添加 ，反之則不添加,存儲this.setData({historyList: list})頁面重新渲染顯示

把當前快遞單號對應的快遞信息存儲到云數據庫上

跳轉到物流詳情頁面，顯示。

騰訊地圖接口使用

最終效果見下圖

Todetil頁面

但是在手機端確總有個bug，樣式里寫了z-index表示元素的堆疊順序，在手機端只出現地圖，不過這只是一個效果。騰訊地圖的接口需要在騰訊地圖開放品臺注冊申請，使用API獲取當前地址經緯度信息，利用逆地址查詢獲取當前 位置，這里只是獲取地圖作為背景圖片。可以看下我的源碼在github上面

這個頁面的邏輯就是獲取快遞單號和公司代碼，這里有四種情況兩種界面效果，未查詢到顯示一種界面效果，這個很簡單效果都一樣，從首頁查詢到，搜索查詢到，歷史記錄點擊查詢到顯示另外一個界面狀態，這種屬于殊途同歸，都是在onLoad函數中獲取.

 onLoad(options) {
    let company = wx.getStorageSync("company");
    this.setData({
      company
    })
    let codeExpress=options.contentId
    // console.log(codeExpress);
    this.getLocation()
    if(!codeExpress){
      let code = wx.getStorageSync("code")
      console.log(code);
      this.setData({
        code,
      })
    }else{
      var  Navcode = codeExpress.substr(5);
      let company=codeExpress.substr(0,4);
      console.log(company);
      this.setData({
        code:Navcode,
        company:company
      })
      console.log(Navcode);
    }
    let code=this.data.code;
   
    expresses.where({
      code:code
    }).get().then(res=>{
      this.setData({
      tracesList:res.data,
      Traces:res.data[0].message.Traces
      })
      console.log(res.data);
      let Traces=this.data.Traces;
       this.showdetail();
       this.packageData(Traces);
    })
  
  },

這里使用來對話框組件， 點擊清楚歷史記錄，觸發對話框。

點擊對話框確定，全部清楚歷史記錄

點擊對話框取消，隱藏對話框，不清楚歷史記錄

組件Components使用首先在index.json中引入

{
     "wxc-dialog": "/components/dialog/dialog"
}

對應search.wxml中使用的代碼

在search.wxml中引入components中的dialog組件 dialog

{{delectHistory}}
     
 

組建的js是這樣寫的

onGotUserInfo(e) {
      this.triggerEvent("confirm", e)
      //向外傳遞
    }

組件中的確定按鈕調用組件自身的onGotUserInfo方法

確定

點擊確定，觸發search.js頁面的bindconfirm="delectHistory"事件，清除歷史記錄并回顯頁面

頁面可以向組件傳遞props數據，讓組件在頁面顯示

組件可以負責與頁面調用部分的通信。

在util包中封裝 ，使用promise 返回promise對象，可以then操作
通用性的對wx.request封裝

const $get = (url, data = {}) => {
  //發送請求
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      data: data,
      method: "GET", // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 設置請求的 header
      success: function (res) {
        resolve(res)
      },
      fail: function () {
        reject()
      },
      complete: function () {
      }
    })
  })
}
module.exports = {
  $get,
}

首頁中請求easy-mock中的數據就是使用了util類中對request的封裝，可以實現多次調用，重復調用，實現了代碼的復用性。 getList()函數用于獲取數據

getList(type) {
    this.setData({
    isLoading: true,
      hasMore: true
    })
    type === "down" ? this.setData({ page: 0 }) : null;
    util.$get("https://www.easy-mock.com/mock/5bca919de6742c1bf8220b50/example/express#!method=get", ).then(res => {
      if (res.statusCode == 200) {
        this.processData(type, res.data.data.expressList)
      }
    }).catch(e => {
      this.setData({
        isLoading: true,
        hasMore: false
      })
      wx.stopPullDownRefresh()
      wx.showToast({ title: `網絡錯誤!`, duration: 1000, icon: "none" })
    })
 
  },

當頁面請求數據到兩頁后，出現查看全部點擊跳轉到另外一個頁面

查看全部這個text的 出現

是onReachBottom()這個函數在起作用，每次到達頁面底部，檢查此時page的值，小于3，上拉刷新，負責停止刷新，把樣式改為bottomshow 在模型層就是把bottomshow的值改為true

查看全部

onReachBottom() {
    if (!this.data.isLoading) { // 防止數據還沒回來再次觸發加載
      return;
    }
    if(this.data.page<=3){
      this.getList("up")

    }else{
      wx.stopPullDownRefresh()
      this.setData({
        bottomshow:true

      })
    }

樣式hide對用代碼

    .hide{
    display: none;
   }

效果預覽

selectCompany.wxml,這里外層循環了companyList列表，先輸出右邊的側邊欄A-Z，再輸出列表項的大寫字母A,B,C...，和該項的內層循環，內層循環了每一個大寫字母對應了以該大寫字母開頭的公司列表，scroll-view 每一項動態設置id="{{item.number}}" 設置scroll-into-view="{{toView}}"

當點擊側邊欄的A，B，C，D...Z時，觸發bindtap="switchTab"設置相對應的toView。

這里有比較奇怪的一點，就是I字母沒有以該字母出現的公司列表，原版菜鳥裹裹點擊后回到A，我想用戶要么不會去點擊 ，要么點擊鄰近的不小心點錯了。可以點擊I時 ，scroll-into-view到附近的去 給switchTab新增一個判斷條件 搞定。

switchTab(e){
 if (e.currentTarget.dataset.id=="I"){
      this.setData({
        curIndex: e.currentTarget.dataset.index,
        toView: "F",
      })

    }
    console.log(e);
    this.setData({
      curIndex:e.currentTarget.dataset.index,
      toView: e.currentTarget.dataset.id,
    })
  },

整個scroll-view代碼

 
    
      
        {{item}}
      
    
    
      {{item.number}}
      
        
        {{item.text}}
        
          
        
      
    
  

回顯到上個頁面 選擇某一行時點擊觸發 bindtap="backwithData"

wx.navigatBack()改變上個頁面中的數據，存儲公司標志，公司文本，公司代碼Storage，上個頁面獲取數據顯示。代碼如下

var pages = getCurrentPages();
    var Page = pages[pages.length - 1];//當前頁
    var prevPage = pages[pages.length - 2];  //上一個頁面
    var info = prevPage.data //取上頁data里的數據也可以修改
    prevPage.setData({ src,company })//設置數據
    wx.navigateBack({
      
    })

云函數使用，
這里使用了云函數，查詢數據庫集合的符合條件的列表項并刪除，云函數確實較高的權限，直接對云數據庫進行修改，云控制臺的權限同管理端，擁有所有權限，
但是數云函數有點不太好的就是每次修改都要上傳部署。后面項目更新會繼續使用云函數解決問題。

這里只寫了主要的常用的快遞物流查詢，如下圖，
對于后面獲取的數據的處理，因為獲取的是倒敘的數據，我先用packageData()處理一下，把頁面需要的單個數據或者列表整理出來，存儲顯示。

總結一下就是用快遞公司名字查找對應的編碼，快遞單號從用戶輸入或首頁點擊事件獲得，然后請求查詢，最后一個頁面是顯示的結果，還有路徑標注任務沒有完成，由于項目工程較大，只做了主要的一部分吧，關于組件封裝，方法調用還有，效果展示應該會有更多激動人心的效果，項目就玩到這吧，再慢慢學習，慢慢補充。

感謝各位讀者的閱讀，文章中如有錯誤或不妥之處，請不吝賜教。

你的贊與肯定將會成為我代碼之路上的一縷陽光，使我更加勇敢堅定的往前走。

項目地址奉上