大家好，我叫小禿僧
這次分享的是10分鍾零基礎學會做一個快遞查詢微信小程序，快速掌握開發微信小程序技能。
這篇文章偏基礎，特別適合還沒有開發過微信小程序的童鞋，一些概念和邏輯我會講細一點，盡可能用圖說明更清楚。分享快樂！
學完這篇，起碼學會以下幾點
- 了解微信開發者工具和雲開發代碼目錄
- 輪播圖的實現
- 使用wx.request去請求數據
- 使用vantUI組件
- 學會開通並使用雲開發提供的cms數據管理后台
- 從編寫代碼到上線一個微信小程序的全過程。
先看看效果：
看完快遞查詢微信小程序的效果之后，為了更好地理解和學習，我們先來了解一下微信開發者工具和雲開發目錄，用2張圖來理解，比較直觀
微信開發者工具大概如下：
雲開發代碼目錄大概如下：
cloudfunction是存放雲函數的文件，每個雲函數都有一個index.js，這個index.js就是寫代碼的文件，其他文件可以不用管。
page文件是存放頁面文件的，圖中的index就是一個頁面文件，這個頁面文件是由index.js、index.json、index.wxml、index.wxss四個文件組成。很好理解
那js、json、wxml、wxss這四個是怎么互相通信的呢？來，畫一張圖給大家看，就明白了
這是wxml的部分代碼，看看wxml與js、wxss的關系：
可以理解為用class來綁定wxss里面的樣式，用catchtap來綁定js里面的函數，還可以用bindtap來綁定js里面的函數，catchtap和bindtap的區別主要是catchtap可以防止冒泡事件！
篇幅有限，這篇文章就不具體講雲函數和冒泡事件的相關知識了，不懂這兩個知識點也不會影響快遞查詢微信小程序的開發。往后慢慢講。
好了，正式進入快遞查詢微信小程序學習。
@
1、輪播圖
1.1、圖解實現輪播圖的業務邏輯
由上圖可知，一進入小程序就要獲取數據庫banner表的輪播圖，對吧，那么我們肯定首先得有banner這個數據庫表，還要banner表里有幾張輪播圖。
那如何在數據庫里建立banner表和上傳輪播圖到banner表里呢？
雲開發已經替我們想好了，提供給我們一個很好用的cms管理后台。我們開通並使用即可，如何開通使用呢？繼續
點擊微信開發者工具的左上角“雲開發”進入雲開發控制台，再點擊“更多”，選擇“內容管理”，點擊開通，設置賬號密碼后，等待幾分鍾即可。
開通成功后，會有一個網址，復制這個網址到瀏覽器訪問，如下圖
輸入剛剛自己設置好的賬號密碼，登錄進去，然后創建一個后台數據管理的項目，步驟如下圖：
點擊進來后，開始創建banner數據庫表
創建banner數據庫表成功如下圖：
創建img字段，用來存放輪播圖的網絡地址，如下圖：
創建img字段成功后，開始上傳輪播圖，如下圖：
點擊內容集合，再點擊新建，然后上傳即可，就完成了一張輪播圖的上傳，可以繼續上傳第二張、第三張........
這個完成就意味着我們的雲數據庫有了輪播圖，就是banner數據庫表里存放了輪播圖，但此時，我們需要再去更改banner數據庫表的訪問權限即可，因為數據庫表默認是不給任何用戶獲取訪問的，如下圖：
選擇“所有用戶可讀，僅創建者可讀寫”的意思就是微信所有用戶都可以獲取訪問輪播圖的意思。
到這里，輪播圖我們有了，開始寫代碼獲取和展示。
我們首先在app.json文件里面我們定義了一進來顯示的頁面是index，因為排在第一個
一進入微信小程序，我們就要立馬去獲取輪播圖回來進行展示，對吧，那我們怎么樣才能一進來就開始執行獲取輪播圖的代碼呢，我們可以在index頁面的onLoad()這個生命周期函數里編寫我們獲取輪播圖的代碼。
這里引入了一個生命周期函數概念，生命周期函數簡單來理解就是在某個時間點自動執行的一個函數而已，這么理解就可以了。
onLoad()函數就是一進來微信小程序頁面自動執行且只執行一次的一個生命周期函數。所以，我們就在onLoad()函數里調用獲取輪播圖的函數。
你會發現其實我們沒有把獲取輪播圖的業務邏輯代碼直接寫在onLoad函數，而是只在onload()函數里調用get_banner()函數
調用的意思就是去執行的意思，調用哪個函數的意思就是去執行哪個函數。
所以，我們只需要把代碼寫在get_banner()函數里面，僅僅在onLoad()生命周期函數里去調用get_banner就可以實現獲取輪播圖的功能了，對吧。
非常簡單！！！繼續
1.2、寫獲取輪播圖的JavaScript代碼
/**
* 頁面的初始數據
*/
data: {
banner:[],
num:'',
steps:[],
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
//一進入頁面就獲取輪播圖數據
//定義一個獲取輪播圖的get_banner函數
this.get_banner()
},
//獲取輪播圖
get_banner(){
//這個this指向的是Page()方法里面的整個對象，形如Page({this})
//賦值給that，that也指向了同樣的對象
let that = this
db.collection('banner').get({
success:function(res){
//獲取成功
//通過setData()方法賦值給data里面的banner數組
console.log(res)
that.setData({
banner:res.data
})
},
fail(er){
console.log('獲取失敗，所以執行fail函數了，也就是打印了我這句話')
}
})
},
我們在頁面的data對象里面定義了一個banner空數組，獲取輪播圖后，通過setData()方法賦值給data里面的banner數組，此時，banner是有值了，可以用來展示了，繼續往下看如何展示？
1.3、寫展示輪播圖的wxml、wxss代碼
wxml（使用官方的
<!--輪播圖-->
<swiper class="banner" indicator-dots autoplay indicator-active-color="#fbbd08" circular>
<block wx:for="{{banner}}" wx:key="index">
<swiper-item>
<image lazy-load src="{{item.img}}" class="banner_image" />
</swiper-item>
</block>
</swiper>
我們通過使用wx:for循環，把js文件里面的banner數組遍歷出來即可。
wxss(定義輪播圖樣式，比如寬、高)：
.banner {
width: 100%;
display: flex;
box-sizing: border-box;
height: 350rpx;
}
.banner_image {
width: 100%;
display: flex;
box-sizing: border-box;
height: 500rpx;
}
2、請求快遞查詢的數據接口
2.1、申請極速數據的快遞查詢接口
我們先申請極速數據的快遞查詢接口，
申請數據的官方網站：https://www.jisuapi.com/
自己按照官方提示去注冊登錄，然后申請數據就行，這個不難！
申請數據后，我們需要登錄微信公眾平台，選擇微信小程序登錄，配置一下服務器請求域名，就是把極速數據的接口域名（https://api.jisuapi.com）放進去即可，如下圖：
點擊開發管理，再點擊開發設置，再點擊服務器域名修改，添加request域名即可，就是把https://api.jisuapi.com放入即可。
2.2、圖解查詢快遞的業務邏輯
2.3、寫請求數據的JavaScript代碼
我們需要把快遞單號傳給極速數據，那我們需要先獲取用戶輸入的快遞單號，對吧，所以定義一個getnumInput()函數來獲取用戶輸入的快遞單號
//獲取用戶輸入的快遞單號
getnumInput:function(e){
let that = this;
that.setData({
num:e.detail.value,
})
},
只要用戶輸入，就會觸發執行getnumInput函數，我們通過setData()方法把用戶輸入的快遞單號賦值給data對象里面的num變量，保存起來
輸入完成后，用戶點擊查詢，會觸發執行chaxun()函數，去請求數據
//查詢函數
chaxun:function(){
let that = this;
wx.showLoading({
title: '正在查詢',
})
wx.request({
url: 'https://api.jisuapi.com/express/query',
data:{
type:'auto',
number:that.data.num,
appkey:'ef1e557c16514d', //填入自己極速數據的appkey
},
success:function(res){
//使用console.log()方法把接口返回來的數據res打印在下面，看看是什么類型的數據
console.log(res)
//定義一個arr數組，處理數組，讓數組變成vantUI的steps能接受的數組格式
let arr = []
for(let i = 0;i<res.data.result.list.length;i++){
let obj = {}
obj.text = res.data.result.list[i].status
obj.desc = res.data.result.list[i].time
arr.push(obj)
}
//打印查看處理是否正確,正確即可賦值
console.log(arr)
that.setData({
steps:arr
})
wx.hideLoading();
},
fail(er){
console.log(er)
}
})
},
2.4、寫展示數據的wxml代碼
展示快遞物流情況，我們懶得寫wxss樣式了，可以直接使用第三方寫好的UI組件樣式，這里我們使用了vantUI組件，具體怎么使用vantUI呢？
首先，我們先在app.json文件里面引入我們需要vantUI的vant-steps組件，如下圖：
"usingComponents": {
"van-steps": "vant/steps/index"
},
這里我們只用到了vant-steps組件，所以我們只需引入vant-steps組件，然后在index.wxml里面使用即可
<!--使用vantUI的van-steps組件簡單實現快遞情況-->
<van-steps
steps="{{ steps }}"
direction="vertical"
active-color="#ee0a24"
/>
這個是vantUI官方提供給我們的組件固定寫法，我們只需要按需更改vant-steps組件里面的參數即可。
官方有很多參數說明，大家可以看看：
官方組件的使用說明文檔是這個網址（https://vant-contrib.gitee.io/vant-weapp/#/steps）
代碼寫完了，該如何上線微信小程序呢？ 首先點擊微信開發者工具的右上角“上傳”，然后按照提示輸入信息上傳即可，
上傳成功后，登錄微信公眾平台，在“版本管理”的開發版提交審核，審核通過后點擊發布即可使用。具體可以按照官方的提示操作即可，識字就行，非常簡單哈。
3、總結
到這里，代碼基本編寫完成了哈，需要源碼學習可以點擊這里獲取
這期分享主要是講解簡易版的快遞查詢，如果想要豐富一點的界面和功能，可以學完這期知識后，自己去進行二次開發就行。
歡迎關注【小禿僧】微信公眾號，回復“雲開發訓練營”領取進階教程哦！學完這篇，大家再去看這個訓練營就更加容易理解了！
end
專注前端開發，擅長微信小程序開發。歡迎關注微信公眾號：小禿僧