木蚂蚁手机乐园首页

 找回密码
 注册

QQ登录

只需一步,快速开始

搜索
查看: 1186|回复: 3

[教程/经验] 微信小程序中web-view再次刷新后页面需要退两次

[复制链接]

签到天数: 195 天

连续签到: 1 天

[LV.7]有车蚂蚁

3871

主题

4611

帖子

2万

积分

木蚂蚁高中一年级

Rank: 10Rank: 10

积分
28587

发帖先锋2018世界杯专属勋章

发表于 2019-8-30 13:59:19 | 显示全部楼层 |阅读模式

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

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

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

Copy
1. 在第一次点击退回,没有触发unload
2. 再次点击退回,成功触发了unload
与期望不符,预期unload第一次退回触发才可以进行页面跳转

那么是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,总结一下:

Copy
A页面跳到B页面时设置A的src为空-销毁了`web-view`,退回A页面时在onShow方法在设置src的值-`web-view`被重新渲染
测试结果得到了预期:
页面被刷新,且没有了A页面退回两次的情况

总结#
Copy
1. web-view在src变化之后,会产生一个新的页面,并加入的页面栈里面
2. 刷新之后的页面回退不会有unload方法调用
3. web-view销毁重建可以避免产生新的页面
4. 销毁重建解
自此,微信小程序使用vue嵌套页面刷新的核心问题都解决了

签到天数: 8 天

连续签到: 5 天

[LV.3]经常路过

2

主题

35

帖子

80

积分

木蚂蚁小学一年级

Rank: 1

积分
80
发表于 2019-9-9 22:27:41 木蚂蚁客户端 | 显示全部楼层
1111

签到天数: 15 天

连续签到: 1 天

[LV.4]已经心动

3

主题

204

帖子

423

积分

木蚂蚁小学三年级

Rank: 3

积分
423
发表于 6 天前 木蚂蚁客户端 | 显示全部楼层
1111

签到天数: 11 天

连续签到: 2 天

[LV.3]经常路过

6

主题

290

帖子

572

积分

木蚂蚁小学四年级

Rank: 4Rank: 4

积分
572
发表于 4 天前 木蚂蚁客户端 | 显示全部楼层
谢谢楼主分享
您需要登录后才可以回帖 登录 | 注册

本版积分规则

推荐版块: 木蚂蚁潮流实验室  |  
安卓市场   安卓软件   安卓软件教程   安卓游戏攻略   手机游戏   手机健康软件   手机订餐软件   手机购物软件   热门TAG
快速回复 返回顶部 返回列表