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

最新推荐文章于 2025-11-11 16:58:05 发布

原创

最新推荐文章于 2025-11-11 16:58:05 发布 · 4.6k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #uni-app

以下是在 **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" 
  />
</templa