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


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架构之Dojo篇
Apr 10 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
JS实现日期加减的方法
Nov 29 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
js判断手机和pc端选择不同执行事件的方法
Jan 30 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
微信小程序实现拼图小游戏
Oct 22 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程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
javascript radio 联动效果
2009/03/04 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
使用Math.floor与Math.random取随机整数的方法详解
2013/05/07 Javascript
jquery parent和parents的区别分析
2013/10/02 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
命令行批量截图Node脚本示例代码
2019/01/25 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
2019/04/24 Javascript
简述vue-cli中chainWebpack的使用方法
2019/07/30 Javascript
微信小程序移动拖拽视图-movable-view实例详解
2019/08/17 Javascript
Python 探针的实现原理
2016/04/23 Python
Python 获得命令行参数的方法(推荐)
2018/01/24 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python打印特殊符号及对应编码解析
2020/05/07 Python
解决python调用自己文件函数/执行函数找不到包问题
2020/06/01 Python
如何在python中判断变量的类型
2020/07/29 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
公交公司毕业生求职信
2014/02/15 职场文书
优秀员工评优方案
2014/06/13 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python