写一个小顺序菜鸟裹裹吧

2019年8月20日 150次阅读来源: Emensionyu

新手写小递次并不简朴，这是我的第一次尝试进修到了许多。近来双十一事后，天天不是拿快递就是去拿快递的路上，掀开手机运用里的菜鸟裹裹检察快递是很轻易的，当我在微信端搜刮菜鸟裹裹小递次时，却没有发明，因而便想本身着手仿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()处置惩罚一下，把页面须要的单个数据或许列表整理出来，存储显现。
《写一个小顺序菜鸟裹裹吧》

结语

总结一下就是用快递公司名字查找对应的编码，快递单号从用户输入或首页点击事宜取得，然后要求查询，末了一个页面是显现的效果，另有途径标注使命没有完成，因为项目工程较大，只做了重要的一部份吧，关于组件封装，要领挪用另有，效果展现应当会有更多激动人心的效果，项目就玩到这吧，再逐步进修，逐步补充。

谢谢列位读者的浏览，文章中若有毛病或不妥的地方，请不吝赐教。

你的赞与一定将会成为我代码之路上的一缕阳光，使我越发英勇坚决的往前走。

项目地点送上

    原文作者：Emensionyu
    原文地址: https://segmentfault.com/a/1190000017202945
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。