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无法返回上级内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • iview在vue-cli3如何按需加载的方法

    iview在vue-cli3如何按需加载的方法

    这篇文章主要介绍了iview在vue-cli3如何按需加载的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • vue 动态组件用法示例小结

    vue 动态组件用法示例小结

    这篇文章主要介绍了vue 动态组件用法,结合实例形式总结分析了vue 动态组件基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • Vue3之事件绑定的实现逻辑详解

    Vue3之事件绑定的实现逻辑详解

    这篇文章主要介绍了Vue3之事件绑定的实现逻辑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • Vue中多个元素、组件的过渡及列表过渡的方法示例

    Vue中多个元素、组件的过渡及列表过渡的方法示例

    这篇文章主要介绍了Vue中多个元素、组件的过渡及列表过渡的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • Vue实现页面返回停留原位置的多种方案

    Vue实现页面返回停留原位置的多种方案

    文章主要讨论了在 Vue 开发中实现页面返回停留原位置的多种方案,包括 Vuex、keep-alive、v-show、客户端跳转等,并分别阐述了它们的优缺点和适用情况,强调开发前应周全考虑前端业务和用户体验,根据实际业务选择合适方案,需要的朋友可以参考下
    2025-03-03
  • vue中使用svg-icon遇到的坑及解决

    vue中使用svg-icon遇到的坑及解决

    这篇文章主要介绍了vue中使用svg-icon遇到的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • vue中递归组件的实现示例

    vue中递归组件的实现示例

    递归组件是Vue中用于渲染复杂嵌套结构的强大工具,通过组件引用自身来简化代码,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2024-12-12
  • Vue项目中Websocket的使用实例

    Vue项目中Websocket的使用实例

    WebSocket就诞生了,它最大特点就是服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,是真正的双向平等对话,下面这篇文章主要给大家介绍了关于Vue项目中Websocket使用的相关资料,需要的朋友可以参考下
    2023-02-02
  • 详解VueJS 数据驱动和依赖追踪分析

    详解VueJS 数据驱动和依赖追踪分析

    这篇文章主要介绍了详解VueJS 数据驱动和依赖追踪分析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue路由事件beforeRouteLeave及组件内定时器的清除方法

    vue路由事件beforeRouteLeave及组件内定时器的清除方法

    今天小编就为大家分享一篇vue路由事件beforeRouteLeave及组件内定时器的清除方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论