寫(xiě)一個(gè)菜鳥(niǎo)裹裹小程序吧

發(fā)布時(shí)間：2018-12-03 10:10 所屬欄目：小程序開(kāi)發(fā)教程

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

項(xiàng)目效果預(yù)覽

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

使用的開(kāi)發(fā)工具VScode和微信開(kāi)發(fā)者工具
平臺(tái)提供：微信公眾品臺(tái)|小程序，在該品臺(tái)注冊(cè)賬號(hào)獲取AppId，使用AppId登入微信開(kāi)發(fā)者工具，開(kāi)啟項(xiàng)目
使用的API文檔:微信小程序開(kāi)發(fā)文檔, 微信小程序開(kāi)發(fā)教程手冊(cè)文檔_w3c 詳細(xì)介紹了微信各種工具的使用Vant Weapp,提供了好多實(shí)用性的組件，我項(xiàng)目中搜索框使用了該組件庫(kù)的搜索組件weUI微信團(tuán)隊(duì)的基礎(chǔ)樣式庫(kù)，
使用的接口：快遞鳥(niǎo) 接口提供快遞單號(hào)和公司編碼可以查詢(xún)快遞的物流信息。騰訊地圖開(kāi)放品臺(tái)提供了關(guān)于使用地圖，地圖顯示，標(biāo)注/多邊形繪制，路線顯示這些功能的實(shí)現(xiàn)。

頁(yè)面解構(gòu)

如下圖，總共四個(gè)頁(yè)面
復(fù)制代碼

第一個(gè)主要頁(yè)面

<view class="container">

  <van-search class="van-search" value="{{ value }}" placeholder="請(qǐng)輸入拼音縮寫(xiě)或中文" 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" >快遞員上門(mén)</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">精靈書(shū)屋</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">領(lǐng)裹醬</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'>進(jìn)行中</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'>//最后一個(gè)廣告項(xiàng)
    <view class='item-wrapper'>

     <text class='item-title'>有一個(gè)神秘包裹想你飛來(lái)</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'>菜鳥(niǎo)裹裹</text>
        <text class='item-text3'>神秘包裹已送至裹裹自提柜</text>
      </view>
    
    
    </view>
     
</view>
<text class='{{bottomshow== true? "bottomshow":"hide"}}' bindtap='watchMore'>查看全部</text>
  </scroll-view>
  
</view>
復(fù)制代碼

第二個(gè)頁(yè)面寫(xiě)起來(lái)很簡(jiǎn)單

<view class='largecontainer'>
  <view class='container'>
    <van-search class="search-top" value="{{value}}" placeholder="請(qǐng)輸入運(yùn)單號(hào)" 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}}'>
      查詢(xún)
    </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="確認(rèn)全部清除" bindcancel="onCancel" bindconfirm="delectHistory"></wxc-dialog>
    </view>
  </scroll-view>
</view>
復(fù)制代碼

第三個(gè)主要頁(yè)面

<view class="container flex_vert ">
  <view class="search">
    <view class='search-text'></view>
    <van-search class="van-search" value="{{ value }}" placeholder="請(qǐng)輸入拼音縮寫(xiě)或中文" 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>
復(fù)制代碼

第四個(gè)主要頁(yè)面

<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'>評(píng)價(jià)驛站 東華理工大學(xué)南區(qū)七棟菜鳥(niǎo)驛站</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'>【收貨地址】江西省南昌市青山湖區(qū) 蛟橋鎮(zhèn) 東華理工大學(xué)廣蘭大道廣蘭校區(qū)</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'>您已在東華理工大學(xué)南區(qū)七棟菜鳥(niǎo)驛站完成取件，感謝使用菜鳥(niǎo)驛站，期待再次為您服務(wù)。</view>
            <text class='data-select'>我要退貨</text>
            <text class='data-select'>聯(lián)系賣(mài)家</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'>您已在東華理工大學(xué)南區(qū)七棟菜鳥(niǎo)驛站完成取件，感謝使用菜鳥(niǎo)驛站，期待再次為您服務(wù)。</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'>運(yùn)輸中</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> -->
復(fù)制代碼

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

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

easy-mock可以實(shí)現(xiàn)高效偽造數(shù)據(jù) easy-mock

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

