新手寫小程序并不簡單,這是我的第一次嘗試學(xué)習(xí)到了很多。最近雙十一過后,每天不是拿快遞就是去拿快遞的路上,翻開手機應(yīng)用里的菜鳥裹裹查看快遞是很方便的,當我在微信端搜索菜鳥裹裹小程序時,卻沒有發(fā)現(xiàn),于是便想自己動手仿app版寫一個菜鳥裹裹的小程序,對其中的快遞查詢物流跟蹤很有興趣。
使用的開發(fā)工具VScode和 微信開發(fā)者工具
平臺提供:微信公眾品臺|小程序,在該品臺注冊賬號獲取AppId,使用AppId登入微信開發(fā)者工具,開啟項目
使用的API文檔:微信小程序開發(fā)文檔, 微信小程序開發(fā)教程手冊文檔_w3c 詳細介紹了微信各種工具的使用Vant Weapp,提供了好多實用性的組件,我項目中搜索框使用了該組件庫的搜索組件weUI微信團隊的基礎(chǔ)樣式庫,
使用的接口:快遞鳥 接口 提供快遞單號和公司編碼可以查詢快遞的物流信息。騰訊地圖開放品臺提供了關(guān)于使用地圖,地圖顯示,標注/多邊形繪制,路線顯示這些功能的實現(xiàn)。
如下圖,總共四個頁面 復(fù)制代碼
<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">領(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'>進行中</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> 復(fù)制代碼 |
<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> 復(fù)制代碼 |
<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> 復(fù)制代碼 |
<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'>評價驛站 東華理工大學(xué)南區(qū)七棟菜鳥驛站</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ū)七棟菜鳥驛站完成取件,感謝使用菜鳥驛站,期待再次為您服務(wù)。</view> <text class='data-select'>我要退貨</text> <text class='data-select'>聯(lián)系賣家</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ū)七棟菜鳥驛站完成取件,感謝使用菜鳥驛站,期待再次為您服務(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'>運輸中</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ù)制代碼 |
這個頁面的功能是實現(xiàn)查詢已簽收的快遞的物流狀態(tài),而且簽收地固定了一下還有其他狀態(tài)比如運輸中,未發(fā)貨,快遞單號過期。為了把這個效果展現(xiàn)出來。這里沒有寫其他的頁面。 第一個數(shù)據(jù)detail-data 收 需要獲取用戶的收貨地址 第二個數(shù)據(jù) detail-data 已簽收可以送請求的數(shù)據(jù)中獲取使用
easy-mock + 小程序云開發(fā)數(shù)據(jù)庫使用
easy-mock可以實現(xiàn)高效偽造數(shù)據(jù) easy-mock
在上面注冊后可以創(chuàng)建一個接口,編輯接口可以添加數(shù)據(jù), 可以獲取接口的url,然后通過小程序的 wx.request(url) 獲取在easy-mock里的數(shù)據(jù),本例使用easy-mock構(gòu)建了首頁中 expressLists 的數(shù)據(jù)
{ "data": { expressList: [{ image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/yy.jpg?sign=b28732bd498113a8c88cfa634121a363&t=1542776282", text1: "【送歷年真題】,朱偉老師推薦!新東方201...", text2: "簽收時間:10-29 21:01", text3: "百世快遞:71220099817129", text4: "北京北京市--江西南昌", contentId: "001", }, { image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/lq.jpg?sign=82cc4a8eca681accf06dd4737f2422cc&t=1542776323", text1: "淘寶|運動護具籃球護指套艾弗森庫...", text2: "簽收時間:11-10 12:20", text3: "圓通快遞:802511355217367857", text4: "廣州廣州市--江西南昌", contentId: "002", }, { image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/css.jpg?sign=324ebd7e4e3203b2071cb7e0f24a0d2e&t=1542776355", text1: "天貓|CSS世界web前端開發(fā)CSS3+...", text2: "簽收時間:10-17 17:11", text3: "圓通快遞:802022497906214489", text4: "河南省新鄉(xiāng)市--江西南昌", contentId: "003", }, { image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/js.jpg?sign=d07ef9708724b5d20595923a16964fa8&t=1542776376", text1: "淘寶|二手包郵 你不知道的javaScri...", text2: "簽收時間:09-21 17:13", text3: "韻達快遞:3956570250807", text4: "河南洛陽--江西南昌", contentId: "004", } ] } } 復(fù)制代碼 |
利用云數(shù)據(jù)庫提供的圖片地址可以實現(xiàn)本地圖片url書寫。
整個查詢快遞的流程預(yù)覽
頁面
選擇后在 selectCompany 頁面的js代碼里保存選擇的快遞公司代碼。即 companyname 在搜索框中填入要搜索的快遞單號信息,用 exp 保存 即可獲得使用接口的兩個參數(shù)。這樣就得到了使用接口的兩個參數(shù),詳情看 快遞鳥即時查詢api接口 的使用
下面是具體的請求參數(shù)
請求的地址,數(shù)據(jù),請求頭的格式都在下面代碼里給出,這里不需要多說
var util = require('../../utils/util.js') const db = wx.cloud.database() const expresses = db.collection('expresses') const app = getApp() getExpressInfo:function(nu,cb){ //查物流 //快遞公司和,快遞單號 let companyname=wx.getStorageSync("codename")||"YTO"; let company = wx.getStorageSync("company") || "圓通快遞"; console.log(companyname); let exp=nu.currentTarget.dataset.name var logistics = [companyname,exp];//保存在一個數(shù)組中 this.setData({ ShipperCode:logistics[0], LogisticCode:logistics[1] }) //數(shù)據(jù)內(nèi)容 var RequestData = "{'OrderCode':'','ShipperCode':'" + logistics[0] + "','LogisticCode':'" + logistics[1] + "'}" //utf-8編碼的數(shù)據(jù)內(nèi)容 // OrderCode String 訂單編號 O // ShipperCode String 快遞公司編碼 R // LogisticCode String 物流單號 console.log(RequestData) var RequestDatautf = encodeURI(RequestData) console.log("RequestDatautf:" + RequestDatautf) //簽名 console.log(RequestData + 'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e') var DataSign = encodeURI(util.Base64((util.md5(RequestData + 'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e')))) console.log("DataSign:" + DataSign) if (logistics != null&&exp>999) { wx.request({ url: 'https://api.kdniao.com/Ebusiness/EbusinessOrderHandle.aspx', data: { //數(shù)據(jù)內(nèi)容(進行過url編碼) 'RequestData': RequestDatautf, //電商ID 'EBusinessID': '1399017', //請求指令類型:1002 'RequestType': '1002', //數(shù)據(jù)內(nèi)容簽名把(請求內(nèi)容(未編碼)+ApiKey)進行MD5加密,然后Base64編碼,最后進行URL(utf-8)編碼 'DataSign': DataSign, //請求、返回數(shù)據(jù)類型: 2-json; 'DataType': '2', }, header: { 'content-type': 'application/json' }, success:(res)=> { console.log(res) let list = wx.getStorageSync("historys")||[]; var item = { company: company, code: logistics[1] } if (list==null||list.length=== 0||list.every(res => { return res.code!==logistics[1] })) { list.push(item); } wx.setStorage({ key: 'historys', data: list, }) this.setData({ historyList: list }) this.setData({ delectHistory: "清楚歷史記錄", historyOrder: "歷史記錄" }) // this.setData({ mydata: res.data}) expresses.where({ code:exp }).count().then(res3=>{ if (res3.total == 0){ expresses.add({ data: { message: res.data, code: exp } }) } else { // wx.showToast({ // // title: '不能重復(fù)加' // }) } }) .then(res2 => { if(res.data.State>1) { wx.navigateTo({ url: '../Todetail/index', }) } wx.setStorage({ key: 'code', data: exp, }), wx.setStorage({ key: 'nowcompany', data: logistics[0], }) }) } }) } }, 復(fù)制代碼 |
數(shù)據(jù)請求成功以后打印出 res.data
成功后做以下操作 全是小程序MVVM的思想的體現(xiàn)M -Model數(shù)據(jù) 模型
V -view 頁面 視圖
VM -ViewModel數(shù)據(jù)綁定到界面上 視圖模型層->模板{{}}
Todetil頁面
但是在手機端確總有個bug,樣式里寫了z-index表示元素的堆疊順序,在手機端只出現(xiàn)地圖,不過這只是一個效果。騰訊地圖的接口需要在 騰訊地圖開放品臺注冊申請,使用API獲取當前地址經(jīng)緯度信息,利用逆地址查詢獲取當前 位置,這里只是獲取地圖作為背景圖片??梢钥聪挛业脑创a在github上面
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ù)制代碼 |
這里使用來對話框組件, 點擊 清楚歷史記錄 ,觸發(fā)對話框。
{ "wxc-dialog": "/components/dialog/dialog" } 復(fù)制代碼
對應(yīng)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> 復(fù)制代碼
onGotUserInfo(e) { this.triggerEvent('confirm', e) //向外傳遞 } 復(fù)制代碼
<button class="getUserInfo_btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">確定</button> 復(fù)制代碼
點擊確定,觸發(fā)search.js頁面的 bindconfirm="delectHistory" 事件,清除歷史記錄并回顯頁面
頁面可以向組件傳遞props數(shù)據(jù),讓組件在頁面顯示
組件可以負責與頁面調(diào)用部分的通信。
在util包中封裝 ,使用promise 返回promise對象,可以then操作 通用性的對wx.request封裝
const $get = (url, data = {}) => { //發(fā)送請求 return new Promise((resolve, reject) => { wx.request({ url: url, data: data, method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT // header: {}, // 設(shè)置請求的 header success: function (res) { resolve(res) }, fail: function () { reject() }, complete: function () { } }) }) } module.exports = { $get, } 復(fù)制代碼 |
首頁中請求easy-mock中的數(shù)據(jù)就是使用了util類中對request的封裝,可以實現(xiàn)多次調(diào)用,重復(fù)調(diào)用,實現(xiàn)了代碼的復(fù)用性。 getList()函數(shù)用于獲取數(shù)據(jù)
getList(type) { this.setData({ isLoading: true, hasMore: true }) type === 'down' ? this.setData({ page: 0 }) : null; util.$get('https://www.easy-mock.com/mock/5bca919de6742c1bf8220b50/example/express#!method=get', ).then(res => { if (res.statusCode == 200) { this.processData(type, res.data.data.expressList) } }).catch(e => { this.setData({ isLoading: true, hasMore: false }) wx.stopPullDownRefresh() wx.showToast({ title: `網(wǎng)絡(luò)錯誤!`, duration: 1000, icon: "none" }) }) }, 復(fù)制代碼 |
當頁面請求數(shù)據(jù)到兩頁后,出現(xiàn) 查看全部 點擊跳轉(zhuǎn)到另外一個頁面
查看全部 這個text的 出現(xiàn)
是onReachBottom()這個函數(shù)在起作用,每次到達頁面底部,檢查此時page的值,小于3,上拉刷新,負責停止刷新,把樣式改為bottomshow 在模型層就是把 bottomshow 的值改為 true<text class='{{bottomshow== true? "bottomshow":"hide"}}' bindtap='watchMore'>查看全部</text> 復(fù)制代碼
onReachBottom() { if (!this.data.isLoading) { // 防止數(shù)據(jù)還沒回來再次觸發(fā)加載 return; } if(this.data.page<=3){ this.getList('up') }else{ wx.stopPullDownRefresh() this.setData({ bottomshow:true }) } 復(fù)制代碼
樣式hide對用代碼 復(fù)制代碼
.hide{ display: none; } 復(fù)制代碼
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ù)制代碼 |
整個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ù)制代碼 |
復(fù)制代碼 var pages = getCurrentPages(); var Page = pages[pages.length - 1];//當前頁 var prevPage = pages[pages.length - 2]; //上一個頁面 var info = prevPage.data //取上頁data里的數(shù)據(jù)也可以修改 prevPage.setData({ src,company })//設(shè)置數(shù)據(jù) wx.navigateBack({ }) |
云函數(shù)使用, 這里使用了云函數(shù),查詢數(shù)據(jù)庫集合的符合條件的列表項并刪除,云函數(shù)確實較高的權(quán)限,直接對云數(shù)據(jù)庫進行修改,云控制臺的權(quán)限同管理端,擁有所有權(quán)限, 但是數(shù)云函數(shù)有點不太好的就是每次修改都要上傳部署。后面項目更新會繼續(xù)使用云函數(shù)解決問題。
這里只寫了主要的常用的快遞物流查詢,如下圖, 對于后面獲取的數(shù)據(jù)的處理,因為獲取的是倒敘的數(shù)據(jù),我先用 packageData() 處理一下,把頁面需要的單個數(shù)據(jù)或者列表整理出來,存儲顯示。
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)