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


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 相关文章推荐
JavaScript 组件之旅(一)分析和设计
Oct 28 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
JavaScript游戏之是男人就下100层代码打包
Nov 08 Javascript
Jquery选择子控件"大于号"和" "区别介绍及使用示例
Jun 25 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
跟我学习javascript的闭包
Nov 16 Javascript
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
Nov 10 Javascript
js实现无缝滚动图
Feb 22 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
Jan 20 Javascript
JavaScript 判断浏览器是否是IE
Feb 19 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
一些花式咖啡的配方
2021/03/03 冲泡冲煮
PHP中实现进程间通讯
2006/10/09 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php防止伪造的数据从URL提交方法
2014/06/27 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
Laravel下生成验证码的类
2017/11/15 PHP
javascript 面向对象编程基础:继承
2009/08/21 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
2014/12/29 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
Function.prototype.apply()与Function.prototype.call()小结
2016/04/27 Javascript
JavaScript Ajax实现异步通信
2016/12/14 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
JS伪继承prototype实现方法示例
2018/06/20 Javascript
微信小程序自定义轮播图
2018/11/04 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[01:34]完美“圣”典宣传片震撼发布,12.17与你不见不散
2016/12/16 DOTA
python实现文件路径和url相互转换的方法
2015/07/06 Python
python之Socket网络编程详解
2016/09/29 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
python BlockingScheduler定时任务及其他方式的实现
2019/09/19 Python
利用Tensorflow的队列多线程读取数据方式
2020/02/05 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
AmazeUI中模态框的实现
2020/08/19 HTML / CSS
一个精品风格的世界:Atterley
2019/05/01 全球购物
学校综治宣传月活动总结
2014/07/02 职场文书
2014年初级职称工作总结
2014/12/08 职场文书
活动经费申请报告
2015/05/15 职场文书
赡养老人协议书范本
2015/08/06 职场文书