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;
},
相关推荐
耶啵奶膘5 小时前
uniapp+firstUI——上传视频组件fui-upload-video
前端·javascript·uni-app
耶啵奶膘18 小时前
uniapp——地图路线绘制map
uni-app
shadouqi19 小时前
uniapp实现图片预览,懒加载,下拉刷新等
uni-app
走,带你去玩20 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
菌菇汤1 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
某公司摸鱼前端1 天前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
遗憾随她而去.1 天前
uniapp 中使用路由导航守卫,进行登录鉴权
前端·uni-app
牧杉-惊蛰2 天前
uniapp微信小程序css中background-image失效问题
css·微信小程序·uni-app
Little_Code2 天前
uniapp 使用ffmpeg播放rtsp
ffmpeg·uni-app·rtsp
儿歌八万首2 天前
uniapp 和原生插件交互
uni-app·交互