uni-app 安卓8在webview回退无效这个问题怎么解决

uni-app 安卓8在webview回退无效这个问题怎么解决

基本信息

项目属性 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 10
HBuilderX类型 正式
HBuilderX版本号 3.2.3
手机系统 Android
手机系统版本号 Android 8.1
手机厂商 vivo
手机机型 V1818A
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<web-view  
class="flex flex-1"  
src="url"
  ref="webview"
  @message="getMessage"
>
</web-view>  


getMessage(){
uni.navigateBack({
delta: 2
})
}

更多关于uni-app 安卓8在webview回退无效这个问题怎么解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

是不是 webview 加载的网页中有二级页面？

更多关于uni-app 安卓8在webview回退无效这个问题怎么解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有，在别的手机没有问题，只有安卓8系统的

针对Android 8在Webview中回退无效的问题，这通常是由于Android系统版本兼容性及uni-app的Webview组件事件处理机制导致的。以下是具体解决方案：

1. 使用Webview自带的返回控制 在Webview页面内，通过监听页面事件来处理返回逻辑：

onBackPress() {
  // 获取webview实例
  const webview = this.$refs.webview;
  if (webview && webview.canBack()) {
    webview.back();
    return true; // 阻止默认返回行为
  }
  return false;
}

2. 改进消息通信机制 当前代码中直接使用uni.navigateBack可能无法正确触发。建议改为：

getMessage(e) {
  const data = e.detail.data[0];
  if (data.action === 'goBack') {
    const webview = this.$refs.webview;
    if (webview && webview.canBack()) {
      webview.back();
    } else {
      uni.navigateBack({ delta: 1 });
    }
  }
}

3. Android 8特定兼容处理 在Android 8设备上，需要额外处理Webview初始化：

mounted() {
  // 延迟确保Webview完全加载
  setTimeout(() => {
    this.initWebview();
  }, 300);
},
methods: {
  initWebview() {
    const pages = getCurrentPages();
    const page = pages[pages.length - 1];
    const webview = page.$getAppWebview();
    if (webview) {
      const currentWebview = webview.children()[0];
      // 设置Android 8兼容参数
      currentWebview.setStyle({
        hardwareAccelerated: true
      });
    }
  }
}

4. 使用plus.webview处理

const wv = plus.webview.currentWebview();
const current = wv.children()[0];
current.addEventListener('close', function() {
  // 处理Webview关闭逻辑
}, false);
回到顶部