{
"data": {
 expressList: [{
     image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/yy.jpg?sign=b28732bd498113a8c88cfa634121a363&t=1542776282",
     text1: "【送歷年真題】,朱偉老師推薦！新東方201...",
     text2: "簽收時(shí)間：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: "淘寶|運(yùn)動(dòng)護(hù)具籃球護(hù)指套艾弗森庫(kù)...",
     text2: "簽收時(shí)間：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前端開(kāi)發(fā)CSS3+...",
     text2: "簽收時(shí)間：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: "簽收時(shí)間：09-21 17:13",
     text3: "韻達(dá)快遞：3956570250807",
     text4: "河南洛陽(yáng)--江西南昌",
     contentId: "004",
   }
 ]
}
}
復(fù)制代碼

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

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

expresses：每一個(gè)快遞單號(hào)對(duì)應(yīng)的信息，這里通過(guò)接口獲取數(shù)據(jù)后添加到數(shù)據(jù)庫(kù)中，同時(shí)把快遞單號(hào)作為每一個(gè)記錄的一個(gè)字段，后面可以通過(guò)單號(hào)直接查詢(xún)，重復(fù)單號(hào)不添加，無(wú)效單號(hào)也不添加進(jìn)云數(shù)據(jù)庫(kù)。
getExpresses：這是代取件里面的數(shù)據(jù)集合，

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

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

使用小程序云開(kāi)發(fā)品臺(tái)里的數(shù)據(jù)庫(kù)，存儲(chǔ)管理，既不用占用本地資源，也方便請(qǐng)求和修改。
云開(kāi)發(fā)為開(kāi)發(fā)者提供完整的云端支持，不用操心后端的管理，同時(shí)也不需要很麻去構(gòu)建服務(wù)器，直接使用小程序提供的云函數(shù)的API文檔和對(duì)小程序數(shù)據(jù)庫(kù)操作的相關(guān)API即可實(shí)現(xiàn)數(shù)據(jù)的增刪改操作，比mysql數(shù)據(jù)庫(kù)操作更簡(jiǎn)單方便，這樣就可以可實(shí)現(xiàn)快速上線和迭代，同時(shí)這一能力，同開(kāi)發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥。

接口使用

整個(gè)查詢(xún)快遞的流程預(yù)覽

快遞鳥(niǎo)接口首先注冊(cè)一個(gè)快遞鳥(niǎo)賬號(hào)，選擇訂購(gòu)物流查詢(xún)免費(fèi)版應(yīng)用，期間需要上傳身份證，還需要填寫(xiě)技術(shù)人員信息，通通寫(xiě)自己就好了，申請(qǐng)成功后，可以得到自己的API key和用戶(hù)ID

查詢(xún)快遞的js代碼這里需要先選擇快遞公司，在selectCompany頁(yè)面選擇，選擇完成返回到查詢(xún)訂單號(hào) sarch

頁(yè)面

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

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

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

使用工具包util里的MD5函數(shù)進(jìn)行加密運(yùn)算
(util.md5(RequestData + 'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e'))
需要把請(qǐng)求的數(shù)據(jù)進(jìn)行encodeURI()編碼，該函數(shù)可把字符串作為 URl 進(jìn)行編碼。
使用util工具包中的Base64編碼算法對(duì)請(qǐng)求數(shù)據(jù)編碼成base64格式
Base64是當(dāng)今比較流行的編碼方法，因?yàn)樗幤饋?lái)速度快而且簡(jiǎn)單
好處: base64特別適合在http，協(xié)議下快速傳輸數(shù)據(jù)。
最后把數(shù)據(jù)內(nèi)容簽名進(jìn)行encodeURI編碼，請(qǐng)求數(shù)據(jù)準(zhǔn)備好了

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

