uniapp嵌套webview無法返回上一級解決方式

更新時間：2024年05月27日 10:24:55 作者：Smile_ping

uniapp是一款非常強大的跨平臺開發(fā)框架,它可以讓我們只編寫一份代碼,就能在多個平臺上運行,這篇文章主要給大家介紹了關(guān)于uniapp嵌套webview無法返回上一級的解決方式,需要的朋友可以參考下

遇到問題

在設(shè)備上運行時，無法回退上一級，直接退出應用了；
預期：一級級的返回頁面；

解決方式

個人想到臨時解決方式，歡迎老鐵們可以分享其他方式

進入首頁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 頁面，已加載，則執(zhí)行退出應用，否則跳轉(zhuǎn)頁面

App.vue

globalData: {
  webShowed: false, // 標識
},

index.vue

const app = getApp()

onShow() {
 	this.handleLaunchJump();
}

handleLaunchJump() {
  let sysInfo = uni.getSystemInfoSync();
  // 這里我處理Android、 Ios，跳轉(zhuǎn)及退出方式，根據(jù)個人所需
  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; //計劃創(chuàng)建的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); //如果是頁面初始化調(diào)用時，需要延時一下

    // #endif
  },
};
</script>