ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

uniapp嵌套webview,无法返回上一级?

2026/8/7 15:44:33 拓冰建站 浏览量
uniapp嵌套webview,无法返回上一级?

uniapp嵌套webview,如何解决回退问题?

文章目录

    • uniapp嵌套webview,如何解决回退问题?
      • 遇到问题
      • 解决方式
        • 方式一
        • 方式二

场景:

  • 进入首页,自动跳转第三方应用

遇到问题

  • 在设备上运行时,无法回退上一级,直接退出应用了;
  • 预期:一级级的返回页面;

解决方式

个人想到临时解决方式,欢迎老铁们可以分享其他方式

  • 进入首页index,不要先加载 web-view
  • 新建页面,例webview.vue

方式一

例:安卓

index.vue

onLoad() {uni.navigateTo({url: '/pages/webview/webview'})
}

webview.vue

<template><view><web-view src="https://xxx"></web-view></view>
</template>

onUnload() {// #ifdef APP-PLUS// ios退出应用方式,下面有写plus.runtime.quit(); // 强制退出应用.Android// #endif
},
方式二

个人 推荐方式一,简单一些

  • 通过标识是否已加载webview页面,定义全局变量或本地存储标识都可以
  • 在 onShow 判断是否已加载 webview 页面,已加载 ,则执行退出应用,否则跳转页面

App.vue

globalData: {webShowed: false, // 标识
},

index.vue

const app = getApp()onShow() {this.handleLaunchJump();
}

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-PLUSif (sysInfo.platform === 'ios') {plus.ios.import('UIApplication').sharedApplication().performSelector('exit');} else {plus.runtime.quit();}// #endif}
}

webview.vue

<template><view><web-view src="https://xxx"></web-view></view>
</template>
onShow() {getApp().globalData.webShowed = true;
},