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

<template>
	<view>
		<web-view src="https://xxx"></web-view>
	</view>
</template>
onShow() {
  getApp().globalData.webShowed = true;
},
  • 14
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp 中,要在 WebView 中实现返回一页的功能,可以通过以下步骤来实现: 1. 在使用 WebView 的页面中,引入 `uni.navigateBack()` 方法,该方法用于返回一页。 2. 在 WebView 页面中,监听 WebView回退事件。可以通过 `onmessage` 或 `postMessage` 方法来实现。 3. 在 WebView 页面中,当需要返回一页时,通过 `window.postMessage()` 方法向父页面发送消息。 4. 在父页面中,监听 WebView 页面发送的消息,并调用 `uni.navigateBack()` 方法实现返回一页的功能。 下面是一个示例代码: WebView 页面中的代码: ```html <template> <web-view src="https://example.com" @message="handleMessage"></web-view> </template> <script> export default { methods: { handleMessage(event) { // 监听 WebView 页面发送的消息 if (event.detail.data === 'back') { // 当接收到消息为 'back' 时,调用 uni.navigateBack() 返回一页 uni.navigateBack() } } } } </script> ``` 父页面中的代码: ```html <template> <view> <button @click="openWebView">打开 WebView</button> </view> </template> <script> export default { methods: { openWebView() { uni.navigateTo({ url: '/pages/webview/index' }) } }, onmessage(event) { // 监听 WebView 页面发送的消息 if (event.detail.data === 'back') { // 当接收到消息为 'back' 时,调用 uni.navigateBack() 返回一页 uni.navigateBack() } } } </script> ``` 这样,在 WebView 页面中,当需要返回一页时,可以通过 `window.postMessage('back')` 方法向父页面发送消息,父页面监听到消息后,调用 `uni.navigateBack()` 方法即可实现返回一页的功能。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值