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


Posted in Javascript onJune 05, 2019

背景:

随着业务的增加,我们服务器需要计算大量的用户数据,导致用户跟客服反应页面不能正常展示。反馈给开发后,我们一看,是服务器异常的错误。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.js

import { previousPageClass } from '../../utils/util.js'

let isClickReload = false

Page({

 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代码附上,欢迎参考。

总结

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

Javascript 相关文章推荐
ajax中get和post的说明及使用与区别
Dec 23 Javascript
Jquery获取复选框被选中值的简单方法
Jul 04 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
jQuery实现图片向左向右切换效果的简单实例
May 18 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
jquery实现拖动效果(代码分享)
Jan 25 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 #Javascript
express + jwt + postMan验证实现持久化登录
Jun 05 #Javascript
Vue实现微信支付功能遇到的坑
Jun 05 #Javascript
JS实现数组删除指定元素功能示例
Jun 05 #Javascript
vue实现PC端录音功能的实例代码
Jun 05 #Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 #Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 #Javascript
You might like
并发下常见的加锁及锁的PHP具体实现代码
2010/10/12 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
简单实现php上传文件功能
2017/09/21 PHP
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
ExtJS[Desktop]实现图标换行示例代码
2013/11/17 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
遍历python字典几种方法总结(推荐)
2016/09/11 Python
对numpy中shape的深入理解
2018/06/15 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
python 运用Django 开发后台接口的实例
2018/12/11 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
浅谈tensorflow中Dataset图片的批量读取及维度的操作详解
2020/01/20 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
2020/04/27 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
开发中都用到了那些设计模式?用在什么场合?
2014/08/21 面试题
main 函数执行以前,还会执行什么代码
2013/04/17 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
客服工作职责
2013/12/11 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
python实战之一步一步教你绘制小猪佩奇
2021/04/22 Python
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL