uniapp嵌套webview，无法返回上一级？

Smile_ping2024-01-24 21:41

uniapp嵌套webview，如何解决回退问题？

文章目录

- 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;
},