【uniapp 解决使用web-view嵌套H5页面以后返回失效的问题】
背景
使用uniapp原生导航时, 返回按钮提示再点一次退出应用, 但是我期望的是在webview页面点返回时类似于页面体验一样, 返回上一页
解决方式
我使用的是原生导航栏及按钮, 并且页面是tab栏的页面, 不保证其他方式可行
pages.json (设置了一个返回按钮和首页按钮)
{
"path": "pages/XXX/index",
"style": {
"navigationBarTitleText": "XXX中心",
"app-plus": {
"titleNView": {
"buttons": [{
"type": "back",
"float": "left"
},{
"type": "home"
}]
}
}
}
}
页面代码
<template>
<view>
<web-view :src="src" class="webv"></web-view>
</view>
</template>
JS
var wv;
export default {
data() {
return {
src:"",
canBack: false
}
},
onShow() {
// 隐藏tabbar
//uni.hideTabBar({
// animation: false
//});
if (this.src == "") {
this.src = "xxxxxxxx.com?token=";
}
},
onReady() {
// #ifdef APP-PLUS
var self = this;
var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview()
setTimeout(function () {
wv = currentWebview.children()[0];
wv.addEventListener(
"progressChanged",
function (e) {
wv.canBack(function (e) {
self.canBack = e.canBack;
});
},
false
);
}, 500); //如果是页面初始化调用时,需要延时一下
// #endif
},
// 设备上点击返回按钮时的处理
onBackPress(e) {
if (wv && this.canBack) {
wv.back();
return true;
}
return false;
},
onNavigationBarButtonTap(e) {
// 返回
if (e.index === 0) {
// #ifdef H5
uni.navigateBack();
// #endif
// #ifdef APP-PLUS
this.canBack && wv.back();
// #endif
}
// 首页
if (e.index === 1) {
// 显示tabbar
//uni.showTabBar({
// animation: false
//});
uni.switchTab({
url: '/pages/index/index'
});
}
}
}