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 = thiswx.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});}})}
})