var util = require('../../utils/util.js')
const db = wx.cloud.database()
const expresses = db.collection('expresses')
const app = getApp()
getExpressInfo:function(nu,cb){
    //查物流
    //快遞公司和，快遞單號(hào)
   let companyname=wx.getStorageSync("codename")||"YTO";
    let company = wx.getStorageSync("company") || "圓通快遞";
   console.log(companyname);
     let exp=nu.currentTarget.dataset.name
    var logistics = [companyname,exp];//保存在一個(gè)數(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	訂單編號(hào)	O
    // ShipperCode	String	快遞公司編碼	R
    // LogisticCode	String	物流單號(hào)
    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)容(進(jìn)行過(guò)url編碼)
          'RequestData': RequestDatautf,
          //電商ID
          'EBusinessID': '1399017',
          //請(qǐng)求指令類(lèi)型：1002
          'RequestType': '1002',
          //數(shù)據(jù)內(nèi)容簽名把（請(qǐng)求內(nèi)容（未編碼）+ApiKey）進(jìn)行MD5加密，然后Base64編碼，最后進(jìn)行URL（utf-8）編碼
          'DataSign': DataSign,
          //請(qǐng)求、返回?cái)?shù)據(jù)類(lèi)型： 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],
             })
            
          })
        }
      })
    }
  },
復(fù)制代碼

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

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

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

V -view 頁(yè)面視圖

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

顯示在歷史記錄中.為了防止第一次從storage中取不到鍵為historys的歷史記錄，這樣子寫(xiě)比較好 let list = wx.getStorageSync("historys")||[]; ,如果數(shù)組 list 為空或者已經(jīng)不存在正在查詢(xún)的快遞單號(hào)，則添加，反之則不添加,存儲(chǔ) this.setData({historyList: list}) 頁(yè)面重新渲染顯示
把當(dāng)前快遞單號(hào)對(duì)應(yīng)的快遞信息存儲(chǔ)到云數(shù)據(jù)庫(kù)上
跳轉(zhuǎn)到物流詳情頁(yè)面，顯示。
騰訊地圖接口使用最終效果見(jiàn)下圖

Todetil頁(yè)面

但是在手機(jī)端確總有個(gè)bug，樣式里寫(xiě)了z-index表示元素的堆疊順序，在手機(jī)端只出現(xiàn)地圖，不過(guò)這只是一個(gè)效果。騰訊地圖的接口需要在騰訊地圖開(kāi)放品臺(tái)

注冊(cè)申請(qǐng)，使用API獲取當(dāng)前地址經(jīng)緯度信息，利用逆地址查詢(xún)獲取當(dāng)前位置，這里只是獲取地圖作為背景圖片?？梢钥聪挛业脑创a在github上面

這個(gè)頁(yè)面的邏輯就是獲取快遞單號(hào)和公司代碼，這里有四種情況兩種界面效果，未查詢(xún)到顯示一種界面效果，這個(gè)很簡(jiǎn)單效果都一樣，從首頁(yè)查詢(xún)到，搜索查詢(xún)到，歷史記錄點(diǎn)擊查詢(xún)到顯示另外一個(gè)界面狀態(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ù)制代碼

組件使用

這里使用來(lái)對(duì)話框組件，點(diǎn)擊清楚歷史記錄，觸發(fā)對(duì)話框。

點(diǎn)擊對(duì)話框確定，全部清楚歷史記錄
點(diǎn)擊對(duì)話框取消，隱藏對(duì)話框，不清楚歷史記錄

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

{
     "wxc-dialog": "/components/dialog/dialog"
}
復(fù)制代碼

對(duì)應(yīng)search.wxml中使用的代碼
在search.wxml中引入components中的dialog組件 dialog

<view class='clear-history' bindtap='onSHowdialog'>{{delectHistory}}</view>
     <wxc-dialog class="wxc-dialog" title="確認(rèn)全部清除"bindcancel="onCancel" bindconfirm="delectHistory"></wxc-dialog>
</view> 
復(fù)制代碼

組建的js是這樣寫(xiě)的

onGotUserInfo(e) {
      this.triggerEvent('confirm', e)
      //向外傳遞
    }
復(fù)制代碼

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

<button class="getUserInfo_btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">確定</button>
復(fù)制代碼

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

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

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

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

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

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

