小程序与后台 api接口数据交互详解(微信报修小程序源码讲解七)
完成用户授权登录逻辑后,接下来的开发工作大部分都是与后台 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 = thiswx.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.repairListfor (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不是1page小于1,或者per_page为负数page或per_page不是整数page大于总页数
max_per_page=None ,表示每页显示的最大记录条数
通过以上的讲解,我们知道为了解决接口 404 错误的问题 ,为paginate函数添加了第三个参数error_out并设置为False。
总结:
本文我们以微信小程序请求报修数据列表api接口为例,讲解了小程序如何发起请求、如何对数据进行分页处理,flask后台如何编写api,如何接收参数,如何处理404错误的问题 。通过学习,你应该能够独立编写一个这样一个流程功能 ,包括小程序端和后台api接口。
对此,你有什么疑问?欢迎加我个人微信 study2100 或扫码关注微信公众号与我一起交流!
小程序与后台 api接口数据交互详解(微信报修小程序源码讲解七)相关推荐
- 后台接收数组_微信小程序如何与后台api接口进行数据交互(微信报修小程序源码讲解七)...
完成用户授权登录逻辑后,接下来的开发工作大部分都是与后台 api 接口的交互,本节我们详细讲解一下小程序如何与 api 进行交互 . 小程序如何发送 http/https 请求到后台? 小程序请求 h ...
- 《微信小程序开发》 页面导航最强详解 | 如何对小程序页面进行跳转?
<微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 文章目录 <微信小程序开发> 页面导航最强详解 | 如何对小程序页面进行跳转? 一.微信小程序导航 二.命 ...
- PHP支付接口教程,详解微信支付(二)
PC扫码支付 扫码支付首先是要分清楚两种模式: [模式一]:商户后台系统根据微信支付规则链接生成二维码,链接中带固定参数productid(可定义为产品标识或订单号).[模式二]:商户后台系统调用微信 ...
- 百度小程序源码php_dedecms织梦小程序插件万能api接口插件(支持百度微信小程序)...
dedecms织梦小程序插件万能api接口,让你无需有php或sql基础,不需要依赖任何第三方网站授权,后台一键安装,小程序分分钟配置完成,让你拥有真正属于自己的小程序!支持gbk和utf版 dede ...
- vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
- 最全快递API接口及应用详解
因为需要对接物流/快递公司接口,时常会陷入选择服务商的困境,这次我整理了市场上几乎所有主流的物流/快递api接口,并且按照支持数量.接口的丰富性/稳定性/即时性,以及价格等因素,对各大服务商做了一个评 ...
- ADSP-21489的开发详解:SPIflash的硬件设计及程序烧写详解(含Flash驱动源码)
硬件准备 ADSP-21489EVB:ADI 21489处理器的开发板 AD-HP530ICE:ADI DSP专用仿真器 USBi:ADI SigmaDSP和SHARC DSP的图形化编程调试器 软件 ...
- python 基于itchat详解微信防撤回程序
itchat学习笔记请见另一文章 文章目录 0. 选题背景 1. 发现问题 2. 提炼问题 3. 解决方案 4. 分析设计 4.0 准备 问题4.1 : 如何用程序登录自己的微信账号? 问题4.2 : ...
- 详解微信开放平台第三方平台代小程序开发业务基本接口调用逻辑
详解微信第三方小程序代开发 微信申请第三方之后可以获取授权方的很多权限,主要的是生码和待开发,生码的第三方授权之前已经写了一篇文章,最近做了小程序待开发,总结一下写下来供大家参考 由百牛信息技术bai ...
最新文章
- vc++图像保存,重绘
- python日志输出到屏幕,python日志写入文件
- Spring Boot中实现跨域的五种方式
- mysql中建立索引的原则_在SQL数据库中设定索引的原则是什么?(注意是设定不是创建)...
- ASP.NET Core Blazor Webassembly 之 路由
- CanalSharp.AspNetCore v0.0.4-支持输出到MongoDB
- P,NP,NPC,NP-Hard,co-NP问题辨析
- linux内核串口调试,linux 串口调试方法
- PAIP.MYSQL 1045 Access denied for user 'XXXX'@'loca 的解决.txt
- Mac 修改 hosts 文件
- 《富爸爸穷爸爸》读书摘要
- 关于 Indentifying Non-explicit Citing Sentences for Citation-based Summarization
- 阿里巴巴矢量图标库全选
- 无语的index hint:手工分配哈希区,5小时不出结果,优化后20分钟
- 变速器--中英文翻译
- java课程设计计算器 uml简图,计算器的用例建模
- 内容为王时代,你还在用畅言评论吗?
- ASP+Access的安全隐患及对策
- mysql查询1万条数据要1秒钟_SQL查询效率:100万数据查询只需要1秒钟
- Docker images导出和导入
热门文章
- Mac OS X 10.8.5升级到更高版本的方法
- 【深入浅出指南:JVM知多少】一、JVM内存模型
- 使用Tycho构建OSGi插件项目
- 谈谈你对web语义化的理解
- 织梦Dedecms主要文件夹目录及模板文件说明
- P4086 [USACO17DEC]My Cow Ate My Homework S(静态数据预处理:后缀和、后缀最小值)
- GB/T 10707 橡胶燃烧性能
- 为什么百度查ip查到的ip和dos里面ipconfig查到的不一样及IPv4地址分类
- vue element 父传子,第一次传不过去
- 数据结构易混点、易错点、题目(个人向)