Webview的信息发送给小程序，Uniapp页面中invokeAppService postMessage信息小程序应该如何接收

以下是在 **UniApp 中通过 WebView 发送消息到小程序，并在 UniApp 页面接收 invokeAppService postMessage 信息的完整代码示范：

---

‌1. WebView 页面（网页端）发送消息‌

在 WebView 加载的网页中，调用 uni.postMessage 或 wx.miniProgram.postMessage 发送消息：

// 发送消息到小程序（方式1）uni.postMessage({ data: { type: \'customEvent\', payload: { key: \'value\' } }});// 或者（方式2，兼容原生小程序语法）wx.miniProgram.postMessage({ data: { type: \'customEvent\', payload: { key: \'value\' } }});

---

‌2. UniApp 页面接收消息‌

在 UniApp 的 Vue 页面中，通过监听 @message 事件接收消息：

  export default { data() { return { webViewUrl: \'https://your-webview-domain.com\' // 替换为实际 URL }; }, methods: { // 处理 WebView 消息 handleWebViewMessage(e) { // UniApp 中消息数据在 e.detail.data 数组中 const messages = e.detail.data; messages.forEach((message) => { console.log(\'收到 WebView 消息:\', message); // 根据消息类型处理业务逻辑 if (message.type === \'customEvent\') { this.handleCustomEvent(message.payload); } }); }, // 示例：处理自定义事件 handleCustomEvent(payload) { console.log(\'处理自定义事件:\', payload.key); uni.showToast({ title: `收到数据: ${payload.key}`, icon: \'none\' }); } }};

---

‌3. 关键配置说明‌

‌(1) 域名白名单‌

• 确保 WebView 的域名已在小程序后台 ‌「开发管理」->「开发设置」->「业务域名」‌ 中配置。
• ‌本地调试‌：可在开发者工具中勾选 ‌「不校验合法域名」‌ 临时跳过验证。

**(2) 消息发送机制

• ‌网页端发送‌：必须通过 uni.postMessage 或 wx.miniProgram.postMessage 发送消息。
• ‌数据格式‌：消息数据必须为 ‌可序列化的 JSON 对象‌，不支持函数或复杂对象。

**(3) 兼容性处理

• ‌多平台适配‌：若需跨平台（H5/App），建议使用 uni.postMessage，并在非小程序端用 uni.$on 监听。

---

‌4. 调试技巧‌

‌(1) 查看日志‌

• 打开微信开发者工具，在控制台查看 invokeAppService postMessage 日志：

  [AppService] invokeAppService postMessage: {\"data\":{...}}

‌(2) 模拟消息发送‌

在 UniApp 页面中模拟接收消息（用于测试）：

// 模拟 WebView 消息const mockEvent = { detail: { data: [{ type: \'test\', payload: { key: \'mock\' } }] }};this.handleWebViewMessage(mockEvent);

**(3) 断点调试

在 handleWebViewMessage 方法中设置断点，检查 e.detail.data 结构。

---

‌5. 完整流程图‌

WebView 页面发送消息 → 微信客户端转发 → 小程序 AppService 接收 → UniApp 页面监听 @message → 处理业务逻辑

---

‌常见问题排查‌

1. ‌收不到消息‌：

   • 检查域名是否配置正确。
   • 确认网页端调用了 postMessage。
   • 检查事件监听是否绑定到正确的 web-view 组件。

2. ‌数据格式错误‌：

   • 确保消息数据为简单 JSON 对象。
   • 避免发送 undefined 或 function。

3. ‌跨平台问题‌：

   • 非小程序端需使用 uni.$on 监听，参考 UniApp 全局通信。

---

通过以上代码和配置，即可在 UniApp 中完整实现 WebView 到小程序的消息通信。

注意：在小程序中使用消息传递时，小程序会在特定的时机才能触发消息的接收

详见官网的说明

web-view | 微信开放文档

属性 类型 默认值 必填 说明 最低版本 bindmessage eventhandler 否 网页向小程序 postMessage 时，会在以下特定时机触发并收到消息：小程序后退、组件销毁、分享、复制链接（2.31.1）。e.detail = { data }，data是多次 postMessage 的参数组成的数组。 1.6.4

在线问答平台