uniapp嵌套webview,如何解决回退问题?
文章目录
场景:
- 进入首页,自动跳转第三方应用
遇到问题
- 在设备上运行时,无法回退上一级,直接退出应用了;
- 预期:一级级的返回页面;
解决方式
个人想到临时解决方式,欢迎老铁们可以分享其他方式
- 进入首页
index
,不要先加载web-view
- 新建页面,例
webview.vue
方式一
例:安卓
index.vue
javascript
onLoad() {
uni.navigateTo({
url: '/pages/webview/webview'
})
}
webview.vue
javascript
<template>
<view>
<web-view src="https://xxx"></web-view>
</view>
</template>
javascript
onUnload() {
// #ifdef APP-PLUS
// ios退出应用方式,下面有写
plus.runtime.quit(); // 强制退出应用.Android
// #endif
},
方式二
个人 推荐方式一,简单一些
- 通过标识是否已加载webview页面,定义全局变量或本地存储标识都可以
- 在 onShow 判断是否已加载 webview 页面,已加载 ,则执行退出应用,否则跳转页面
App.vue
javascript
globalData: {
webShowed: false, // 标识
},
index.vue
javascript
const app = getApp()
onShow() {
this.handleLaunchJump();
}
javascript
handleLaunchJump() {
let sysInfo = uni.getSystemInfoSync();
// 这里我处理Android、 Ios,跳转及退出方式,根据个人所需
if (!app.globalData.webShowed) {
if (sysInfo.platform === 'ios') {
uni.redirectTo({
url: this.url // '/pages/webview/webview'
})
} else {
uni.navigateTo({
url: this.url
})
}
} else {
// #ifdef APP-PLUS
if (sysInfo.platform === 'ios') {
plus.ios.import('UIApplication').sharedApplication().performSelector('exit');
} else {
plus.runtime.quit();
}
// #endif
}
}
webview.vue
javascript
<template>
<view>
<web-view src="https://xxx"></web-view>
</view>
</template>
javascript
onShow() {
getApp().globalData.webShowed = true;
},