小程序学习笔记-6：数据加载（接口）

上一篇：小程序学习笔记-5：数据绑定（假数据）

---

本篇内容
* 调用接口完成数据加载
* 增加加载过程界面体现（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：数据绑定（假数据）学习的数据绑定，将获取到的数据渲染到页面上。

...

   
       
           
           {{item.title}}
       
   

...

• 增加加载过程界面体现（loading）

在调用接口前调用 wx.showLoading({ title: '拼命加载中...' })
在获取到数据后(或获取数据失败时)调用 wx.hideLoading() 关闭loading提示框

loading提示框

总结：

本篇学习记录了微信小程序中调用接口加载数据的过程。

参考：

微信小程序官方文档-API

---

下一篇：小程序学习笔记-7（封装API模块）(https://www.jianshu.com/p/5fffd73243f5)