寫一個菜鳥裹裹小程式吧

Ru_minnnn發表於2018-11-30

新手寫小程式並不簡單，這是我的第一次嘗試學習到了很多。最近雙十一過後，每天不是拿快遞就是去拿快遞的路上，翻開手機應用裡的菜鳥裹裹檢視快遞是很方便的，當我在微信端搜尋菜鳥裹裹小程式時，卻沒有發現，於是便想自己動手仿app版寫一個菜鳥裹裹的小程式，對其中的快遞查詢物流跟蹤很有興趣。

專案預覽圖

專案效果預覽

使用的開發工具 VScode和微信開發者工具
平臺提供：微信公眾品臺|小程式，在該品臺註冊賬號獲取AppId，使用AppId登入微信開發者工具，開啟專案
使用的API文件: 微信小程式開發文件,微信小程式開發教程手冊文件_w3c詳細介紹了微信各種工具的使用Vant Weapp,提供了好多實用性的元件，我專案中搜尋框使用了該元件庫的搜尋元件weUI微信團隊的基礎樣式庫，
使用的介面：快遞鳥介面提供快遞單號和公司編碼可以查詢快遞的物流資訊。騰訊地圖開放品臺提供了關於使用地圖，地圖顯示，標註/多邊形繪製，路線顯示這些功能的實現。

頁面解構

如下圖，總共四個頁面複製程式碼

第一個主要頁面

<
view class="container">
  <
van-search class="van-search" value="{{ 
value 
  }
  }" placeholder="請輸入拼音縮寫或中文" background="#ffffff" bindtap="searchAnother" />
     <
image class="message" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/5.jpg?sign=62596b8fb882fafa4735a7bb02ec48cf&
t=1542775874">
<
/image>
  <
view class="weui-tabbar">
    <
icon href="#" class="weui-tabbar__item weui-tabbar__item_on">
      <
icon>
        <
image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/saoma.jpg?sign=22ecf7d2269084181e8ace24c1319b06&
t=1542775996" alt="" class="weui-tabbar__icon">
<
/image>
      <
/icon>
      <
icon class="weui-tabbar__label" bindtap='scanCode'>
掃一掃<
/icon>
    <
/icon>
    <
icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <
icon>
        <
image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/2.jpg?sign=2c956d50da50cdf22b74812d1cc51b12&
t=1542776039" alt="" class="weui-tabbar__icon">
<
/image>
      <
/icon>
      <
icon class="weui-tabbar__label" >
快遞員上門<
/icon>
    <
/icon>
    <
icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <
icon>
        <
image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/3.jpg?sign=a9cbe061ac103a8e380f73f8c56cec2c&
t=1542776057" alt="" class="weui-tabbar__icon">
<
/image>
      <
/icon>
      <
icon class="weui-tabbar__label">
精靈書屋<
/icon>
    <
/icon>
    <
icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
      <
icon>
        <
image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/4.jpg?sign=da2382ecf07e72710947db853406d600&
t=1542776076" alt="" class="weui-tabbar__icon">
<
/image>
      <
/icon>
      <
icon class="weui-tabbar__label">
領裹醬<
/icon>
    <
/icon>
  <
/view>
  <
swiper class="ad" indicator-dots='true' indicator-active-color='blue' autoplay='true'>
    <
swiper-item wx:for="{{imageList
  }
  }" wx:key="index" wx:for-item="item">
      <
image src="{{item.pic
  }
  }" mode="widthFix" bind:tap="tapImage" class='ad-img'>
<
/image>
    <
/swiper-item>
  <
/swiper>
  <
view class='action'>
    <
text class='action-text'>
進行中<
/text>
    <
image class='action-img' mode='aspectFill' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/ad2.jpg?sign=ae6b53f73ba106c5be937df83b016e07&
t=1542776132'>
<
/image>
  <
/view>
  <
loading hidden="{{isLoading
  }
  }">
<
/loading>
<
scroll-view class='scroll-view' scroll-y="true">
<
view class='package-item'  wx:for="{{expressLists
  }
  }" wx:key="{{item.contentId
  }
  }" wx:for-item="item" data-contentId='{{item.text3
  }
  }' bindtap='toDetail'>
         <
view class='item-wrapper'>
       <
text class='item-title'>
{{item.text1
  }
  }<
/text>
      <
image class='item-img' mode='aspectFill' src='{{item.image
  }
  }'>
<
/image>
      <
view class="item-block">
        <
text class='item-text1'>
{{item.text2
  }
  }<
/text>
        <
text class='item-text2'>
{{item.text3
  }
  }<
/text>
        <
