更新记录

1.0.0（2025-11-14）下载此版本

1.0.0 (2025-11-14)

新增

首次发布
支持H5环境下的消息通信
提供postMessage方法用于向原生应用发送消息
支持Vue2和Vue3
添加完整的文档和使用示例

特性

经过实际项目测试验证
简单易用的API
完善的错误提示

平台兼容性

uni-app(4.86)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
√	√	√	√	-	-	-	-	-

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
-	-	-	-	-	-	-	-	-	-	-

webview-postmessage

uniapp打包成H5后，用于向原生应用发送消息的插件。

说明

经过实际项目测试验证，uniapp打包成H5后，向原生应用发送消息只能通过 webUni.postMessage 方式。

其他常见方式（如 uni.postMessage、window.parent.postMessage）在H5环境下无法正常工作。

功能特性

✅ 支持H5环境下的消息通信
✅ 经过实际项目测试验证
✅ 支持Vue2和Vue3
✅ 简单易用的API

安装

方式一：通过 npm 安装（推荐）

方式一：从 uni-app 插件市场安装

从uni-app插件市场下载插件
将插件放置在项目的 uni_modules 目录下
在需要使用的页面或组件中引入

使用方法

基础用法

import webviewPostMessage from '@/uni_modules/webview-postmessage/index.js'

// 发送消息到原生应用
webviewPostMessage.postMessage({ 
  data: { 
    action: 'closeWebView' 
  } 
})

在Vue组件中使用

<template>
  <view>
    <button @click="sendMessage">发送消息</button>
  </view>
</template>

<script setup>
import webviewPostMessage from '@/uni_modules/webview-postmessage/index.js'

const sendMessage = () => {
  webviewPostMessage.postMessage({
    data: {
      action: 'closeWebView',
      // 可以传递其他数据
      // token: 'xxx',
      // userId: 123
    }
  })
}
</script>

在页面中使用

import webviewPostMessage from '@/uni_modules/webview-postmessage/index.js'

// 在 onLoad 或 onShow 中发送消息
onLoad(() => {
  webviewPostMessage.postMessage({
    data: {
      action: 'init',
      pageId: 'home'
    }
  })
})

// 关闭页面时发送消息
const closePage = () => {
  webviewPostMessage.postMessage({
    data: {
      action: 'closeWebView'
    }
  })
}

API说明

postMessage(options)

向原生应用发送消息

参数：

参数	类型	必填	说明
options	Object	是	消息选项
options.data	Object	是	要发送的数据对象

示例：

webviewPostMessage.postMessage({
  data: {
    action: 'closeWebView',
    // 其他自定义数据
    type: 'userAction',
    value: 'someValue'
  }
})

注意事项

仅适用于H5环境：此插件主要用于uniapp打包成H5后的消息通信，App端和小程序端可能需要使用其他方式
必须传递data属性：postMessage方法必须传入包含data属性的对象
数据格式：data可以是任意JSON可序列化的对象

测试验证

此插件经过以下环境测试：

✅ uniapp打包成H5
✅ 微信浏览器
✅ Chrome浏览器
✅ Safari浏览器
✅ Android浏览器

常见问题

Q: 为什么不能使用uni.postMessage？

A: 经过测试，uni.postMessage 在H5环境下无法正常工作，只有 webUni.postMessage 方式有效。

Q: 支持哪些平台？

A: 目前主要支持H5平台（包括移动端和PC端浏览器），App端和小程序端可能需要使用原生API。

Q: 可以传递什么类型的数据？

A: 可以传递任何JSON可序列化的数据，包括对象、数组、字符串、数字等。

版本历史

详见 changelog.md

许可证

MIT

作者

如有问题或建议，欢迎反馈。