解决uniapp中web-view在手机端需点击两次才能返回上一页

一、问题:web-view组件在app端需返回两次才能返回上一页,在小程序和H5返回正常。通过js的方式创建web-view进行返回。

需要展示web-view的页面

<template>
	// web-view会自动撑满屏幕 可以不使用view
	<view class="pages-wrap">
		
	</view>
</template>;

<script>
	export default {
		data() {
			return {
					
			};
		},
		onLoad() {
			// #ifdef APP-PLUS
			this.createWebView();
			// #endif
		},
		methods: {
			// 通过js的方式创建web-view
			createWebView() { 
				// 1. 创建并显示新窗口
				// create对象详细参数文档:https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create
				const webView = plus.webview.create("", "test-webview", {
					plusrequire: "none", // 禁止远程网页使用plus的API,有些使用mui制作的网页可能会监听plus.key,造成关闭页面混乱,可以通过这种方式禁止
					'uni-app': 'none', // 不加载uni-app渲染层框架,避免样式冲突
					top: 0, // 放置在titleNView下方。如果还想在webview上方加个地址栏的什么的,可以继续降低TOP值
					// 设置窗口标题栏控件样式
					titleNView: {
						autoBackButton: true, // 是否显示左侧返回按钮
						progress: { // 设置标题栏控件的进度条样式
							color: '#FA6401'
						},
						titleText: '' // 设置标题栏文字
					}
				});
				// 2.webview需要跳转外部的url
				webView.loadURL("https://rules-center.meituan.com/m/detail/guize/511?activeRule=1");
				// 3.此对象相当于html5plus里的plus.webview.currentWebview()。
				// 在uni-app里vue页面直接使用plus.webview.currentWebview()无效,
				// 非v3编译模式使用this.$mp.page.$getAppWebview()
				var currentWebview = this.$scope.$getAppWebview(); 
				// 4.append到当前的页面里,目的:跟随当前页面一起做动画,一起关闭
				currentWebview.append(webView); 
				// 5.如果是首页的onload调用时需要延时一下,二级页面无需延时,可直接获取
				setTimeout(function() {
					// 打印webView样式参数
					console.log(webView.getStyle())
				}, 1000);
			}
		}
	}
</script>
参考文档
  1. Webview窗口对象: https://www.html5plus.org/doc/zh_cn/webview.html
  2. uniapp官方文档web-view: https://uniapp.dcloud.net.cn/component/web-view.html#
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值