text class='item-text3'>
{{item.text4
  }
  }<
/text>
      <
/view>
      <
/view>
    <
/view>
<
view class='package-item'>
//最後一個廣告項    <
view class='item-wrapper'>
     <
text class='item-title'>
有一個神祕包裹想你飛來<
/text>
      <
image class='item-img' mode='aspectFill' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/6.jpg?sign=e713b1367255f2bd83f8098aaac630d4&
t=1542776179'>
<
/image>
      <
view class="item-block">
        <
text class='item-text1'>
已放入裹裹自提櫃<
/text>
        <
text class='item-text2'>
菜鳥裹裹<
/text>
        <
text class='item-text3'>
神祕包裹已送至裹裹自提櫃<
/text>
      <
/view>
            <
/view>
     <
/view>
<
text class='{{bottomshow== true? "bottomshow":"hide"
  }
  }' bindtap='watchMore'>
檢視全部<
/text>
  <
/scroll-view>
  <
/view>
複製程式碼

第二個頁面寫起來很簡單

<
view class='largecontainer'>
  <
view class='container'>
    <
van-search class="search-top" value="{{value
  }
  }" placeholder="請輸入運單號" use-action-slot bind:change="onChange" bind:search="onSearch">
      <
view slot="action" bindtap="cancel">
取消<
/view>
    <
/van-search>
    <
view class='search-middle' bindtap='selectCompany'>
      <
image class='car' src='{{src
  }
  }' mode='aspectfit'>
<
/image>
      <
text class='middle-text'>
{{company
  }
  }<
/text>
    <
/view>
    <
view class="dr">
      <
image class='dr-img' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/dr.jpg?sign=8fa530125c0e20b0a6f9b0a39a5afae6&
t=1542885013' mode='aspectfit'>
<
/image>
    <
/view>
    <
view class='save-list'>
      <
text class='save-text'>
儲存到包裹列表<
/text>
      <
van-switch class='save-switch' bind:tap="onChangeswitch" checked="{{checked
  }
  }" size="110%" active-color="#4b0" inactive-color="#f44">
<
/van-switch>
    <
/view>
    <
view class='search-bottom' bindtap="getExpressInfo" data-number='{{no
  }
  }' data-name='{{no
  }
  }'>
      查詢    <
/view>
  <
/view>
  <
scroll-view scroll-y class='scroll-view'>
    <
view class='history'>
      <
view class='history-text'>
{{historyOrder
  }
  }<
/view>
      <
view class='history-item' wx:for="{{historyList
  }
  }" wx:key="{{index
  }
  }">
        <
view class='item-num'>
{{item.code
  }
  }<
/view>
        <
view class='item-text'>
{{item.company
  }
  }<
/view>
        <
image class='item-image' mode='aspectFit' src='../../images/x.jpg' data-code='{{item.code
  }
  }' bindtap='delectoneHistory'>
<
/image>
      <
/view>
      <
view class='clear-history' bindtap='onSHowdialog'>
{{delectHistory
  }
  }<
/view>
      <
wxc-dialog class="wxc-dialog" title="確認全部清除" bindcancel="onCancel" bindconfirm="delectHistory">
<
/wxc-dialog>
    <
/view>
  <
/scroll-view>
<
/view>
複製程式碼

第三個主要頁面

<
view class="container flex_vert ">
  <
view class="search">
    <
view class='search-text'>
<
/view>
    <
van-search class="van-search" value="{{ 
value 
  }
  }" placeholder="請輸入拼音縮寫或中文" background="#ffffff" />
  <
/view>
  <
scroll-view class='company' scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" scroll-into-view="{{toView
  }
  }">
    <
view class='select-list'>
      <
view class='select-word' wx:for="{{scrollList
  }
  }" wx:key="{{index
  }
  }" data-index='{{index
  }
  }' data-id="{{item
  }
  }" bindtap='switchTab'>
        {{item
  }
  }      <
/view>
    <
/view>
    <
view class='item-A' id='{{item.number
  }
  }' hover-stay-time='3000' wx:for="{{comList
  }
  }" wx:key="{{index
  }
  }" wx:for-item="item" scroll-with-animation="true" scroll-animation-duration="3000">
      <
text>
{{item.number
  }
  }<
/text>
      <
view class='company-item' wx:for="{{item.list
  }
  }" wx:key="{{index
  }
  }" bindtap='backwithData' data-text='{{item.text
  }
  }' data-src="{{item.pic
  }
  }">
        <
image src='{{item.pic
  }
  }' class='item-image' mode='acpectFill'>
<
/image>
        <
