本篇内容
* 调用接口完成数据加载
* 增加加载过程界面体现（loading）
-
wx.request调用接口
（如果接口调不了也可以用Mock数据进行测试，指路→小程序中使用Mock数据）
wx.request可以发起https网络请求。
1. 设置通信域名
在使用前需要注意，每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。但在开发阶段，可以在微信开发者工具中临时开启“开发环境不校验请求域名、TLS版本及HTTPS证书”选项。
微信开发者工具设置不校验域名（版本 stable v1.02）
ps.如果使用Mock数据，请求被拦截，实际上并没有发出请求，所以这里不涉及小程序的请求校验。
2. 请求接口数据
//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. 渲染数据
通过小程序学习笔记-5：数据绑定（假数据）学习的数据绑定，将获取到的数据渲染到页面上。
<!-- 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>
...
-
增加加载过程界面体现（loading）
在调用接口前调用 wx.showLoading({ title: '拼命加载中...' })
在获取到数据后(或获取数据失败时)调用 wx.hideLoading() 关闭loading提示框
loading提示框
总结：
本篇学习记录了微信小程序中调用接口加载数据的过程。
参考：
下一篇：小程序学习笔记-7（封装API模块）(https://www.jianshu.com/p/5fffd73243f5)
