一、问题: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>
参考文档
- Webview窗口对象: https://www.html5plus.org/doc/zh_cn/webview.html;
- uniapp官方文档web-view: https://uniapp.dcloud.net.cn/component/web-view.html#;