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;
},
相关推荐
耶啵奶膘11 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
我开心就好o18 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index18 小时前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
初遇你时动了情1 天前
uniapp 城市选择插件
开发语言·javascript·uni-app
小小黑0071 天前
uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题
uni-app·vue
草字1 天前
uniapp input限制输入负数,以及保留小数点两位.
java·前端·uni-app
前端小胡兔1 天前
uniapp rpx兼容平板
uni-app
荔枝吖1 天前
uniapp实现开发遇到过的问题(持续更新中....)
uni-app
艾小逗1 天前
uniapp将图片url转换成base64支持app和h5
uni-app·base64·imagetobase64
halo14161 天前
uni-app 界面TabBar中间大图标设置的两种方法
开发语言·javascript·uni-app