小程序与后端交互

目录

1 后端交互时序图 

2 不校验域名

3 点击小程序的功能

4 request请求

 5 返回结果

 6 更新视图层

 7 使用案例

 7.1 WXML文件

7.2 WXSS文件

7.3 JS文件

8 GitHub地址

 

---

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
        });
      }
    })
  }
})

8 GitHub地址

https://github.com/lwqbrell/wechat-images