uni-app写的H5无法与uni-app写的小程序webview之间通讯

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

uni-app写的H5无法与uni-app写的小程序webview之间通讯

代码示例

<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="module" src="/utils/uni.webview.js"></script>
</body>

在外层 index.html 里引入的文件按文档里下的最新版本。

代码片段

onLoad((option) => {
  document.addEventListener('UniAppJSBridgeReady', function() {
    uni.webView.getEnv(function(res) {
      console.log('当前环境：' + JSON.stringify(res));
    });
    // uni.webView.navigateTo(...)
  });
})

这是在首页调用的方法，接收不到 console 输出。


Harmonyos Next教程
2 回复

document.addEventListener(‘UniAppJSBridgeReady’ 这个在小程序里没触发


在uni-app中，实现H5页面与小程序内嵌的WebView组件之间的通讯，可以通过一些特定的方法来实现。这里我们主要利用小程序提供的 postMessage API 以及 H5 页面中的监听机制。

小程序端代码

首先，在小程序中使用 web-view 组件加载H5页面，并定义一个函数来向H5页面发送消息。

// pages/index/index.js
Page({
  data: {
    webViewUrl: 'https://your-h5-page-url.com'  // 替换为你的H5页面URL
  },

  onLoad() {
    this.webViewContext = wx.createWebViewContext('web-view-id', this);
  },

  sendMessageToH5() {
    this.webViewContext.postMessage({
      data: 'Hello from Mini Program!'
    });
  }
});

<!-- pages/index/index.wxml -->
<view>
  <button bindtap="sendMessageToH5">Send Message to H5</button>
  <web-view id="web-view-id" src="{{webViewUrl}}"></web-view>
</view>

H5端代码

在H5页面中，需要监听来自小程序的消息。可以使用 message 事件来实现。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>H5 Page</title>
</head>
<body>
  <h1>H5 Page</h1>
  <script>
    // 监听来自小程序的消息
    window.addEventListener('message', function(event) {
      // 确保消息来源是可信的（可选）
      if (event.origin !== 'https://your-mini-program-domain.com') {  // 替换为你的小程序域名
        return;
      }
      console.log('Message from Mini Program:', event.data);
      // 在这里处理接收到的消息
      alert('Received from Mini Program: ' + event.data.data);
    });

    // 发送消息给小程序（如果需要双向通讯）
    function sendMessageToMiniProgram(data) {
      if (window.WeixinJSBridge) {
        WeixinJSBridge.invoke('postMessageToMiniProgram', { data: data }, function(res) {
          console.log('Message sent to Mini Program:', res);
        });
      }
    }
  </script>
</body>
</html>

注意事项

  1. 安全性：在实际应用中，务必验证消息的来源，确保消息是从可信的小程序域名发送的。
  2. 跨域问题：确保小程序和H5页面的域名已经配置在微信公众平台的业务域名中。
  3. 兼容性：不同版本的微信客户端可能对WebView的API支持有所不同，测试时需注意。

通过以上代码，你可以在uni-app中实现H5页面与小程序WebView之间的通讯。

回到顶部