上一篇：小程序?qū)W習(xí)筆記-5：數(shù)據(jù)綁定（假數(shù)據(jù)）
本篇內(nèi)容
* 調(diào)用接口完成數(shù)據(jù)加載
* 增加加載過(guò)程界面體現(xiàn)（loading）
-
wx.request調(diào)用接口
（如果接口調(diào)不了也可以用Mock數(shù)據(jù)進(jìn)行測(cè)試茁肠，指路→小程序中使用Mock數(shù)據(jù)）
wx.request可以發(fā)起https網(wǎng)絡(luò)請(qǐng)求证膨。
1. 設(shè)置通信域名
在使用前需要注意，每個(gè)微信小程序需要事先設(shè)置通訊域名锈玉，小程序只可以跟指定的域名進(jìn)行網(wǎng)絡(luò)通信逛拱。但在開(kāi)發(fā)階段适室，可以在微信開(kāi)發(fā)者工具中臨時(shí)開(kāi)啟“開(kāi)發(fā)環(huán)境不校驗(yàn)請(qǐng)求域名屁魏、TLS版本及HTTPS證書(shū)”選項(xiàng)怎茫。
ps.如果使用Mock數(shù)據(jù)昨悼，請(qǐng)求被攔截蝗锥，實(shí)際上并沒(méi)有發(fā)出請(qǐng)求，所以這里不涉及小程序的請(qǐng)求校驗(yàn)率触。
2. 請(qǐng)求接口數(shù)據(jù)
//pages/board/board.js
Page({
data: {
nbTitle: '榜單',
top250:[]
},
onLoad() {
let _this = this;
wx.request({
url: 'https://xxx.com/xxx',
success:function(res){
console.log('https://xxx.com/xxx',res);
_this.setData({
top250: res.subjects
})
}
})
}
})
3. 渲染數(shù)據(jù)
通過(guò)小程序?qū)W習(xí)筆記-5：數(shù)據(jù)綁定（假數(shù)據(jù)）學(xué)習(xí)的數(shù)據(jù)綁定终议，將獲取到的數(shù)據(jù)渲染到頁(yè)面上。
<!-- pages/board/board.wxml -->
...
<block wx:for="{{ top250 }}">
<navigator url="../item/item?id={{ item.id }}">
<view class="scroll-item">
<image src="{{item.images.small}}" mode="widthFix"></image>
<text>{{item.title}}</text>
</view>
</navigator>
</block>
...
-
增加加載過(guò)程界面體現(xiàn)（loading）
在調(diào)用接口前調(diào)用 wx.showLoading({ title: '拼命加載中...' })
在獲取到數(shù)據(jù)后(或獲取數(shù)據(jù)失敗時(shí))調(diào)用 wx.hideLoading() 關(guān)閉loading提示框
總結(jié)：
本篇學(xué)習(xí)記錄了微信小程序中調(diào)用接口加載數(shù)據(jù)的過(guò)程葱蝗。
參考：
下一篇：小程序?qū)W習(xí)筆記-7（封裝API模塊）(http://www.reibang.com/p/5fffd73243f5)
