1 后端交互时序图

2 不校验域名

如果我们没有备案好的域名的话，在开发过程中我们可开启不校验域名模式，等项目开发好后再到小程序后台配置合法的域名，

开启不校验域名的操作如下图所示。

3 点击小程序的功能

这里与小程序的具体业务有关，我们可以自己根据需求来添加，比如用户点击了某个按钮或者提交了某个表单之类的事件。

4 request请求

request请求，就是根据用户在小程序上提交的事件来向后端服务器发起请求，在小程序中用来发起http请求的可以使用wx.request()来完成。
注：在另一篇文章有讲解，这里就不复述了，链接

5 返回结果

后端服务器根据请求的类型向小程序返回请求结果，一般在开发的过程中，我们会以JSON作为返回结果的数据格式。

6 更新视图层

在wx.request()的success回调函数里，我们可以使用this.setData()将从后端服务器上返回的结果更新到视图层（WXML）
这里需要注意的一点：
直接在success回调函数里使用this.setData()是会报错的，因为此时的this指针指向的是success回调函数，而不是Page()，所以我们可以在发起wx.request之前，把this赋值给一个新的变量，如下图所示。

7 使用案例

注：笔者这里使用的是一个开放的图片推荐的API来作为后端处理请求
API地址：https://api.apiopen.top/getImages
请求方式：POST
请求数据：page（字符串型），count（字符串型）

说明：通过小程序的刷新按钮来向后端服务器发起刷新图片的请求，后端接受到刷新请求后向小程序的JS文件返回请求结果，JS文件正确接收到结果后再将新的内容通过this.setData()更新到视图层（WXML），该案例的效果如下图所示。

7.1 WXML文件

<view class="image_box">  <view class="image_list" wx:for="{{data}}">    <image src="{{item.img}}"  mode="aspectFill" binderror="imgerror">    </image>  </view></view><button bindtap='getImages' type='primary'>刷新</button>

7.2 WXSS文件

.image_box {  width: 100%;  height: 480rpx;  overflow: hidden;  padding: 60rpx;  white-space: nowrap;}.image_list {  width: 800rpx;  height: auto;  display: inline-block;}image {  border-radius: 40rpx;}

7.3 JS文件

//获取应用实例const app = getApp()Page({  data: {},  // 监听页面加载  onLoad: function () {    this.getImages()  },  // 不能正确加载的图片再次请求加载  imgerror: function (res) {    wx.showToast({      title: '稍等',      icon: 'loading',      duration: 2000    })    this.getImages()  },  // 通过API请求图片资源  getImages() {    var seft = this    wx.request({      // 向后发起请求的地址      url: 'https://api.apiopen.top/getImages',      // 请求的数据      data: {        page: '',        count: '1'      },      // 设置请求头，GET请求的话可以省略此项      header: {        'content-type': 'application/x-www-form-urlencoded'      },      // 请求的方式      method: 'POST',      dataType: 'json',      responseType: 'text',      // 请求成功的回调函数      success: function (res) {        var data = res.data.result      // 将请求的结果更新到视图层        seft.setData({          data: data        });      }    })  }})