uniapp嵌套webview,无法返回上一级?

这篇具有很好参考价值的文章主要介绍了uniapp嵌套webview,无法返回上一级?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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文章来源地址https://www.toymoban.com/news/detail-813734.html

<template>
	<view>
		<web-view src="https://xxx"></web-view>
	</view>
</template>
onShow() {
  getApp().globalData.webShowed = true;
},

到了这里,关于uniapp嵌套webview,无法返回上一级?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app:navigateBack返回上一页

    在 navigateBack 方法中使用 uni.navigateBack  来返回上一个页面。 delta 参数表示返回的页面层数,这里设置为1表示返回上一个页面。 要在uni-app中实现返回上一页并刷新上一个页面,并设置上一个页面的data值,可以使用uni.emit和uni.emit和uni.on来实现事件的发布和订阅。  当前页面

    2024年02月16日
    浏览(27)
  • Uni-app返回上一页面并携带参数

    目录 一、前言 二、实现方法 三、遇到的坑 四、事件详解 一、前言         需要实现这么一个需求:在一个列表页面,当子页面直接返回时,不刷新列表页面。但是当子页面的数据有变动时,需要刷新列表页面。本篇博客记录一下我是如何解决这个问题的。        

    2024年02月08日
    浏览(34)
  • uni-app 如何返回到指定的页面

    实际开发中,发现了一个问题,即使签署合同的时候,发现调用法大大的页面,出现了一个问题,就是签署后,点回退,回退到了重新签署的页面。所以需要对回退进行自定义处理。 处理的话,就要到指定的返回页面。这里还存在不签署的情况,回退要是原来的页面。所以要

    2024年01月18日
    浏览(52)
  • uniapp的APP中使用webview的返回的问题

    在使用uniapp开发APP中很多时候使用webview内嵌网页, 在网页中点击多次跳转后,想点击上方的返回按钮返APP的上一页或上几页的实现方法:

    2024年04月26日
    浏览(24)
  • uni-app: onBackPress() 监听页面返回 - 更新数据

    生命周期 - onBackPress() 监听页面返回 函数名 说明 平台差异说明 onBackPress 监听页面返回 ,返回 event = {from:backbutton、 navigateBack} ,backbutton 表示来源是左上角返回按钮或 android 返回键;navigateBack表示来源是 uni.navigateBack ;详细说明及使用:onBackPress 详解。支付宝小程序只有真机

    2024年02月11日
    浏览(41)
  • uni-app中监听网络状态,并在嵌入webView页面的组件中添加网络监测

    下载插件 打开网络异常组件页面,点击\\\"下载插件并导入HBuilderX\\\"按钮,打开HBuilderX软件后,选择需要导入插件的项目,点击“确定即可”。 使用插件 pages/network/index页面,仿照微信。 效果展示 修改网络监测组件mz-network-error 当网络状态发生变化时emit相关事件 修改组件调用

    2024年02月12日
    浏览(33)
  • uni-app返回上一个页面并进行页面刷新

    适用两个不同的页面跳转,返回上一个页面保存并刷新修改后的数据(也解决了uni-app的navigateBack返回不刷新的方法之一) 当前页: 上一页: 思路: 1、用getCurrentPages()获取打开的页面 2、保存当前页面和上一个页面 提示:不确定是不是从当前页跳转到上一页就console.log(pages[pa

    2024年02月12日
    浏览(34)
  • uni-app小程序uni.navigateBack返回上一个页面并传递参数.返回上个页面并刷新

    返回上一个打开的页面并传递一个参数。有种办法就是使用 假如从B页面返回A页面: 经过测试,在uni.app中使用B页面使用setData设置A页面参数无法实现(应该是被更改为常量属性了)。 打印console.log(prevPage)前一页面对象可得: 方法1:我们可以使用A页面原有方法 B页面传递:

    2024年02月16日
    浏览(39)
  • uni-app微信小程序,在页面顶部添加返回按键,返回上一个页面

    1.示例: 2.实现方式: 在page.json文件中的style里添加如下代码: 3.tips: 在page.json中的页面顺序就是小程序加载过程中的页面顺序

    2024年02月12日
    浏览(35)
  • uni-app微信小程序隐藏左上角返回按钮

    官方文档链接:uni.setNavigationBarTitle(OBJECT) | uni-app官网 (dcloud.net.cn) 首先要明确的是页面间的跳转方式有几种、每一种默认的作用是什么。  uniapp五种跳转方式  使用2、4种跳转方式使用;

    2024年04月26日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包