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

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

---

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

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

<!-- 网页端 HTML/JavaScript -->
<script>
// 发送消息到小程序（方式1）
uni.postMessage({
  data: {
    type: 'customEvent',
    payload: { key: 'value' }
  }
});

// 或者（方式2，兼容原生小程序语法）
wx.miniProgram.postMessage({
  data: {
    type: 'customEvent',
    payload: { key: 'value' }
  }
});
</script>

---

‌2. UniApp 页面接收消息‌

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

<!-- UniApp 页面 (pages/webview-page.vue) -->
<template>
  <!-- 绑定 WebView 组件 -->
  <web-view 
    :src="webViewUrl" 
    @message="handleWebViewMessage" 
  />
</template>

<script>
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'
      });
    }
  }
};
</script>

---

‌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