vue3+uniapp+js页面传参h5

在 Vue3 + UniApp 开发中，如果你需要从 JavaScript 页面（通常是 webview 或者是 Web 应用部分）向 H5（HTML5 页面）传递参数，你可以通过以下步骤：

1. **设置通信渠道**：Vue3 和 UniApp 之间可以利用 `uni-app` 提供的 `plus.webview.postMessage()` 方法，该方法用于从外部环境向 Webview 发送消息。

// JavaScript (uniapp) 端
uni.app.emit('messageToH5', { key: 'value' });

2. **监听接收**：在 H5 的页面上，你需要添加事件监听器来接收到这个消息。通常在 `<script>` 标签内处理：

<!-- HTML (H5) 端 -->
<script>
window.addEventListener('message', function(e) {
  if (e.origin !== '*') return; // 防止跨域安全问题
  console.log('Received data from uniapp:', e.data);
  // 这里可以根据接收到的数据做相应处理
});
</script>

3. **传递数据**：在 JavaScript 中发送的对象会被序列化并作为字符串传递给 H5，所以在 H5 接收端需要解析它：

// H5 解析接收到的数据
function handleMessage(e) {
  const data = JSON.parse(e.data);
  console.log('Parsed data:', data);
}