uni-app ios web-view 操作按钮后画面暂停问题。ios最新版本出现，低版本无此问题。

发布于 1周前 作者 vueper 来自 Uni-App

uni-app ios web-view 操作按钮后画面暂停问题。ios最新版本出现，低版本无此问题。

开发环境 版本号 项目创建方式
Windows windows11 HBuilderX

操作步骤：

  • 点击web-view中的按钮， 会影响web-view的视频播放

预期结果：

  • 点击web-view中的按钮，不影响视频播放， 视频不暂停

实际结果：

  • 点击web-view中的按钮，影响视频播放， 视频暂停

bug描述：

  • uni-app ios web-view 操作按钮后画面就暂停了。ios最新版本有这问题， 低版本没得这问题。

Harmonyos Next教程
3 回复

你提重复了吧，我同意在那个帖子里回复了


就在这个帖子回复， 谢谢。

针对你提到的 uni-app 中 web-view 组件在 iOS 最新版本中出现操作按钮后画面暂停的问题，这通常可能与WebView的性能优化、事件处理或者iOS系统更新引入的新特性或限制有关。以下是一个基本的代码示例，展示了如何在 uni-app 中使用 web-view 组件，并结合一些可能有助于解决问题的技巧。请注意，由于无法直接访问具体的设备和系统环境，这里的解决方案更多是基于一般性的建议和可能的代码调整。

示例代码

首先，确保你的 uni-app 项目中已正确引入并使用了 web-view 组件。

<template>
  <view>
    <web-view :src="webViewUrl" @message="handleMessage"></web-view>
    <button @click="sendMessageToWebView">Send Message to WebView</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: 'https://your-webview-content-url.com'
    };
  },
  methods: {
    sendMessageToWebView() {
      // 使用 postMessage 向 WebView 发送消息
      const message = { type: 'ACTION', data: 'yourActionData' };
      // 注意：这里的 this.$refs.webview 是假设你给了 web-view ref="webview"
      // 但在实际 uni-app 中，web-view 不支持 ref，所以需要通过其他方式触发，比如 URL 参数或 localStorage
      // 这里仅作为示例，实际应使用其他机制通信
      // this.$refs.webview.postMessage(JSON.stringify(message));
      
      // 替代方案：通过修改 URL 传递简单信息，或使用 localStorage/sessionStorage
      // 例如，修改 URL（不推荐复杂数据传递）
      // this.webViewUrl += '?action=yourAction&data=' + encodeURIComponent(JSON.stringify(message.data));
      // 注意重新加载页面可能不是最佳实践，这里仅为示例
    },
    handleMessage(event) {
      // 处理从 WebView 发回的消息
      console.log('Received message from WebView:', event.detail.data);
    }
  }
};
</script>

注意事项

  1. 性能优化：检查WebView加载的内容是否有性能瓶颈，如大量DOM操作、复杂动画等。
  2. 事件处理：确保事件处理逻辑高效，避免阻塞主线程。
  3. iOS系统特性：iOS新版本可能对WebView的行为有所调整，查阅Apple的官方文档了解相关变更。
  4. 通信机制：考虑使用更高效的通信方式，如通过URL参数传递简单信息（适用于简单场景），或利用localStorage/sessionStorage进行状态同步（注意跨域限制）。
  5. 调试工具：利用Safari的Web Inspector等工具对WebView内部进行调试，查看是否有异常或性能问题。

由于直接解决问题可能需要更具体的环境和日志信息，上述建议仅供参考，希望能为你提供一些思路。

回到顶部