交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 微信小程序如何实现全局重新加载

    背景:

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

    总结

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

    您可能感兴趣的文章:

    • 微信小程序全局变量改变监听的实现方法
    • 微信小程序设置全局请求URL及封装wx.request请求操作示例
    • 微信小程序全局变量功能与用法详解
    • 微信小程序实现全局搜索代码高亮的示例
    • 微信小程序本作用域下调用全局JS详解及实例
    • 微信小程序 定义全局数据、函数复用、模版等详细介绍
    • 微信小程序全局变量的设置、使用、修改过程解析

    广而告之:
    热门推荐:
    jquery序列化form表单使用ajax提交后处理返回的json数据

    1、返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {   ···

    百度网盘怎么限速? 百度网盘开启限速的教程

    百度网盘是使用较多的网盘,在百度网盘上下载文件或者上传文件时会占用到电脑的网速,但是百度网盘是支持上传和下载限速的,那么该怎么开启限速呢?下面就跟小编一起来看看吧。 软件名称: 百度网盘(百度云管家) v6.8.8.3 PC版 中文官方安装版 软件大小: 34.1MB 更新时间: 2···

    mysql获取group by的总记录行数另类方法

    mysql获取group by内部可以获取到某字段的记录分组统计总数,而无法统计出分组的记录数。 mysql的SQL_CALC_FOUND_ROWS 使用 获取查询的行数 在很多分页的程序中都这样写: 代码如下 SELECT COUNT(*) from `table` WHERE ......; 查出符合条件的记录总数 代码如下 SELECT * FROM ···

    使用js+jquery实现无限极联动

    今天工作需要写树形的联动,于是写了个可扩展的无限极联动下拉选项代码写的比较凌乱 先mark有空再整理 随便截个图!先贴数据库 id category_name 分类名 pid 父分类id orders 排序 1 22223331 0 1 2 2222111 1 1 12 44444 11 0 5 2222 1 1 6 2222 1 1 11 333···

    简单了解mysql InnoDB MyISAM相关区别

    前言 mysql支持很多表类型的表(即存储引擎),如myisam、innodb、memory、archive、example等。每种存储引擎都有自己的优点和缺点,充分的理解每种存储引擎,有助于合理的使用它们。有人认为在同一个数据库中使用多种存储引擎很影响性能,其实这是一种十分错误的想法。实际上···

    vue父子组件通信的高级用法示例

    前言 vue项目的一大亮点就是组件化。使用组件可以极大地提高项目中代码的复用率,减少代码量。但是使用组件最大的难点就是父子组件之间的通信。 子通信父 父组件 <template> <div class="parent"> 我是父组件 <!--父组件监听子组件触发的say方法,调用自己的···

    通常CSS错误及解决办法技巧

    复制代码代码如下: 区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue;    区别IE7与FF: background:orange; *background:green;    区别FF,IE7,IE6: background:orange;*background:green !important;*···

    jQuery简单实现遍历单选框的方法

    本文实例讲述了jQuery简单实现遍历单选框的方法。分享给大家供大家参考,具体如下: 1、问题背景: 有四个单选框,分别为一年四季,现在需要判断是否选中,如果选中这个单选框,就将其值赋值给输入框 2、实现代码: <!DOCTYPE html> <html> <head> &l···

    php实现往pdf中加数字签名操作示例【附源码下载】

    本文实例讲述了php实现往pdf中加数字签名操作。分享给大家供大家参考,具体如下: //============================================================+ // File name : example_052.php // Begin : 2009-05-07 // Last Update : 2013-05-14 // // Description : Example 05···

    jQuery powerFloat万能浮动层下拉层插件使用介绍

    一、写插件的缘由 为什么想写此插件,想来想去,归结为一个字:“懒”。不想为明明两个类似的功能分别写代码,本应喝茶看美女的休闲时光晃荡在本可避免的代码上,对于我来讲,就是白白耗费自己的青春。于是,干脆,一鼓作气,把这些类似的功能集合到一起,一个插件搞定,一···