【雲開發】10分鐘零基礎學會做一個快遞查詢微信小程式，快速掌握微信小程式開發技能（輪播圖、API請求）
大家好，我叫小禿僧
這次分享的是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
專注前端開發，擅長微信小程式開發。歡迎關注微信公眾號：小禿僧