uniapp微信小程序 webview h5 postMessage

### 通信实现教程与示例 在 UniApp 微信小程序中，`webview` 是一个用于嵌入 H5 页面的组件。通过 `postMessage` 方法，可以实现 H5 页面与微信小程序之间的通信。以下是具体的实现方法和示例代码。 #### 小程序端配置 在小程序端，需要使用 `<web-view>` 组件加载 H5 页面，并通过 `@message` 事件监听 H5 发送的消息。此外，还可以通过 URL 参数向 H5 传递初始数据[^3]。 ```vue <template> <view class="box"> <web-view :webview-styles="webviewStyles" :src="webViewUrl" @message="getMessage" ></web-view> </view> </template> <script lang="ts"> import { ref } from 'vue'; export default { setup() { const webviewStyles = { progress: { color: '#FF3333' } }; const testData = { name: 'UniApp', age: 20 }; // 小程序向 H5 传参 const webViewUrl = ref<string>( `https://your-h5-domain.com/webview-upload?data=${encodeURIComponent( JSON.stringify(testData) )}` ); // 接收 H5 发送的消息 const getMessage = (e: any) => { console.log('接收到 H5 消息:', e.detail); }; return { webviewStyles, webViewUrl, getMessage, }; }, }; </script> ``` #### H5 页面配置 在 H5 页面中，可以通过 `window.postMessage` 方法向小程序发送消息。注意，`postMessage` 的目标窗口应为 `*` 或指定的小程序窗口[^4]。 ```javascript // H5 页面代码 document.addEventListener('DOMContentLoaded', () => { // 向小程序发送消息 const sendMessageToMiniProgram = (message) => { window.postMessage(message, '*'); }; // 示例：点击按钮后发送消息 document.getElementById('send-message-btn').addEventListener('click', () => { const message = { action: 'openMap', location: { lat: 39.91, lng: 116.39 } }; sendMessageToMiniProgram(message); }); // 接收小程序传递的参数 const urlParams = new URLSearchParams(window.location.search); const data = urlParams.get('data'); if (data) { console.log('接收到小程序传递的数据:', JSON.parse(decodeURIComponent(data))); } }); ``` #### 注意事项 1. **消息传递时机**：H5 使用 `postMessage` 向小程序发送消息时，小程序仅能在特定时机（如页面后退、组件销毁、分享等）接收到消息。 2. **实时通信限制**：如果需要实时通信，可以考虑使用 WebSocket 或其他技术实现双向通信[^2]。 3. **安全性**：确保消息内容经过加密或验证，防止恶意攻击。 ```python # 示例：WebSocket 实现实时通信（可选） import websocket def on_message(ws, message): print("接收到消息:", message) def on_error(ws, error): print("发生错误:", error) def on_close(ws, close_status_code, close_msg): print("连接关闭") def on_open(ws): ws.send("Hello MiniProgram") if __name__ == "__main__": websocket.enableTrace(True) ws = websocket.WebSocketApp( "wss://your-websocket-url.com", on_message=on_message, on_error=on_error, on_close=on_close ) ws.on_open = on_open ws.run_forever() ```