微信小程序如何与后台api接口进行数据交互（微信报修小程序源码讲解七）

原创

热心的程序员

修改于 2020-04-03 10:46:52

15.4K2

修改于 2020-04-03 10:46:52

文章被收录于专栏：编程之路编程之路

完成用户授权登录逻辑后，接下来的开发工作大部分都是与后台 api 接口的交互，本节我们详细讲解一下小程序如何与 api 进行交互。

小程序如何发送 http/https 请求到后台？

小程序请求 http/https 使用 wx.request() 方法，request 的示例如下：

wx.request({
  url: 'test', 
  data: {
  },
  header: {
    'content-type': 'application/json' 
  },
  success (res) {
    console.log(res.data)
  }
})

这里 url 即请求的 api 接口地址，data 即传递的参数，header 设置请求类型，success 调用成功返回 res ，而api接口返回的数据存放在 res.data 中。

data 说明：

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。

header 的 content-type 类型有两种：

application/x-www-form-urlencoded 和 application/json

对于 POST 方法且 header'content-type' 为 application/json 的数据，会对数据进行 JSON 序列化，以 json 形式传递到后台 api ，后台 api 接收数据是接收的是 json 数据。

对于 POST 方法且 header'content-type' 为 application/x-www-form-urlencoded 的数据，是以表单形式传递到后台 api ，后台 api 接收数据将接收具体的请求 form 表单参数。

小程序使用 wx.request() 获取报修列表数据

获取报修列表数据的代码如下：

getrepairList:function(e){
    let that = this
    wx.request({
      url: app.serverUrl + 'api/v1/repair/list/' + that.data.page + "/" + that.data.pageSize,
      data: {
        openid: app.globalData.openid
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res.data)
        if (that.data.page == 1) {
          that.setData({
            repairList: [],
          })
        }
        var repairList = that.data.repairList
        for (var i = 0; i < res.data.list.length; i++) {
          repairList.push(res.data.list[i])
        }
        that.setData({
          repairList: repairList
        });
        if (res.data.list.length >=that.data.pageSize) {
          that.data.page++;
          that.setData({
            hasNextPage: true,
            loadMoreText: "加载中..."
          })
        } else {
          that.setData({
            hasNextPage: false,
            loadMoreText: "我是有底线的"
          })
        }
        wx.stopPullDownRefresh() //停止下拉刷新
      }
    })
  },

详细解释：

1、 wx.request() 传递参数为 openid ，header 的 'content-type': 'application/json' ，调用成功则后台 api 返回的是分页的 json 格式数据。

2、wx.request() 调用接口成功后，success 方法中使用了分页显示的逻辑，若当前页数 page=1 则，首先清空 repairList 数组，然后将请求到的数组数据 push 到 repairList ，若当前页数 page 大于 1 ，则在 repairList 直接追加数据。

3、加载更多处理：判断 api 返回的数组长度是否大于每页请求数，这里我们的 pageSize =10 ，即 res.data.list.length >=that.data.pageSize ,认为是存在下一页，当前 page+1 ，同时设置页面最底部显示“加载中”字样，若 res.data.list.length < that.data.pageSize , 认为是到达了最后一页，页面最底部显示“我是有底线的” ，同时 hasNextPage: false, 用户上滑动页面将不再请求 api 数据。

   if (res.data.list.length >=that.data.pageSize) {
          that.data.page++;
          that.setData({
            hasNextPage: true,
            loadMoreText: "加载中..."
          })
        } else {
          that.setData({
            hasNextPage: false,
            loadMoreText: "我是有底线的"
          })
        }
        wx.stopPullDownRefresh() //停止下拉刷新

下来刷新、加载更多的代码如下：

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.setData({
      page: 1
    })
    this.getrepairList()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.data.hasNextPage == true) {
      this.getrepairList()
    }
  },

在微信小程序中，下拉刷新、加载更多的操作实现起来很简单，但是必须掌握，在 android 和 ios 开发中，很多同学学习下拉刷新、加载更多都无从下手，使用的第三方代码库也是参差不齐。

这一点我认为小程序开发为大家节省了很多时间。

后台 api 接口如何接收参数？如何返回 json ？

路由的使用我们之前已经讲过，这里不再讲解，不理解的同学前往历史文章中查看。

获取小程序提交的参数，这里使用 request.args.get() 方法获取，若小程序发送的form表单参数，则使用 request.form.get() 方法获取，注意理解这两种接收参数的形式，在与其人合作开发的时候，按照要求使用。

    openid = request.args.get("openid")

paginate 是 flask_sqlalchemy 自带的分页查询，使用十分方便，但这里有个重要的参数是 error_out ，若不设置这个参数会出现调用接口返回 404 的情况，下面先看一下 api 接口详细的实现代码：

@api.route("/v1/repair/list/<int:page>/<int:per_page>", methods=['GET', 'POST'])
def repairList(page, per_page):
    openid = request.args.get("openid")
    dataw = RepairServiceSheet.query.filter(RepairServiceSheet.openid == openid).order_by(
        RepairServiceSheet.id.desc()).paginate(page, per_page=per_page, error_out=False)
    jsonData = []
    for pet in dataw.items:
        repairDate = ''
        if pet.repairDate is not None:
            repairDate = pet.repairDate.strftime('%Y-%m-%d %Z %H:%M:%S')
        o = {'openid': pet.openid, 'id': pet.id, "address": pet.address, "description": pet.description,
             "applicantName": pet.applicantName, "remarks": pet.remarks, "mobile": pet.mobile, "type": pet.type,
             "imageUrl": pet.imageUrl, "radioUrl": pet.radioUrl, "repairDate": repairDate}
        jsonData.append(o)
    p = {'page': dataw.page, "list": jsonData}
    return jsonify(p)

当分页查询报修记录，所查询页数据为空，接口会返回 404 ，这样对于前段来说是不友好的，小程序代码会报错，截图如下：

如何解决这个问题呢？只需要在 paginate 加上 error_out=False 即可

原始代码

 dataw = RepairServiceSheet.query.filter(RepairServiceSheet.openid == openid).order_by(
        RepairServiceSheet.id.desc()).paginate(page, per_page=per_page)

修改后的代码

 dataw = RepairServiceSheet.query.filter(RepairServiceSheet.openid == openid).order_by(
        RepairServiceSheet.id.desc()).paginate(page, per_page=per_page, error_out=False)

详细解释：

在 flask_sqlalchemy 的分页查询中，paginate 函数有一下四个参数

page=None,  表示页数
per_page=None,  表示每页显示的记录条数
error_out=True,  默认为True ，若不传error_out则为True ，在下面情况下返回404 
    找不到任何项目,并且page不是1
    page小于1,或者per_page为负数
    page或per_page不是整数
    page大于总页数
max_per_page=None ，表示每页显示的最大记录条数

通过以上的讲解，我们知道为了解决接口 404 错误的问题，为paginate函数添加了第三个参数error_out并设置为False。