uni-app 报Bug uniMP与webview不能共存

uni-app 报Bug uniMP与webview不能共存

操作步骤：

放两个tab item，itemA运行uniMP，itemB运行 webview，app运行后，点击itemA，小程序正常运行，再点击itemB,一片空白，不加载网页，清除app后台后重新打开app，点击itemB，可正常显示网页，再点击itemA，app隐藏了，小程序不运行在前台

预期结果：

点击itemA运行小程序，再点击itemB，显示网页

实际结果：

点击itemA，小程序正常运行，再点击itemB,一片空白，不加载网页，清除app后台后重新打开app，点击itemB，可正常显示网页，再点击itemA，app隐藏了，小程序不运行在前台

bug描述：

uniMP和webview不能共存，Uniapp-X开发的app，通过插件引入uniMP,app中用uniMP加载小程序，用webview加载网页，单独运行小程序或者webview都正常，但小程序加载成功后，再回到app中，webview就不能加载网页（网页空白），同样的，app中点了webview后小程序就加载不了（app hide）


更多关于uni-app 报Bug uniMP与webview不能共存的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

bug 已修复
更新插件至最新版本，已修复此问题 https://ext.dcloud.net.cn/plugin?id=17638

更多关于uni-app 报Bug uniMP与webview不能共存的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请上传一个能重现问题的测试工程

这是官方示例，添加了一个webview页面（因附件大小限制，删除了uni_modules/uni-unimp/utssdk/app-android/libs下的aar，请自行添加）

石沉大海了?

我看一下

在处理 uni-app 中遇到的 uniMP（uni-app Multi-Platform，即uni-app的多端支持框架）与 webview 不能共存的问题时，通常涉及到页面渲染和组件冲突。以下是一些可能的原因和解决方案，主要通过代码示例展示如何配置和使用 webview 组件，以确保与 uniMP 的兼容性。

问题分析

  1. 组件冲突：uni-app 中的原生组件与 webview 可能存在渲染层级的冲突。
  2. 页面加载逻辑：webview 的加载时机和方式可能与 uniMP 的页面生命周期不一致。

解决方案

1. 确保 webview 组件正确配置

在 uni-app 中使用 webview 组件时，需要正确配置其 src 属性指向的网页地址。以下是一个简单的 webview 组件使用示例：

<template>
  <view>
    <web-view :src="webviewUrl" style="width: 100%; height: 100%;"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: 'https://www.example.com' // 替换为实际的URL
    };
  }
};
</script>

<style>
/* 可根据需要调整样式 */
</style>

2. 控制 webview 的加载时机

确保 webview 的加载不会干扰 uniMP 的页面渲染。可以通过条件渲染来控制 webview 的显示时机：

<template>
  <view>
    <web-view v-if="showWebview" :src="webviewUrl" style="width: 100%; height: 100%;"></web-view>
    <button @click="toggleWebview">切换 Webview 显示</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webviewUrl: 'https://www.example.com',
      showWebview: false
    };
  },
  methods: {
    toggleWebview() {
      this.showWebview = !this.showWebview;
    }
  }
};
</script>

3. 使用 onNavigationStateChange 监听 webview 状态

监听 webview 的导航状态变化，有助于调试和解决潜在的加载问题：

<web-view @navigationStateChange="handleNavigationStateChange" :src="webviewUrl"></web-view>

<script>
export default {
  methods: {
    handleNavigationStateChange(event) {
      console.log('Navigation state change:', event.detail);
    }
  }
};
</script>

结论

通过上述代码示例，你可以确保 webview 组件在 uni-app 中正确配置和使用，同时控制其加载时机和监听状态变化，从而避免与 uniMP 的冲突。如果问题依旧存在，建议检查具体的错误信息，并根据 uni-app 和相关依赖库的版本更新日志查找是否有已知问题和修复。

回到顶部