背景

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

问题描述

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

解决方案

  1. 首先第一个想法就是,设置一下退回按钮直接跳到上一个页面去;经过资料查找,回退按钮是没有直接触发函数的,也就是说不能直接控制回退的功能。

  2. 在寻找资料时,发现可以间接的触发一个unload函数,于是尝试在当前页面退回按钮点击后,会立即触发当前页面的unload方法,在unload里面尝试跳转到A的前一页,结果如下:

    1. 在第一次点击退回,没有触发unload
    2. 再次点击退回,成功触发了unload

    与期望不符,预期unload第一次退回触发才可以进行页面跳转

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

    在B页面把A页面的web-view的src变量置为空,然后在A页面web-view上添加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嵌套页面刷新的核心问题都解决了

直击根源:微信小程序中web-view再次刷新后页面需要退两次的更多相关文章

  1. 微信小程序中h5跳转到登录页面,登陆成功返回携带参数,h5刷新

    公司的一个小程序,要做一个活动,需要判断登录状态. 思路:h5跳转到登录页面,登陆成功携带token自动返回. 本来以为是个非常简单的功能,没想到..... 发帖记录一下 1.登录页面 用getCur ...

  2. 说说 PWA 和微信小程序--Progressive Web App

    作者:云图图链接:https://zhuanlan.zhihu.com/p/22578965来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 利益相关:微信小用户,谷歌小 ...

  3. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  4. 微信小程序中用户登录和登录态维护

    提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...

  5. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  6. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

  7. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  8. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  9. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

随机推荐

  1. .Net Core Api 授权认证

    一.所使用到的NuGet: 1. System.IdentityModel.Tokens.Jwt 2. Microsoft.AspNetCore.Authentication.JwtBearer 二. ...

  2. C语言指针使用不当带来的内存不可读

    前几天遇到一个C语言初学者提到的一个问题,代码我做了一些修改,如下: #include <stdio.h> #include <string.h> int main(void) ...

  3. Java编程思想:标准I/O

    import com.sun.xml.internal.ws.policy.privateutil.PolicyUtils; import java.io.*; public class Test { ...

  4. ISTQB TA - 边界值分析中三值测试法的注意事项

    三值测试法的定义(中文版20150601大纲): 取一个不超过边界.一个在边界上.一个超过边界的值. 这三个值其实还有另外一种叫法,分别是内点.上点和离点. 内点:不超过边界的点 上点:在边界上的点 ...

  5. Android解决RecyclerView中的item显示不全方案

    最近的项目中实现订单确定页面.需要使用ScrollView嵌套RecyclerView,当RecyclerView中的item数量比较多时,就会出现item只显示一部分数据,并没有将用户勾选的商品数量 ...

  6. bat命令闪退问题

    今天执行一个bat命令,然而会出现问题:双击执行bat命令时,命令提示符界面会闪退. 然而该bat命令在他人电脑上可正常执行,而我会遇到这种问题. 以下是我尝试的方法: 首先尝试编辑bat命令,在ba ...

  7. CentOS7 升级 Python2.x 到 Python3.x

    CentOS 7 中默认安装了 Python,版本比较低(2.7.5),为了使用新版 3.x,需要对旧版本进行升级.由于很多基本的命令.软件包都依赖旧版本,比如:yum.所以,在更新 Python 时 ...

  8. 关于sprintf的使用注意

    今天在使用sprintf时,本想简单一点,将第一个参数直接定义为一个字符型的指针(cher  *str;),结果没想到程序变得死死的,老老实实的将第一个参数重新变回字符型数组吧(char str[10 ...

  9. 手撸PHP数据库连接

    最近这个月过得确实有点狼狈....不停地复习,看书..终于到今天为止考完了2科了.能让我好好地写写博客了..前段时间的PHP课设我多学了点东西,在我们一般老师讲的php连接数据库方面做了一些优化.前段 ...

  10. Linu基础之权限管理

    二十二.权限管理 22.1)什么是权限 针对某些文件或者进程,对用户进行限制,权限可以理解为用于约束用户能对系统所做的操作. 22.2)权限和用户的关系   [root@centos7 ~]# ll ...