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

您所在的位置:网站首页 接口返回的参数 微信小程序如何与后台api接口进行数据交互(微信报修小程序源码讲解七)

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

2023-05-05 12:57| 来源: 网络整理| 查看: 265

完成用户授权登录逻辑后,接下来的开发工作大部分都是与后台 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//", 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。

总结:

本文我们以微信小程序请求报修数据列表api接口为例,讲解了小程序如何发起请求、如何对数据进行分页处理,flask后台如何编写api,如何接收参数,如何处理404错误的问题 。通过学习,你应该能够独立编写一个这样一个流程功能 ,包括小程序端和后台api接口。

对此,你有什么疑问?



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3