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无法返回上级内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
element带输入建议el-autocomplete的使用
本文主要介绍了element带输入建议el-autocomplete的使用,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2022-03-03
如何在vue-cli中使用css-loader实现css module
这篇文章主要介绍了如何在vue-cli中使用css-loader实现css module,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下2021-01-01
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
这篇文章主要介绍了vue 封装自定义组件tabal列表编辑单元格组件实例代码,需要的朋友可以参考下2017-09-09
vue最强table vxe-table 虚拟滚动列表 前端导出问题分析
最近遇到个问题,后台一次性返回2万条列表数据并且需求要求所有数据必须全部展示,不能做假分页,怎么操作呢,下面通过本文介绍下vue最强table vxe-table 虚拟滚动列表 前端导出问题,感兴趣的朋友一起看看吧2023-10-10


最新评论