首页
登录 | 注册

直击根源:微信小程序中web-view再次刷新页面需要退两次

背景

在上一章(直击根源:vue项目微信小程序页面跳转web-view不刷新)解决了vue在小程序回退不刷新的问题之后,会引出了一个刷新的页面需要点击返回两次才能返回上一个页面

问题描述

在A页面从B页面带了参数返回之后,A页面会刷新,直接导致了,A页面返回上一个页面需要点击两次,其中点击一次时还是A页面。

解决方案

  1. 首先第一个想法就是,设置一下退回按钮直接跳到上一个页面去;,经过资料查找,回退按钮是没有直接触发函数的,也就是说不能直接控制回退的功能。
  2. 在寻找资料时,发现可以间接的触发一个unload函数,于是尝试在当前页面退回按钮点击后,会立即触发当前页面的unload方法,在unload里面尝试跳转到A的前一页,结果如下:

    在A页面添加了unload方法,然后跳转到指定的页面,发现一个现象,第一次点A退回,是不触发unload,第二次才触发了unload,也就是说在B回到A页面之后刷新之后的A页面不触发unload页面。

  3. 那么是web-view刷新产生的这个页面,也不能干掉,让web-view刷新这个页面就可以了,找了很多资料,没有理出一个头绪,web-view既然是第二次刷新产生的,那么让只刷新第一次是不是就可以解决了,于是做了如下尝试:

    在B页面把A页面的web-view的src变量置为空,然后在A页面添加wx:if={{src!==''}}的条件控制,在src为空时销毁web-view,然后在B页面退回通过另一个变量把需要的url传递过去在A页面onShow,再设置src为一个我们期望的跳转url,总结一下:

     A页面跳到B页面时设置A的src为空-销毁了`web-view`,退回A页面时在onShow方法在设置src的值-`web-view`被重新渲染

    测试结果:
    页面被刷新,且没有了A页面退回两次的情况

总结

1. web-view在src变化之后,会产生一个新的页面,并加入的页面栈里面
2. 刷新之后的页面回退不会有unload方法调用
3. web-view销毁重建可以避免产生新的页面
4. 销毁重建解

自此,微信小程序使用vue嵌套页面刷新的核心问题都解决了


相关文章

  • 使用 ASP.NET Core MVC 创建 Web API(二)
    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一)     六.添加数据库上下文       数据库上下文是使用Entity Framework Core功能的主 ...
  • 机器学习web服务化实战:一次吐血的服务化之路
    背景 在公司内部,我负责帮助研究院的小伙伴搭建机器学习web服务,研究院的小伙伴提供一个机器学习本地接口,我负责提供一个对外服务的HTTP接口. 说起人工智能和机器学习,python是最擅长的,其以开发速度快,第三方库多而广受欢迎,以至于现 ...
  • 浅谈unity中gamma空间和线性空间
    转载请标明出处:http://www.cnblogs.com/zblade/ 一.概述    很久没有写文章了,今天写一篇对gamma空间和线性空间的个人理解总结,在查阅和学习了各个资料后,算是一个个人笔记吧.   二.Gamma颜色空间和 ...
  • 使用 ASP.NET Core MVC 创建 Web API(五)
    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二)  使用 ASP.NET Core MVC ...
  • 使用 ASP.NET Core MVC 创建 Web API(四)
    使用 ASP.NET Core MVC 创建 Web API 使用 ASP.NET Core MVC 创建 Web API(一) 使用 ASP.NET Core MVC 创建 Web API(二)  使用 ASP.NET Core MVC ...
  • 使用 ASP.NET Core MVC 创建 Web API(一)
          从今天开始来学习如何在 ASP.NET Core 中构建 Web API 以及每项功能的最佳适用场景.关于此次示例的数据库创建请参考<学习ASP.NET Core Razor 编程系列一>    至  <学习A ...

2019 cecdns.com webmaster#cecdns.com
12 q. 0.084 s.
京ICP备10005923号