首頁(yè)中請(qǐng)求easy-mock中的數(shù)據(jù)就是使用了util類(lèi)中對(duì)request的封裝，可以實(shí)現(xiàn)多次調(diào)用，重復(fù)調(diào)用，實(shí)現(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ò)錯(cuò)誤!`, duration: 1000, icon: "none" })
    })
 
  },
復(fù)制代碼

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

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

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

<text class='{{bottomshow== true? "bottomshow":"hide"}}' bindtap='watchMore'>查看全部</text>
復(fù)制代碼

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

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

      })
    }
復(fù)制代碼

樣式hide對(duì)用代碼
復(fù)制代碼

.hide{
    display: none;
   }
復(fù)制代碼

toView巧妙使用

效果預(yù)覽
selectCompany.wxml,這里外層循環(huán)了companyList列表，先輸出右邊的側(cè)邊欄A-Z，再輸出列表項(xiàng)的大寫(xiě)字母A,B,C...，和該項(xiàng)的內(nèi)層循環(huán)，內(nèi)層循環(huán)了每一個(gè)大寫(xiě)字母對(duì)應(yīng)了以該大寫(xiě)字母開(kāi)頭的公司列表， scroll-view 每一項(xiàng)動(dòng)態(tài)設(shè)置 id='{{item.number}}' 設(shè)置 scroll-into-view="{{toView}}" 當(dāng)點(diǎn)擊側(cè)邊欄的A，B，C，D...Z時(shí)，觸發(fā) bindtap='switchTab' 設(shè)置相對(duì)應(yīng)的 toView 。
這里有比較奇怪的一點(diǎn)，就是I字母沒(méi)有以該字母出現(xiàn)的公司列表，原版菜鳥(niǎo)裹裹點(diǎn)擊后回到A，我想用戶(hù)要么不會(huì)去點(diǎn)擊，要么點(diǎn)擊鄰近的不小心點(diǎn)錯(cuò)了。可以點(diǎn)擊I時(shí) ， scroll-into-view 到附近的去給switchTab新增一個(gè)判斷條件搞定。

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,
    })
  },
復(fù)制代碼

整個(gè)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>
復(fù)制代碼

回顯到上個(gè)頁(yè)面選擇某一行時(shí)點(diǎn)擊觸發(fā) bindtap='backwithData' wx.navigatBack()改變上個(gè)頁(yè)面中的數(shù)據(jù)，存儲(chǔ)公司標(biāo)志，公司文本，公司代碼Storage，上個(gè)頁(yè)面獲取數(shù)據(jù)顯示。代碼如下


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

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

這里只寫(xiě)了主要的常用的快遞物流查詢(xún)，如下圖，對(duì)于后面獲取的數(shù)據(jù)的處理，因?yàn)楂@取的是倒敘的數(shù)據(jù)，我先用 packageData() 處理一下，把頁(yè)面需要的單個(gè)數(shù)據(jù)或者列表整理出來(lái)，存儲(chǔ)顯示。

結(jié)語(yǔ)

總結(jié)一下就是用快遞公司名字查找對(duì)應(yīng)的編碼，快遞單號(hào)從用戶(hù)輸入或首頁(yè)點(diǎn)擊事件獲得，然后請(qǐng)求查詢(xún)，最后一個(gè)頁(yè)面是顯示的結(jié)果，還有路徑標(biāo)注任務(wù)沒(méi)有完成，由于項(xiàng)目工程較大，只做了主要的一部分吧，關(guān)于組件封裝，方法調(diào)用還有，效果展示應(yīng)該會(huì)有更多激動(dòng)人心的效果，項(xiàng)目就玩到這吧，再慢慢學(xué)習(xí)，慢慢補(bǔ)充。
感謝各位讀者的閱讀，文章中如有錯(cuò)誤或不妥之處，請(qǐng)不吝賜教。
你的贊與肯定將會(huì)成為我代碼之路上的一縷陽(yáng)光，使我更加勇敢堅(jiān)定的往前走。

易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源碼云倉(cāng)庫(kù):

本文地址：http://m.chqfk.com/wxmini/doc/course/24987.html 復(fù)制鏈接如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún)：點(diǎn)擊咨詢(xún)

免責(zé)聲明：本站所有文章和圖片均來(lái)自用戶(hù)分享和網(wǎng)絡(luò)收集，文章和圖片版權(quán)歸原作者及原出處所有，僅供學(xué)習(xí)與參考，請(qǐng)勿用于商業(yè)用途，如果損害了您的權(quán)利，請(qǐng)聯(lián)系網(wǎng)站客服處理。

熱門(mén)問(wèn)題
最新問(wèn)題

小程序模板網(wǎng)