uni-app webview和h5通信插件使用体验不佳 - 赵永强

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

uni-app webview和h5通信插件使用体验不佳 - 赵永强

下载使用插件，在模拟机上点击出现这个问题：webViewJs is not defined

Harmonyos Next教程
1 回复

赵永强，

针对你提到的uni-app中webview与H5通信插件使用体验不佳的问题，我理解这通常涉及到跨域通信、数据同步及性能优化等方面的挑战。以下是一个基于uni-app框架，利用postMessage API进行webview与H5页面通信的示例代码，希望能为你提供一些实用的参考。

1. 在uni-app中嵌入webview

首先，在uni-app的页面中使用<web-view>组件加载H5页面，并设置src属性指向你的H5页面URL。

<template>
  <view>
    <web-view :src="webViewUrl" @message="handleMessage"></web-view>
    <button @click="sendMessageToH5">发送消息到H5</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: 'https://your-h5-page.com'
    };
  },
  methods: {
    sendMessageToH5() {
      // 向H5页面发送消息
      const message = { type: 'fromUniApp', content: 'Hello H5!' };
      plus.webview.currentWebview().evalJS(`
        window.postMessage(JSON.stringify(${JSON.stringify(message)}), '*');
      `);
    },
    handleMessage(event) {
      // 接收H5页面发送的消息
      const data = JSON.parse(event.detail.data);
      console.log('Received from H5:', data);
    }
  }
};
</script>

2. 在H5页面中接收与发送消息

在你的H5页面中，需要添加监听message事件来接收来自uni-app的消息，并使用postMessage发送消息回uni-app。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>H5 Page</title>
</head>
<body>
  <script>
    window.addEventListener('message', (event) => {
      const data = JSON.parse(event.data);
      console.log('Received from uni-app:', data);
      
      // 回复消息给uni-app
      const response = { type: 'fromH5', content: 'Hello uni-app!' };
      window.parent.postMessage(JSON.stringify(response), '*');
    });

    // 示例：主动发送消息给uni-app（通常响应某些用户操作）
    function sendMessageToUniApp() {
      const message = { type: 'initFromH5', content: 'Init message from H5' };
      window.parent.postMessage(JSON.stringify(message), '*');
    }
  </script>
</body>
</html>

此示例展示了如何在uni-app和H5页面之间建立双向通信。注意，evalJS方法用于在webview中执行JavaScript代码，从而实现向H5页面发送消息。同时，确保H5页面的postMessage方法正确地指定了目标origin（这里使用'*'表示接受所有来源的消息，生产环境中应考虑安全性）。

希望这个示例能帮助你改善webview与H5通信的体验。如果有更具体的问题或需求，欢迎继续讨论。

回到顶部