小程序如何做全局重新加载

2019/6/4 20:02:44 人评论 次浏览 分类:开发资料

背景:

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

方案:

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

技术方案

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

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

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

实践的方式如下

1、第一个问题: 比较好解决,我们基于wx.request已经封装了为fetch(如果还在用wx.request的项目可以考虑封装下,好处多多)。基于fetch我们可以用res.statusCode来判断服务器是否出错。 
2、第二个问题: 暂且先不说具体的跳转方式是怎样的,就跳转的url这个怎么定义也需要我们来讨论下。为什么这么说,因为我们的架构涉及到了分包。分包加载意味着我们的代码不仅仅是在pages下面,还放在了package下。 
基于此,我们在跳转的时候,url能直接写成'../serverError/serverError'吗?在主包下面可以正常跳转,但是在分包下,路径是'package/serverError/serverError',这样跳肯定不行。url应该是根目录下的路径,所以'/pages/serverError/serverError'。 
路径确认后,我们可以跳转了。如果是wx.redirectTo(关闭当前页面,跳转到应用内的某个页面),想象下关闭E跳转到R,点击重新加载,再关闭R跳转到E,这么跳转路径复杂,用户体验不好,并且options的参数需要逐级传递。wx.reLaunch类似。我们用所以我们选择wx.navigateTo。 
3、第三个问题: 综合问题二的解释,跳回到E,我们用wx.navigateBack。 
4、第四个问题: 如果从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

  1. // 获取当前路径
  2. function currentPagePath() {
  3. let pageData = getCurrentPages()
  4. if (pageData.length >= 1) {
  5. let len = pageData.length - 1
  6. let data = pageData[len]
  7. return data.route
  8. } else {
  9. return ''
  10. }
  11. }
  12. // 获取上个界面的实例
  13. function previousPageClass() {
  14. let pageData = getCurrentPages()
  15. if (pageData.length >= 2) {
  16. let len = pageData.length - 2
  17. let preClass = pageData[len]
  18. return preClass
  19. } else {
  20. return ''
  21. }
  22. }
  23. module.exports = {
  24. currentPagePath,
  25. previousPageClass
  26. }

第五个问题: 基于问题的四的方案,我们可以调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

  1. import { previousPageClass } from '../../utils/util.js'
  2. let isClickReload = false
  3. Page({
  4. onLoad: function (options) {
  5. isClickReload = false
  6. },
  7. onUnload: function () {
  8. if(!isClickReload) {
  9. this.callbackParams()
  10. }
  11. },
  12. /**
  13. * 点击事件
  14. */
  15. clickReload: function (e) {
  16. isClickReload = true
  17. wx.navigateBack()
  18. this.callbackParams()
  19. },
  20. // 点击返回,参数回传
  21. callbackParams: function () {
  22. let preOptions = previousPageClass().options
  23. previousPageClass().onLoad(preOptions)
  24. }
  25. })

至此所有问题,基本都已解决。 
Demo代码附上,欢迎参考。

赞赏

相关教程

  • 微信小程序卡券开发(亲测)

    提示:小程序卡券和公众平台调用基本一致,请先查看公众平台卡券文档一、公众帐号/小程序绑定由于微信卡券用的是一套逻辑。所以小程序需要先和公众账号绑定,才能在小程序中调起公众平台卡券登录微信公众平台:https://open.weixin.qq.com/ 进行绑定操作二、公众号卡券添加小……

    2017/6/3 18:45:01

共有访客发表了评论 网友评论

验证码: 看不清楚?