栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

uniapp的H5在ReactNative的WebView上导航栏返回按钮冲突

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

uniapp的H5在ReactNative的WebView上导航栏返回按钮冲突

一 场景描述:

uinapp的h5在安卓手机上返回是正常的,但是到了ios上就无法正常返回,例如第三页无法返回第二页,而是直接返回到第一页APP里。ios上是用ReactNative的WebView渲染的h5页面,之前渲染jquery的h5没有问题,也就是a标签超链接跳转或window.location.href跳转没问题。初步判断是因为vue单页面问题,路由用的hash,只在一个页面更换DOM,所以没有历史记录造成的

二 方案分析

1.看到uniAPP官方的两句话很激动,以为可以用这个

webview 中嵌入 uni-app H5时,使用 uni.webView.navigateTo... 跳转页面

web-view 加载 uni-app H5,内部跳转冲突如何解决 A:使用 uni.webView.navigateTo...

后来发现这种得是uniapp的h5运行在uniapp渲染的web-view场景下,显然不行

2.后来发现uniapp里有个生命周期onBackPress可以监听页面返回,但试了也不行,觉得应该是得用uniapp自定义的导航栏才生效,别的不行

3.后来看到如下文章才有所启发,既然单页面没有历史记录,那就创造历史记录
uniapp系统返回监听_沐卿゚的博客-CSDN博客_uniapp监听返回uniapp系统返回监听https://blog.csdn.net/Leijiang0504/article/details/122879167

三 解决方法

第二页跳转的时候必须用navigateTo(其它试过不行),在成功回调后插入历史,然后跳转下页前用location.reload()刷新当页(不刷新插历史无效)

​

​
uni.navigateTo({
	url: '/pages/3',
	success() {
		if (window.history && window.history.pushState) {
			 history.pushState(null, null, document.URL);
		}
		location.reload()
	}
})

​

 在第三页onLoad时添加退栈事件监听,用uni.navigateBack()返回(其它无效如history.back)

window.addEventListener("popstate", this.show, false);
uni.navigateBack()
window.removeEventListener("popstate", this.show, false);

如果有第四页第五页的话,都按第三页来写

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/890597.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号