本文介绍在uniapp中如何通过拦截webview URL跳转实现左滑返回上一页，以及处理手机物理返回键。通过重写onBackPress方法并调用原生webview的back接口，解决默认关闭整个webview的问题，确保H5页面交互符合原生应用习惯。
在uniapp应用中，默认的左滑手势通常会直接关闭整个webview容器，而不是返回H5页面内的上一级。为了解决这一问题，核心思路是拦截webview内部的URL跳转行为。当检测到新的URL时，不直接跳转，而是利用webview组件重新加载该页面。这样，当用户执行左滑手势时，系统关闭的是当前这个特定的webview实例，从而自然地回退到之前的页面状态。
<template>
<view>
<web-view :src="weburl" :update-title="false" :webview-styles="webviewStyles">
</web-view>
</view>
</template>
<script>
export default {
data() {
return {
// 进度条
webviewStyles: {
progress: {
color: '#FF3333'
}
},
weburl: ""
};
},
onLoad(option) {
console.log("接收到的url参数是:", option.weburl); //打印出上个页面传递的参数。
this.weburl = option.weburl
},
onReady() {
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var currentWebview = page.$getAppWebview();
var url = currentWebview.children()[0].getURL();
console.log('=== url ===', url);
var wv = currentWebview.children()[0];
wv.overrideUrlLoading({
mode: 'reject',
match: '.*'
}, function(e) {
console.log('reject url: ' + e.url);
uni.navigateTo({
url: `/pages/webbox/webbox?weburl=${e.url}`
})
});
},
onBackPress(e) {
let pages = getCurrentPages()
let page = pages[pages.length - 1];
let currentPages = page.$getAppWebview()
currentPages.close()
return false
},
onNavigationBarButtonTap() {
console.log("点击了标题栏按钮")
uni.$emit("showMenu")
},
methods: {}
}
</script>
<style lang="scss">
</style>对于uniapp中加载H5内容的webview，还需要特别处理手机物理返回键的行为。目标是让物理返回键的功能等同于在H5页面中点击“返回上一页”，确保用户操作的一致性。
在涉及webview的Vue组件代码中，需要添加特定的处理逻辑。具体实现涉及在组件生命周期或事件监听中注入相关代码，以接管默认的返回行为。
<script>
const facebook = uni.requireNativePlugin('sn-facebook');
var wv; //计划创建的webview
export default {
data() {
return {
canBack: false
};
},
onLoad() {},
onBackPress() {
if (wv && this.canBack) {
wv.back();
return true;
}
return false;
},
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
},
methods: {
onMessage({ detail }) {
const data = detail.data[0];
console.log('onMessage', data);
if (data.action == 'login') {
// 登录：自定义参数
facebook.loginWithParams(
{
permissions: [
// 权限，更多权限请看 https://developers.facebook.com/docs/permissions/reference
'email',
'public_profile'
],
// 返回字段，更多字段请查看 https://developers.facebook.com/docs/graph-api/reference/user/
fields: 'id, name, email'
},
e => {
console.log(e);
this.postMessage({ ...e, action: 'loginCallback' });
}
);
}
},
// postMessage to web
postMessage(data) {
if (wv) {
wv.evalJS('window.postMessage(' + JSON.stringify(data) + ');');
} else {
uni.showToast({
icon: 'none',
title: 'webview不存在'
});
}
}
}
};
</script>至此，关于uniapp中webview实现左滑返回上一页的操作方法介绍完毕。如需了解更多uniapp webview左滑返回相关的内容，建议搜索本站历史文章或继续浏览后续文章，感谢大家的支持！