侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

微信小程序如何实现全局重新加载

微信(小程序)  /  管理员 发布于 5年前   1200

背景:

随着业务的增加,我们服务器需要计算大量的用户数据,导致用户跟客服反应页面不能正常展示。反馈给开发后,我们一看,是服务器异常的错误。So,产品想看下我们到底有多少用户页面不能正常展示?

方案:

  1. 后端人员直接在阿里云后台去查哪些接口异常
  2. 前端做一个服务器报错页,这样产品在小程序后台能看到这个页面的PV,UV

技术方案

因为业务庞大,所以我们不可能区在每个页面加上重新加载的逻辑。所以初步考虑使用全局重新加载。

需要解决的问题都有哪些?

  1. 首先我们要有网络请求失败的全局控制权(要不然就需要在每个页面处理失败的情况)
  2. 需要定义好网络失败后是如何跳转到重载页(R)的(用wx.redirectTo,wx.reLaunch还是其他)
  3. 点击错误页的“重新加载”,如何返回或跳转到出错页(E)(用wx.redirectTo,wx.reLaunch还是其他)
  4. 跳转到出错页后,如何重新加载数据(把所有请求都放在Page.onShow()里面?)
  5. 那如果从出错页的上个界面(P)传到出错页(E)options,那重载页(R)又将如何处理?
  6. 点击重新加载跟返回,我们希望效果效果一样,又该如何操作?

实践的方式如下

第一个问题: 比较好解决,我们基于wx.request已经封装了为fetch(如果还在用wx.request的项目可以考虑封装下,好处多多)。基于fetch我们可以用res.statusCode来判断服务器是否出错。

第二个问题: 暂且先不说具体的跳转方式是怎样的,就跳转的url这个怎么定义也需要我们来讨论下。为什么这么说,因为我们的架构涉及到了分包。分包加载意味着我们的代码不仅仅是在pages下面,还放在了package下。

基于此,我们在跳转的时候,url能直接写成'../serverError/serverError'吗?在主包下面可以正常跳转,但是在分包下,路径是'package/serverError/serverError',这样跳肯定不行。url应该是根目录下的路径,所以'/pages/serverError/serverError'。

路径确认后,我们可以跳转了。如果是wx.redirectTo(关闭当前页面,跳转到应用内的某个页面),想象下关闭E跳转到R,点击重新加载,再关闭R跳转到E,这么跳转路径复杂,用户体验不好,并且options的参数需要逐级传递。wx.reLaunch类似。我们用所以我们选择wx.navigateTo。

第三个问题: 综合问题二的解释,跳回到E,我们用wx.navigateBack。

第四个问题: 如果从R用wx.navigateBack回到E的话,肯定会触发E.onShow()方法。但是有些请求我们除了写在Page.onShow()里,还有些是写在Page.onLoad()里的,所以我们必须想办法调起E.onLoad()。

大家对于getCurrentPages()这个方法肯定不陌生,官方定义是来获取当前页面栈,我们一般用它来获取当前页面路径。其实在这个过程中,我们是能拿到当前页面的实例的,并且实例里面有route(页面路径)options(页面传递参数)data(页面初始参数)以及各种function()等等。

利用previousPageClass()我们可以拿到E的实例,也就可以拿到E.options,当然我们也可以调E.onLoad()。

util.js// 获取当前路径function currentPagePath() { let pageData = getCurrentPages() if (pageData.length >= 1) { let len = pageData.length - 1 let data = pageData[len] return data.route } else { return '' }}// 获取上个界面的实例function previousPageClass() { let pageData = getCurrentPages() if (pageData.length >= 2) { let len = pageData.length - 2 let preClass = pageData[len] return preClass } else { return '' }}module.exports = { currentPagePath, previousPageClass}

第五个问题: 基于问题的四的方案,我们可以调E.onLoad(E.options)来将我们的参数回传回去。

第六个问题: 点击返回,相当于页面卸载,也就是执行了R.onUnload(),这个时候我们只需要执行E.onLoad(E.options)这个方法,把options传过去,以及调用起E.onLoad()就OK了。

但是点击重新加载,我们是调的wx.navigateBack(),这个方法也会走R.onUnload()。这是时候可能有些苦恼了,我们隐藏掉返回按钮?发现官方并没有提供此方法。禁用R.onUnload(),好像也不行。因为R.onUnload()是在点击重新加载后才执行的,所以我们可以记录下用户是否点击了重新加载的行为。然后我们通过记录的行为,即便用户点击了重新加载,然后触发了R.onUnload(),我们不去执行E.onLoad(E.options)就OK了。

// pages/serverError/serverError.jsimport { previousPageClass } from '../../utils/util.js'let isClickReload = falsePage({ onLoad: function (options) { isClickReload = false }, onUnload: function () { if(!isClickReload) {  this.callbackParams() }  }, /** * 点击事件 */ clickReload: function (e) { isClickReload = true wx.navigateBack() this.callbackParams() }, // 点击返回,参数回传 callbackParams: function () { let preOptions = previousPageClass().options previousPageClass().onLoad(preOptions) }})

至此所有问题,基本都已解决。

Demo代码附上,欢迎参考。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家的支持。

您可能感兴趣的文章:

  • 微信小程序下拉加载和上拉刷新两种实现方法详解
  • 微信小程序JS加载esmap地图的实例详解
  • 小程序如何使用分包加载的实现方法
  • 微信小程序 require机制详解及实例代码
  • 微信小程序如何获知用户运行小程序的场景教程
  • 微信小程序 在Chrome浏览器上运行以及WebStorm的使用
  • 微信小程序加载机制及运行机制图解


  • 上一条:
    Vue实现微信支付功能遇到的坑
    下一条:
    解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
  • 昵称:

    邮箱:

    2条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 微信模板消息改版后发送规则记录(微信订阅消息参数值内容限制说明)(1个评论)
    • 微信支付v3对接所需工具及命令(0个评论)
    • 2023年9月1日起:微信小程序必须备案才能上线运营(0个评论)
    • 腾讯官方客服回应了:微信好友上限约10000个!(1个评论)
    • 2023年做微信小程序的老铁注意:新增收费项、微信小程序获取手机号也收费了(2个评论)
    • 近期文章
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 在go + gin中gorm实现指定搜索/区间搜索分页列表功能接口实例(0个评论)
    • 在go语言中实现IP/CIDR的ip和netmask互转及IP段形式互转及ip是否存在IP/CIDR(0个评论)
    • PHP 8.4 Alpha 1现已发布!(0个评论)
    • Laravel 11.15版本发布 - Eloquent Builder中添加的泛型(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    • 2023-06
    • 2023-07
    • 2023-08
    • 2023-10
    • 2023-11
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客