uni-app打包app嵌套h5跳转外部链接启用物理返回键
时间: 2023-09-06 21:13:34 浏览: 132
在uni-app中,可以通过uni.navigateBack() 方法来实现物理返回键的功能,该方法可以使应用退回到上一个页面或关闭当前页面。
如果需要在嵌套H5页面中使用物理返回键,则需要在H5页面中监听浏览器的返回事件,并在事件中调用uni.navigateBack()方法。
具体实现步骤如下:
1. 在H5页面中添加返回事件监听器:
```
window.addEventListener('popstate', function() {
uni.navigateBack();
});
```
2. 在uni-app中,通过uni.createWebView()方法打开H5页面,并传递一个自定义参数isWebView=true,用于标识当前页面是在webview中打开的。
```
uni.createWebView({
url: 'http://example.com',
extras: {
isWebView: true
}
})
```
3. 在uni-app的首页(即嵌套H5页面的父页面)中监听物理返回键事件,并判断当前页面是否是在webview中打开的,如果是则调用webview的goBack()方法,否则调用uni.navigateBack()方法。
```
onBackPress() {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
if (currentPage.$page.meta.isWebView) {
const webview = plus.webview.getWebviewById(currentPage.id);
if (webview.canBack()) {
webview.goBack();
}
} else {
uni.navigateBack();
}
}
```
通过以上步骤,即可实现在uni-app打包的app中嵌套H5页面并启用物理返回键的功能。
阅读全文