寫一個菜鳥裹裹小程序吧

evin2016 發(fā)布于2019-08-23 13:48 / 1245人閱讀

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

新手寫小程序并不簡單，這是我的第一次嘗試學(xué)習(xí)到了很多。最近雙十一過后，每天不是拿快遞就是去拿快遞的路上，翻開手機應(yīng)用里的菜鳥裹裹查看快遞是很方便的，當(dāng)我在微信端搜索菜鳥裹裹小程序時，卻沒有發(fā)現(xiàn)，于是便想自己動手仿app版寫一個菜鳥裹裹的小程序，對其中的快遞查詢物流跟蹤很有興趣。 項目預(yù)覽圖

項目效果預(yù)覽

項目目錄結(jié)構(gòu)

使用的開發(fā)工具 VScode和微信開發(fā)者工具

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

使用的API文檔: 微信小程序開發(fā)文檔,

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

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

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

## 頁面解構(gòu)

如下圖，總共四個頁面

第一個主要頁面



  
   
  
  
    
      
        
      
      掃一掃
    
    
      
        
      
      快遞員上門
    
    
      
        
      
      精靈書屋
    
    
      
        
      
      領(lǐng)裹醬
    
  
  
    
      
    
  
  
    進行中
    
  
  


    
      

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

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

查看全部

第二個頁面寫起來很簡單


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

第三個主要頁面


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

第四個主要頁面


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

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

數(shù)據(jù)來源

easy-mock+小程序云開發(fā)數(shù)據(jù)庫使用

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

{
"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前端開發(fā)CSS3+...",
     text2: "簽收時間：10-17 17:11",
     text3: "圓通快遞：802022497906214489",
     text4: "河南省新鄉(xiāng)市--江西南昌",
     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",
   }
 ]
}
}

小程序云開發(fā)數(shù)據(jù)庫使用

companyes：選擇快遞公司頁面對應(yīng)的快遞公司圖片標(biāo)志，快遞公司名字，和喜歡收藏icon圖片

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

getExpresses：這是代取件里面的數(shù)據(jù)集合，

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

利用云數(shù)據(jù)庫提供的圖片地址可以實現(xiàn)本地圖片url書寫。

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

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

接口使用

整個查詢快遞的流程預(yù)覽

快遞鳥接口

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

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

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

下面是具體的請求參數(shù)

需要對請求的數(shù)據(jù)中的Datasign部分做以下處理


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

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

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



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

好處: base64特別適合在http，協(xié)議下快速傳輸數(shù)據(jù)。
最后把數(shù)據(jù)內(nèi)容簽名進行encodeURI編碼，請求數(shù)據(jù)準(zhǔn)備好了

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

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];//保存在一個數(shù)組中
    this.setData({
      ShipperCode:logistics[0],
      LogisticCode:logistics[1]

    })
    //數(shù)據(jù)內(nèi)容
    var RequestData = "{"OrderCode":"","ShipperCode":"" + logistics[0] + "","LogisticCode":"" + logistics[1] + ""}"
    //utf-8編碼的數(shù)據(jù)內(nèi)容
    // 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: {
          //數(shù)據(jù)內(nèi)容(進行過url編碼)
          "RequestData": RequestDatautf,
          //電商ID
          "EBusinessID": "1399017",
          //請求指令類型：1002
          "RequestType": "1002",
          //數(shù)據(jù)內(nèi)容簽名把（請求內(nèi)容（未編碼）+ApiKey）進行MD5加密，然后Base64編碼，最后進行URL（utf-8）編碼
          "DataSign": DataSign,
          //請求、返回數(shù)據(jù)類型： 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: "不能重復(fù)加"
              // })
            }
          })
         .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],
             })
            
          })
        }
      })
    }
  },

數(shù)據(jù)請求成功以后打印出res.data

成功后做以下操作
全是小程序MVVM的思想的體現(xiàn)

M -Model數(shù)據(jù) 模型

 V -view 頁面 視圖

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

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

把當(dāng)前快遞單號對應(yīng)的快遞信息存儲到云數(shù)據(jù)庫上

跳轉(zhuǎn)到物流詳情頁面，顯示。

騰訊地圖接口使用

最終效果見下圖

Todetil頁面

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

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

 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);
    })
  
  },

組件使用

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

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

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

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

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

對應(yīng)search.wxml中使用的代碼

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

{{delectHistory}}

組建的js是這樣寫的

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

組件中的確定按鈕調(diào)用組件自身的onGotUserInfo方法

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

頁面可以向組件傳遞props數(shù)據(jù)，讓組件在頁面顯示

組件可以負責(zé)與頁面調(diào)用部分的通信。

請求封裝的優(yōu)化

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

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

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

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: `網(wǎng)絡(luò)錯誤!`, duration: 1000, icon: "none" })
    })
 
  },

當(dāng)頁面請求數(shù)據(jù)到兩頁后，出現(xiàn)查看全部點擊跳轉(zhuǎn)到另外一個頁面

查看全部這個text的出現(xiàn)

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

查看全部

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

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

      })
    }

樣式hide對用代碼

    .hide{
    display: none;
   }

toView巧妙使用

效果預(yù)覽

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

當(dāng)點擊側(cè)邊欄的A，B，C，D...Z時，觸發(fā)bindtap="switchTab"設(shè)置相對應(yīng)的toView。

這里有比較奇怪的一點，就是I字母沒有以該字母出現(xiàn)的公司列表，原版菜鳥裹裹點擊后回到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}}

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

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

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

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

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

結(jié)語

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

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

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

項目地址奉上