寫一個菜鳥裹裹小程序吧
發布時間：2018-12-03 10:10 所屬欄目：小程序開發教程
新手(shou)寫(xie)(xie)小程序(xu)并不簡單，這是(shi)我的(de)第一次嘗試學習到了很多(duo)。最(zui)近雙十一過后，每天不是(shi)拿快(kuai)(kuai)遞就是(shi)去(qu)拿快(kuai)(kuai)遞的(de)路上，翻開(kai)手(shou)機應用里(li)的(de)菜鳥(niao)裹(guo)裹(guo)查(cha)(cha)看快(kuai)(kuai)遞是(shi)很方便(bian)的(de)，當我在微(wei)信端搜(sou)索(suo)菜鳥(niao)裹(guo)裹(guo)小程序(xu)時，卻(que)沒有(you)發現(xian)，于是(shi)便(bian)想自己(ji)動手(shou)仿(fang)app版寫(xie)(xie)一個菜鳥(niao)裹(guo)裹(guo)的(de)小程序(xu)，對(dui)其中的(de)快(kuai)(kuai)遞查(cha)(cha)詢物(wu)流(liu)跟蹤很有(you)興趣。
- 項目效果預覽
- 項目目錄結構
-
使用的開發工(gong)具VScode和 微(wei)信開發者工(gong)具
-
平臺(tai)提供：微信公(gong)眾品臺(tai)|小程序，在該品臺(tai)注冊賬號獲取AppId，使用AppId登入(ru)微信開(kai)發者工(gong)具(ju)，開(kai)啟項(xiang)目
-
使用的(de)(de)(de)API文檔:微信(xin)(xin)小程(cheng)序(xu)開發(fa)文檔, 微信(xin)(xin)小程(cheng)序(xu)開發(fa)教(jiao)程(cheng)手(shou)冊文檔_w3c 詳細介紹(shao)了(le)(le)微信(xin)(xin)各(ge)種(zhong)工具的(de)(de)(de)使用Vant Weapp,提供(gong)了(le)(le)好多實用性的(de)(de)(de)組件(jian)，我(wo)項目中(zhong)搜索(suo)框使用了(le)(le)該組件(jian)庫的(de)(de)(de)搜索(suo)組件(jian)weUI微信(xin)(xin)團(tuan)隊的(de)(de)(de)基礎樣(yang)式(shi)庫，
-
使用(yong)的接口：快(kuai)遞(di)鳥 接口 提供快(kuai)遞(di)單號和公司(si)編碼可以查詢快(kuai)遞(di)的物流信息。騰訊(xun)地圖開放品臺提供了關于使用(yong)地圖，地圖顯示(shi)，標注/多邊形繪制，路線顯示(shi)這些功能(neng)的實現(xian)。
頁面解構
如下圖，總共四個頁面 復制代碼
-
第一個主要頁面
<view class="container">
<van-search class="van-search" value="{{ value }}" placeholder="請輸入拼音縮寫或中文" background="#ffffff" bindtap="searchAnother" />
<image class="message" src="//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="//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="//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="//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="//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='//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='//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='//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='//636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d1.jpg?sign=418294a51084375aa75faf9c934a232a&t=1542776464'></image>
<image class='left-img2' mode='aspectFit' src='//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='//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='//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='//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='//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='//636c-cloud-912718-1257892962.tcb.qcloud.la/images2/ink.jpg?sign=dcf1be9f08dc50684d63fb521fc3573a&t=1542776591' class='inn'></image>
<view class='stars'>
<image src='//636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
<image src='//636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
<image src='//636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
<image src='//636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
<image src='//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='//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='//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='//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='//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='//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='//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='//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='//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> -->
復制代碼
|
這(zhe)個頁(ye)面(mian)的(de)(de)功能是實現查(cha)詢已簽收的(de)(de)快(kuai)遞的(de)(de)物流狀(zhuang)態(tai)，而且簽收地固(gu)定了一下還有(you)其他狀(zhuang)態(tai)比如運輸中(zhong)，未(wei)發貨，快(kuai)遞單號過期(qi)。為了把這(zhe)個效(xiao)果展現出來。這(zhe)里沒(mei)有(you)寫其他的(de)(de)頁(ye)面(mian)。 第(di)一個數(shu)據detail-data 收 需要獲取(qu)用(yong)戶的(de)(de)收貨地址 第(di)二個數(shu)據 detail-data 已簽收可(ke)以送(song)請求的(de)(de)數(shu)據中(zhong)獲取(qu)使(shi)用(yong)
easy-mock + 小程(cheng)序云開發數據(ju)庫使(shi)用
-
easy-mock可以實現高效偽造(zao)數(shu)據 easy-mock
在上面(mian)注冊后(hou)可(ke)(ke)以(yi)創建一個接口(kou)，編輯(ji)接口(kou)可(ke)(ke)以(yi)添加(jia)數據(ju)， 可(ke)(ke)以(yi)獲(huo)取接口(kou)的url，然后(hou)通過小程序的 wx.request(url) 獲(huo)取在easy-mock里(li)的數據(ju)，本(ben)例(li)使用easy-mock構(gou)建了(le)首(shou)頁中 expressLists 的數據(ju)
{
"data": {
expressList: [{
image: "//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: "//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: "//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: "//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點擊上傳可以把本地圖片上傳到存儲中
利用(yong)云數(shu)據(ju)庫(ku)提供的圖(tu)片(pian)地(di)址(zhi)可(ke)以實現(xian)本(ben)地(di)圖(tu)片(pian)url書寫(xie)。
- 使用小程序云開發品臺里的數據庫，存儲管理，既不用占用本地資源，也方便請求和修改。
- 云開發為開發者提供完整的云端支持，不用操心后端的管理，同時也不需要很麻去構建服務器，直接使用小程序提供的云函數的API文檔和對小程序數據庫操作的相關API即可實現數據的增刪改操作，比mysql數據庫操作更簡單方便，這樣就可以可實現快速上線和迭代，同時這一能力，同開發者已經使用的云服務相互兼容，并不互斥。
接口使用
整個(ge)查詢快(kuai)遞(di)的流程(cheng)預覽
- 快遞鳥接口 首先注冊一個快遞鳥賬號，選擇訂購物流查詢免費版應用，期間需要上傳身份證，還需要填寫技術人員信息，通通寫自己就好了，申請成功后，可以得到自己的API key和用戶ID
頁面
選擇(ze)后在 selectCompany 頁面的(de)js代碼里保存(cun)選擇(ze)的(de)快遞(di)公司代碼。即(ji) companyname 在搜索(suo)框中填入要(yao)搜索(suo)的(de)快遞(di)單(dan)號信(xin)息，用 exp 保存(cun) 即(ji)可獲得使用接口的(de)兩(liang)個參(can)數。這樣就(jiu)得到了使用接口的(de)兩(liang)個參(can)數，詳情(qing)看 快遞(di)鳥即(ji)時查詢api接口 的(de)使用
下面(mian)是具體的請求(qiu)參數
需要對請求的數據中的Datasign部分做以下處理
-
使用工具包util里的MD5函數進行加密運算
(util.md5(RequestData + 'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e'))
需要把請求的數據進行encodeURI()編碼，該函數可把字符串作為 URl 進行編碼。 -
使用util工具包中的Base64編碼算法對請求數據編碼成base64格式
Base64是當今比較流行的編碼方法，因為它編起來速度快而且簡單
好處: base64特別適合在http，協議下快速傳輸數據。 - 最后把數據內容簽名進行encodeURI編碼，請求數據準備好了
請求(qiu)的地址，數據，請求(qiu)頭的格式都(dou)在下(xia)面代碼里給(gei)出，這里不需(xu)要多說(shuo)
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: '//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],
})
})
}
})
}
},
復制代碼
|
數據(ju)請求成(cheng)功以后打印出 res.data
M -Model數據(ju) 模(mo)型
V -view 頁面 視圖
VM -ViewModel數據綁定到(dao)界面(mian)上 視(shi)圖模型層->模板{{}}
- 顯示在歷史記錄中.為了防止第一次從storage中取不到鍵為historys的歷史記錄，這樣子寫比較好 let list = wx.getStorageSync("historys")||[]; ,如果數組 list 為空或者已經不存在正在查詢的快遞單號，則添加 ，反之則不添加,存儲 this.setData({historyList: list}) 頁面重新渲染顯示
- 把當前快遞單號對應的快遞信息存儲到云數據庫上
- 跳轉到物流詳情頁面，顯示。
- 騰訊地圖接口使用 最終效果見下圖
Todetil頁(ye)面
但是在手機端確總有個bug，樣式里寫了z-index表示元素的堆疊順序，在手機端只出現地圖，不過這只是一個效果。騰訊地圖的接口需要在 騰訊地圖開放品臺注冊申(shen)請，使用API獲取當前(qian)地址經(jing)緯(wei)度(du)信息，利用逆地址查詢獲取當前(qian) 位置，這里(li)只是(shi)獲取地圖作(zuo)為(wei)背景圖片(pian)。可以看下我的源碼(ma)在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);
})
},
復制代碼
|
組件使用
這里(li)使(shi)用來對話(hua)框組件， 點擊 清楚歷史(shi)記錄 ，觸(chu)發對話(hua)框。
- 點擊對話框確定，全部清楚歷史記錄
- 點擊對話框取消，隱藏對話框，不清楚歷史記錄
- 組件Components使用首先在index.json中引入
{
"wxc-dialog": "/components/dialog/dialog"
}
復制代碼
-
對應search.wxml中使(shi)用的代碼(ma)
-
在search.wxml中引(yin)入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> 復制代碼
點(dian)擊確定，觸發search.js頁面的 bindconfirm="delectHistory" 事(shi)件(jian)，清(qing)除歷(li)史記錄并回顯頁面
頁面可(ke)以向組件傳遞props數據，讓組件在(zai)頁面顯示
組件(jian)可以負(fu)責與(yu)頁面調用部分的通信(xin)。
請求封裝的優化
在util包中封裝(zhuang) ，使(shi)用promise 返回promise對象，可以(yi)then操作 通用性的對wx.request封裝(zhuang)
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中的(de)(de)數(shu)(shu)據就是使用(yong)了util類中對request的(de)(de)封(feng)裝，可以實(shi)現多次調用(yong)，重復調用(yong)，實(shi)現了代(dai)碼的(de)(de)復用(yong)性。 getList()函數(shu)(shu)用(yong)于獲取數(shu)(shu)據
getList(type) {
this.setData({
isLoading: true,
hasMore: true
})
type === 'down' ? this.setData({ page: 0 }) : null;
util.$get('//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" })
})
},
復制代碼
|
當頁(ye)面(mian)(mian)請求數據到(dao)兩頁(ye)后，出現 查(cha)看全(quan)部(bu) 點擊(ji)跳(tiao)轉到(dao)另(ling)外(wai)一個(ge)頁(ye)面(mian)(mian)
查看全部 這(zhe)個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代(dai)碼
<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({
})
|
云(yun)(yun)(yun)(yun)函(han)(han)數使(shi)用(yong)， 這里使(shi)用(yong)了云(yun)(yun)(yun)(yun)函(han)(han)數，查詢數據庫集(ji)合(he)的(de)(de)符(fu)合(he)條(tiao)件(jian)的(de)(de)列(lie)表(biao)項并(bing)刪除，云(yun)(yun)(yun)(yun)函(han)(han)數確實較高的(de)(de)權限(xian)，直接對云(yun)(yun)(yun)(yun)數據庫進行修(xiu)改，云(yun)(yun)(yun)(yun)控制臺(tai)的(de)(de)權限(xian)同管理(li)端，擁有所有權限(xian)， 但是數云(yun)(yun)(yun)(yun)函(han)(han)數有點不太好(hao)的(de)(de)就是每次修(xiu)改都要上傳部署(shu)。后面項目更新會繼續使(shi)用(yong)云(yun)(yun)(yun)(yun)函(han)(han)數解決問題。
這里(li)只寫了主要(yao)的(de)常用的(de)快遞物流查詢，如(ru)下(xia)圖， 對(dui)于(yu)后面獲取(qu)的(de)數(shu)據的(de)處(chu)(chu)理(li)，因(yin)為獲取(qu)的(de)是倒敘的(de)數(shu)據，我(wo)先(xian)用 packageData() 處(chu)(chu)理(li)一下(xia)，把(ba)頁面需要(yao)的(de)單個(ge)數(shu)據或(huo)者列表整理(li)出來，存(cun)儲(chu)顯(xian)示。
結語
總結一下就是用快遞公司名字查找對應的編碼，快遞單號從用戶輸入或首頁點擊事件獲得，然后請求查詢，最后一個頁面是顯示的結果，還有路徑標注任務沒有完成，由于項目工程較大，只做了主要的一部分吧，關于組件封裝，方法調用還有，效果展示應該會有更多激動人心的效果，項目就玩到這吧，再慢慢學習，慢慢補充。
感謝各位讀者的閱讀，文章中如有錯誤或不妥之處，請不吝賜教。
你(ni)的(de)贊與(yu)肯定(ding)(ding)將會成為我代碼之路(lu)上的(de)一縷(lv)陽光，使我更(geng)加(jia)勇敢堅定(ding)(ding)的(de)往前走。
易優小程(cheng)序（企業版）+靈活api+前(qian)后代碼開源
碼云倉庫:
本文地址：//www.jinyoudianli.com/wxmini/doc/course/24987.html 復制鏈接
如需定(ding)制請聯系易優(you)客服咨(zi)詢：
