完成用戶授權登錄邏輯後，接下來的開發工作大部分都是與後臺 api 接口的交互，本節我們詳細講解一下小程序如何與 api 進行交互 。
小程序如何發送 http/https 請求到後臺？
小程序請求 http/https 使用 wx.request() 方法，request 的示例如下：
wx.request({
url: 'test',
data: {
},
header: {
'content-type': 'application/json'
},
success (res) {
console.log(res.data)
}
})
這裏 url 即請求的 api 接口地址 ，data 即傳遞的參數 ，header 設置請求類型 ，success 調用成功返回 res ，而api接口返回的數據存放在 res.data 中 。
data 說明：
最終發送給服務器的數據是 String 類型，如果傳入的 data 不是 String 類型，會被轉換成 String 。
header 的 content-type 類型有兩種 ：
application/x-www-form-urlencoded 和 application/json
對於 POST 方法且 header[‘content-type’] 爲 application/json 的數據，會對數據進行 JSON 序列化 ， 以 json 形式傳遞到後臺 api ，後臺 api 接收數據是接收的是 json 數據 。
對於 POST 方法且 header[‘content-type’] 爲 application/x-www-form-urlencoded 的數據，是以表單形式傳遞到後臺 api ，後臺 api 接收數據將接收具體的請求 form 表單參數 。
小程序使用 wx.request() 獲取報修列表數據
獲取報修列表數據的代碼如下：
getrepairList:function(e){
let that = this
wx.request({
url: app.serverUrl + 'api/v1/repair/list/' + that.data.page + "/" + that.data.pageSize,
data: {
openid: app.globalData.openid
},
header: {
'content-type': 'application/json' // 默認值
},
success: function (res) {
console.log(res.data)
if (that.data.page == 1) {
that.setData({
repairList: [],
})
}
var repairList = that.data.repairList
for (var i = 0; i < res.data.list.length; i++) {
repairList.push(res.data.list[i])
}
that.setData({
repairList: repairList
});
if (res.data.list.length >=that.data.pageSize) {
that.data.page++;
that.setData({
hasNextPage: true,
loadMoreText: "加載中..."
})
} else {
that.setData({
hasNextPage: false,
loadMoreText: "我是有底線的"
})
}
wx.stopPullDownRefresh() //停止下拉刷新
}
})
},
詳細解釋：
1、 wx.request() 傳遞參數爲 openid ，header 的 ‘content-type’: ‘application/json’ ，調用成功則後臺 api 返回的是分頁的 json 格式數據 。
2、wx.request() 調用接口成功後 ，success 方法中使用了分頁顯示的邏輯 ，若當前頁數 page=1 則，首先清空 repairList 數組，然後將請求到的數組數據 push 到 repairList ，若當前頁數 page 大於 1 ，則在 repairList 直接追加數據 。
3、加載更多處理：判斷 api 返回的數組長度是否大於每頁請求數，這裏我們的 pageSize =10 ，即 res.data.list.length >=that.data.pageSize ,認爲是存在下一頁 ，當前 page+1 ，同時設置頁面最底部顯示“加載中”字樣，若 res.data.list.length < that.data.pageSize , 認爲是到達了最後一頁 ，頁面最底部顯示“我是有底線的” ，同時 hasNextPage: false, 用戶上滑動頁面將不再請求 api 數據 。
if (res.data.list.length >=that.data.pageSize) {
that.data.page++;
that.setData({
hasNextPage: true,
loadMoreText: "加載中..."
})
} else {
that.setData({
hasNextPage: false,
loadMoreText: "我是有底線的"
})
}
wx.stopPullDownRefresh() //停止下拉刷新
下來刷新、加載更多的代碼如下：
/**
* 頁面相關事件處理函數--監聽用戶下拉動作
*/
onPullDownRefresh: function () {
this.setData({
page: 1
})
this.getrepairList()
},
/**
* 頁面上拉觸底事件的處理函數
*/
onReachBottom: function () {
if (this.data.hasNextPage == true) {
this.getrepairList()
}
},
在微信小程序中，下拉刷新、加載更多的操作實現起來很簡單 ，但是必須掌握， 在 android 和 ios 開發中，很多同學學習下拉刷新、加載更多都無從下手 ，使用的第三方代碼庫也是參差不齊 。
這一點我認爲小程序開發爲大家節省了很多時間 。
後臺 api 接口如何接收參數？如何返回 json ？
路由的使用我們之前已經講過，這裏不再講解 ，不理解的同學前往歷史文章中查看 。
獲取小程序提交的參數，這裏使用 request.args.get() 方法獲取，若小程序發送的form表單參數，則使用 request.form.get() 方法獲取 ，注意理解這兩種接收參數的形式 ，在與其人合作開發的時候 ，按照要求使用 。
openid = request.args.get("openid")
paginate 是 flask_sqlalchemy 自帶的分頁查詢，使用十分方便 ，但這裏有個重要的參數是 error_out ，若不設置這個參數會出現調用接口返回 404 的情況，下面先看一下 api 接口詳細的實現代碼 ：
@api.route("/v1/repair/list/<int:page>/<int:per_page>", methods=['GET', 'POST'])
def repairList(page, per_page):
openid = request.args.get("openid")
dataw = RepairServiceSheet.query.filter(RepairServiceSheet.openid == openid).order_by(
RepairServiceSheet.id.desc()).paginate(page, per_page=per_page, error_out=False)
jsonData = []
for pet in dataw.items:
repairDate = ''
if pet.repairDate is not None:
repairDate = pet.repairDate.strftime('%Y-%m-%d %Z %H:%M:%S')
o = {'openid': pet.openid, 'id': pet.id, "address": pet.address, "description": pet.description,
"applicantName": pet.applicantName, "remarks": pet.remarks, "mobile": pet.mobile, "type": pet.type,
"imageUrl": pet.imageUrl, "radioUrl": pet.radioUrl, "repairDate": repairDate}
jsonData.append(o)
p = {'page': dataw.page, "list": jsonData}
return jsonify(p)
當分頁查詢報修記錄，所查詢頁數據爲空，接口會返回 404 ，這樣對於前段來說是不友好的，小程序代碼會報錯，截圖如下：
如何解決這個問題呢？只需要在 paginate 加上 error_out=False 即可
原始代碼
dataw = RepairServiceSheet.query.filter(RepairServiceSheet.openid == openid).order_by(
RepairServiceSheet.id.desc()).paginate(page, per_page=per_page)
修改後的代碼
dataw = RepairServiceSheet.query.filter(RepairServiceSheet.openid == openid).order_by(
RepairServiceSheet.id.desc()).paginate(page, per_page=per_page, error_out=False)
詳細解釋：
在 flask_sqlalchemy 的分頁查詢中 ，paginate 函數有一下四個參數
page=None, 表示頁數
per_page=None, 表示每頁顯示的記錄條數
error_out=True, 默認爲True ，若不傳error_out則爲True ，在下面情況下返回404
找不到任何項目,並且page不是1
page小於1,或者per_page爲負數
page或per_page不是整數
page大於總頁數
max_per_page=None ，表示每頁顯示的最大記錄條數
通過以上的講解，我們知道爲了解決接口 404 錯誤的問題 ，爲paginate函數添加了第三個參數error_out並設置爲False。
總結：
本文我們以微信小程序請求報修數據列表api接口爲例，講解了小程序如何發起請求、如何對數據進行分頁處理，flask後臺如何編寫api，如何接收參數，如何處理404錯誤的問題 。通過學習，你應該能夠獨立編寫一個這樣一個流程功能 ，包括小程序端和後臺api接口。
對此，你有什麼疑問？歡迎加我個人微信 study2100 或掃碼關注微信公衆號與我一起交流！
