当前位置: 代码网 > it编程>编程语言>Javascript > uniapp嵌套webview无法返回上一级解决方式

uniapp嵌套webview无法返回上一级解决方式

2024年06月11日 Javascript 我要评论
场景:进入首页,自动跳转第三方应用遇到问题在设备上运行时,无法回退上一级,直接退出应用了;预期:一级级的返回页面;解决方式个人想到临时解决方式,欢迎老铁们可以分享其他方式进入首页index,不要先加载

场景:

  • 进入首页,自动跳转第三方应用

遇到问题

  • 在设备上运行时,无法回退上一级,直接退出应用了;
  • 预期:一级级的返回页面;

解决方式

个人想到临时解决方式,欢迎老铁们可以分享其他方式

  • 进入首页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无法返回上级内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网!

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com