uniapp嵌套webview无法返回上一级解决方式
更新时间:2024年05月27日 10:24:55 作者:Smile_ping
uniapp是一款非常强大的跨平台开发框架,它可以让我们只编写一份代码,就能在多个平台上运行,这篇文章主要给大家介绍了关于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-PLUS if (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; },
附:解决uniapp使用web-view嵌套H5页面返回直接退出的问题
<template> <view> <web-view :src="src"></web-view> </view> </template> <script>
var wv; //计划创建的webview export default { data() { return { src: "", canBack: false, }; }, onBackPress() { if (wv && this.canBack) { wv.back(); return true; } return false; }, onReady() { // #ifdef APP-PLUS var self = this; var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效,非v3编译模式使用this.$mp.page.$getAppWebview() setTimeout(function () { wv = currentWebview.children()[0]; wv.addEventListener( "progressChanged", function (e) { wv.canBack(function (e) { self.canBack = e.canBack; }); }, false ); }, 500); //如果是页面初始化调用时,需要延时一下 // #endif }, }; </script>
总结
到此这篇关于uniapp嵌套webview无法返回上一级解决方式的文章就介绍到这了,更多相关uniapp嵌套webview无法返回上级内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
VueQuillEditor富文本上传图片(非base64)
这篇文章主要介绍了VueQuillEditor富文本上传图片(非base64),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-06-06Vue 2 如何添加 register-service-worker 实现缓存请求的问题
这篇文章主要介绍了Vue 2 如何添加 register-service-worker 以实现缓存请求的目的,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-11-11vue-infinite-loading2.0 中文文档详解
本篇文章主要介绍了vue-infinite-loading2.0 中文文档详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论