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


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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
基于jquery可配置循环左右滚动例子
Sep 09 Javascript
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
Apr 20 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
浅谈js对象的创建和对6种继承模式的理解和遐想
Oct 16 Javascript
JS中from 表单序列化提交的代码
Jan 20 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
axios 封装上传文件的请求方法
Sep 26 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通过文件头检测文件类型通用代码类(zip,rar等)
2010/10/19 PHP
PHP跳转页面的几种实现方法详解
2013/06/08 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
浅谈PHP定义命令空间的几个注意点(推荐)
2016/10/29 PHP
jQuery 使用手册(七)
2009/09/23 Javascript
js常用代码段整理
2011/11/30 Javascript
动态加载js和css(外部文件)
2013/04/17 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
js数组操作学习总结
2013/11/04 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
2016/05/27 Javascript
jquery模拟多级复选框效果的简单实例
2016/06/08 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
捕获未处理的Promise错误方法
2017/10/13 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
vue实例中data使用return包裹的方法
2018/08/27 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
Python创建xml的方法
2015/03/10 Python
介绍Python中几个常用的类方法
2015/04/08 Python
python之PyMongo使用总结
2017/05/26 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
Python二叉树的遍历操作示例【前序遍历,中序遍历,后序遍历,层序遍历】
2018/12/24 Python
python 整数越界问题详解
2019/06/27 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
安全生产目标管理责任书
2014/07/25 职场文书
2015年党小组工作总结
2015/05/26 职场文书
升学宴家长答谢词
2015/09/29 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android