text class='item-text'>
{{item.text
  }
  }<
/text>
        <
icon>
          <
image src='{{item.likepic
  }
  }' class='icon'>
<
/image>
        <
/icon>
      <
/view>
    <
/view>
  <
/scroll-view>
<
/view>
複製程式碼

第四個主要頁面

<
view class='container'>
  <
view class='header'>
    <
view class="container-header">
      <
view class='left'>
        <
image class='left-img1' mode='aspectFit' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d1.jpg?sign=418294a51084375aa75faf9c934a232a&
t=1542776464'>
<
/image>
        <
image class='left-img2' mode='aspectFit' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d2.jpg?sign=860b4b91983b5882361fd8518d4f5052&
t=1542776482'>
<
/image>
        <
text class='left-text'>
已簽收<
/text>
      <
/view>
      <
view class='right'>
        <
view class='right-box' bindtap='service'>
          <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d3.jpg?sign=e0896127eca1f639dc3f987713007073&
t=1542776506'>
<
/image>
          <
text class='right-box_text'>
物流客服<
/text>
        <
/view>
        <
view class='right-box' bindtap=' complaint'>
          <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d4.jpg?sign=88eea48517eae4dd43e484a4011db0b3&
t=1542776526'>
<
/image>
          <
text class='right-box_text'>
物流投訴<
/text>
        <
/view>
        <
view class='right-box'>
          <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d5.jpg?sign=cd8068ae4d4079e834c6cf1be6a63017&
t=1542776546' class='right-box_img3'>
<
/image>
        <
/view>
      <
/view>
    <
/view>
  <
/view>
  <
scroll-view scroll-y="{{true
  }
  }" class='scroll'>
    <
view class="detail-container">
      <
image class='errormessage' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/error.jpg?sign=5e662ac9d3f2137611fbc78ed57f7d91&
t=1542776565'>
<
/image>
      <
view class='talkinn'>
        <
text class='inn-text'>
評價驛站 東華理工大學南區七棟菜鳥驛站<
/text>
        <
view class='innbar'>
          <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/ink.jpg?sign=dcf1be9f08dc50684d63fb521fc3573a&
t=1542776591' class='inn'>
<
/image>
          <
view class='stars'>
            <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&
t=1542811791' class='star'>
<
/image>
            <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&
t=1542811791' class='star'>
<
/image>
            <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&
t=1542811791' class='star'>
<
/image>
            <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&
t=1542811791' class='star'>
<
/image>
            <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&
t=1542811791' class='star'>
<
/image>
          <
/view>
        <
/view>
        <
view class='inn-bottom'>
          <
text class='inn-bottom_text'>
{{company
  }
  }  {{code
  }
  }<
/text>
          <
image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/error.jpg?sign=ae3162eb21f9eb321f3cf443751cd5ef&
t=1542776616' class='errormessage2'>
<
/image>
        <
/view>
      <
/view>
      <
view class='detail'>
        <
view class='detail-data1'>
          <
view class='time'>
<
/view>
          <
view class='shouicon'>
            <
image class='icon' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou.jpg?sign=2b723580f5bcd7a63fadcafca12f7fac&
t=1542776646' class='icon1'>
<
/image>
          <
/view>
          <
view class='data-msg'>
            <
view class='data-msg_title'>
<
/view>
            <
view class='data-msg_article'>
【收貨地址】江西省南昌市青山湖區 蛟橋鎮 東華理工大學廣蘭大道廣蘭校區<
/view>
          <
/view>
        <
/view>
        <
view class='detail-data'>
          <
view class='time'>
{{time1
  }
  }<
/view>
          <
view class='shouicon'>
            <
image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou2.jpg?sign=ab586f9e02814f37c32b3673be252728&
t=1542776674'>
<
/image>
          <
/view>
          <
view class='data-msg'>
            <
view class='data-msg_title'>
已簽收<
/view>
            <
view class='data-msg_article'>
您已在東華理工大學南區七棟菜鳥驛站完成取件，感謝使用菜鳥驛站，期待再次為您服務。<
/view>
            <
text class='data-select'>
我要退貨<
/text>
            <
text class='data-select'>
聯絡賣家<
/text>
            <
text class='data-select'>
檢視訂單<
/text>
          <
/view>
        <
/view>
        <
view class='detail-data'>
          <
view class='time'>
{{time2
  }
  }<
/view>
          <
view class='shouicon'>
            <
image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou3.jpg?sign=0df85fc9d103f7717e2b963f2f5f7746&
t=1542776695'>
<
/image>
          <
/view>
          <
view class='data-msg'>
            <
view class='data-msg_title'>
待取件<
/view>
            <
view class='data-msg_article'>
您已在東華理工大學南區七棟菜鳥驛站完成取件，感謝使用菜鳥驛站，期待再次為您服務。<
/view>
          <
/view>
        <
/view>
        <
view class='detail-data1'>
          <
view class='time'>
{{time3
  }
  }<
/view>
          <
view class='shouicon'>
            <
image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou4.jpg?sign=949a5b5f8436e0933e279c7dab7d99f0&
t=1542776714'>
<
/image>
          <
/view>
          <
view class='data-msg'>
            <
view class='data-msg_title'>
派送中<
/view>
            <
view class='data-msg_article'>
{{text3
  }
  }<
/view>
          <
/view>
        <
/view>
        <
view class='detail-data1'>
          <
view class='time'>
{{time3
  }
  }<
/view>
          <
view class='shouicon'>
            <
image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou5.jpg?sign=bdab3c461441de6b8cea13589bb4dfc2&
t=1542776737'>
<
/image>
          <
/view>
          <
view class='data-msg'>
            <
view class='data-msg_title'>
運輸中<
/view>
            <
view class='data-msg_article'>
{{text3
  }
  }<
/view>
          <
/view>
        <
/view>
        <
view class='detail-data2' wx:for="{{Traces2
  }
  }" wx:key="index">
          <
view class='time'>
{{item.AcceptTime
  }
  }<
/view>
          <
view class='shouicon2'>
            <
image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou6.jpg?sign=2c10e0b37d9ac31b88a1c5d836ef7ffb&
t=1542776755'>
<
/image>
          <
/view>
          <
view class='data-msg'>
            <
view class='data-msg_title'>
<
/view>
            <
view class='data-msg_article'>
{{item.AcceptStation
  }
  }<
/view>
          <
/view>
        <
/view>
        <
view class='detail-data'>
          <
view class='time'>
{{time3
  }
  }<
/view>
          <
view class='shouicon3'>
            <
image class='icon3' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou7.jpg?sign=f7309cadf586fa539d3a04b77488dd97&
t=1542776785'>
<
/image>
          <
/view>
          <
view class='data-msg'>
            <
view class='data-msg_title'>
已攬件<
/view>
            <
view class='data-msg_article'>
<
/view>
          <
/view>
        <
/view>
      <
/view>
    <
/view>
  <
/scroll-view>
<
/view>
<
!-- <
view id='map'>
 -->
<
!-- <
map id="myMap" markers="{{markers
  }
  }" longitude="{{lon
  }
  }" latitude="{{lat
  }
  }" scale='16'>
  <
/map>
 -->
<
!-- <
/view>
 -->
複製程式碼

這個頁面的功能是實現查詢已簽收的快遞的物流狀態，而且簽收地固定了一下還有其他狀態比如運輸中，未發貨，快遞單號過期。為了把這個效果展現出來。這裡沒有寫其他的頁面。第一個資料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介面的使用
下面是具體的請求引數

需要對請求的資料中的Datasign部分做以下處理

使用工具包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

<
view class='clear-history' bindtap='onSHowdialog'>
{{delectHistory
  }
  }<
/view>
     <
wxc-dialog class="wxc-dialog" title="確認全部清除"bindcancel="onCancel" bindconfirm="delectHistory">
<
/wxc-dialog>
<
/view>
 複製程式碼

組建的js是這樣寫的

onGotUserInfo(e) { 
     this.triggerEvent('confirm', e)      //向外傳遞    
  }複製程式碼

元件中的確定按鈕呼叫元件自身的onGotUserInfo方法

<
button class="getUserInfo_btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">
確定<
/button>
複製程式碼

點選確定，觸發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

<
text class='{{bottomshow== true? "bottomshow":"hide"
  }
  }' bindtap='watchMore'>
檢視全部<
/text>
複製程式碼

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;
   
  }複製程式碼

toView巧妙使用

效果預覽
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程式碼

 <
scroll-view class='company' scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" scroll-into-view="{{toView
  }
  }">
    <
view class='select-list'>
      <
view class='select-word' wx:for="{{scrollList
  }
  }" wx:key="{{index
  }
  }" data-index='{{index
  }
  }' data-id="{{item
  }
  }" bindtap='switchTab'>
        {{item
  }
  }      <
/view>
    <
/view>
    <
view class='item-A' id='{{item.number
  }
  }' hover-stay-time='3000' wx:for="{{comList
  }
  }" wx:key="{{index
  }
  }" wx:for-item="item" scroll-with-animation="true" scroll-animation-duration="3000">
      <
text>
{{item.number
  }
  }<
/text>
      <
view class='company-item' wx:for="{{item.list
  }
  }" wx:key="{{index
  }
  }" bindtap='backwithData' data-text='{{item.text
  }
  }' data-src="{{item.pic
  }
  }">
        <
image src='{{item.pic
  }
  }' class='item-image' mode='acpectFill'>
<
/image>
        <
text class='item-text'>
{{item.text
  }
  }<
/text>
        <
icon>
          <
image src='{{item.likepic
  }
  }' class='icon'>
<
/image>
        <
/icon>
      <
/view>
    <
/view>
  <
/scroll-view>
複製程式碼

回顯到上個頁面選擇某一行時點選觸發 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()處理一下，把頁面需要的單個資料或者列表整理出來，儲存顯示。

結語

總結一下就是用快遞公司名字查詢對應的編碼，快遞單號從使用者輸入或首頁點選事件獲得，然後請求查詢，最後一個頁面是顯示的結果，還有路徑標註任務沒有完成，由於專案工程較大，只做了主要的一部分吧，關於元件封裝，方法呼叫還有，效果展示應該會有更多激動人心的效果，專案就玩到這吧，再慢慢學習，慢慢補充。
感謝各位讀者的閱讀，文章中如有錯誤或不妥之處，請不吝賜教。
你的贊與肯定將會成為我程式碼之路上的一縷陽光，使我更加勇敢堅定的往前走。

專案地址奉上

來源：https://juejin.im/post/5bf8345c51882511a8528e95#comment

菜鳥裹裹App分析系列-產品分析
2018-07-26
APP
菜鳥裹裹App分析系列-UI框架設計分析
2019-03-04
APPUI框架
女生裹被走紅網路網友：好大一個"粽子"
2015-12-23
如何精簡企業主資料“裹腳布”
2019-02-13
一個菜鳥在程式碼重構中的感想
2014-12-10
作為一個菜鳥程式設計師跳槽可行嗎?
2016-04-16
程式設計師
一個菜鳥管理的學習和思考（一）
2022-06-07
Linux“菜鳥”到“菜鳥的一些建議
2020-10-15
Linux
菜鳥學習寫的Ioc工具
2013-03-27
遊戲菜鳥張一鳴
2020-12-07
遊戲
問個菜鳥-高手問題
2005-01-25
一個菜鳥管理的學習和思考（二）
2022-06-08
mpvue寫一個CPASS小程式
2018-09-02
Vue
自己寫一個mvc框架吧（一）
2019-02-01
MVC框架
菜鳥如何成為一個高效程式設計師的成長之路
2013-09-13
程式設計師
菜鳥程式設計師都是怎樣寫程式碼的？你也可以學一手
2019-11-07
程式設計師
編寫你人生中第一個機器學習程式碼吧！
2018-01-15
機器學習
【菜鳥學Java】5：“徒手”建立一個Web應用
2015-12-12
JavaWeb
菜鳥學設計模式（一）——小單例有大祕密
2013-06-17
設計模式單例
鳥哥私房菜-基礎篇小筆記
2018-05-31
筆記
程式設計師菜鳥面試攻略
2020-07-21
程式設計師面試
給每個菜鳥程式設計師的修養之道
2014-04-24
程式設計師
自己寫一個mvc框架吧（四）
2019-02-11
MVC框架
自己寫一個mvc框架吧（五）
2019-02-13
MVC框架
自己寫一個mvc框架吧（二）
2019-02-01
MVC框架
自己寫一個mvc框架吧（三）
2019-02-01
MVC框架
我寫小程式像菜虛鯤——2、?你太美
2019-06-15
手寫指令碼程式碼太累！搞一個生成工具吧
2020-07-31
指令碼
【菜鳥學Java】3：封裝一個分頁類PageBean
2015-11-08
Java封裝Bean
Java編寫的文字編輯器（菜鳥作品）
2015-07-18
Java
一個在駭客界引起轟動的菜鳥教材---跟我學程式設計系列(轉)
2007-08-12
程式設計
【前端開發】菜鳥必看，大佬繞道～使用控制檯寫js程式碼
2020-12-04
前端JS
不如自己寫一個 schema 類庫吧
2019-01-14
一個菜鳥對密碼學的理解 (4千字)
2015-11-15
密碼學
第一個mpvue小程式開發完了，來總結下吧
2019-03-04
Vue
Scala菜鳥進階之路一基礎
2021-09-09
程式猿菜鳥打怪升級—一路火花帶閃電
2019-09-08
寫一個小框架
2007-07-15
框架