标签 webview 下的文章

一、引言

在实际项目中，有时需要在小程序中加载一个已有的 H5 页面（比如业务中台、第三方支付页或统计分析页），同时又要与这个 H5 页面互相传递数据。例如：

小程序向 H5 传递初始化参数：用户登录态、用户 ID、一些业务配置等；
H5 向小程序通知事件：支付成功、分享结果、业务回调等；
实时双向通信：H5 中发生某些操作后，需要立即通知小程序 UI 做出变化，或小程序根据实时需求下发指令给 H5 更新界面。

微信/支付宝/百度等主流小程序平台，均提供了 <web-view> 组件，让我们在小程序内嵌一个 WebView（H5 容器）。然而，如何在两者之间做安全、稳定且流畅的数据交互，就成了一个必须掌握的关键点。本文将围绕以下几个方面展开：

方案总览：介绍常见的交互思路与优劣对比。
小程序 → H5：详解 URL 参数 + postMessage 方案。
H5 → 小程序：详解 wx.miniProgram.postMessage（或同类 API）和跳回带参方案。
示例代码：微信小程序与 H5 协作的完整示例。
其他平台差异：支付宝/百度等小程序的兼容说明。
安全与注意事项：防止数据泄露、XSS、数据同步时序等细节。

通过本文，你将学会如何从“最简单的 URL 参数”到“实时双向 postMessage”，逐步搭建一个健壮、易维护的小程序与 H5 交互体系，并能快速在项目中复用。

二、方案总览

在小程序与 H5 WebView 间做数据交互，常用的思路可以归纳为以下几类：

URL 参数方式
- 小程序向 H5 传递数据最直观的方式：把需要的参数以 ?key1=val1&key2=val2 形式拼到 H5 地址后。
- 优点：兼容性极佳，简单粗暴；H5 只需要通过 window.location.search 即可获取。
- 缺点：只能传递“页面首次加载时的静态”数据；参数长度受限制，不适合传输大量、复杂或敏感数据；刷新页面会丢失。
WebView postMessage（小程序 → H5）
- 微信小程序提供 webviewContext.postMessage({ data }) 接口，可在 WebView 加载完成后向 H5 发送一个“消息事件”。
- H5 端通过监听 window.addEventListener('message', handler) 接收。
- 优点：可靠、可实时推送；适合把登录态、Token、状态变更等动态数据发送给 H5。
- 缺点：只能在 WebView 加载完成（onLoad）后使用，过早调用会失败；需要 H5 侧也做相应监听。
H5 wx.miniProgram.postMessage（H5 → 小程序）
- H5 页面在小程序 WebView 环境中，注入了 wx.miniProgram 全局对象（仅限微信小程序），可调用 wx.miniProgram.postMessage({ data })，将消息传给小程序。
- 小程序端通过 <web-view> 组件的 bindmessage（或 onMessage）事件回调获取。
- 优点：双向对称，可在 H5 任意时机发消息给小程序；无需刷新页面。
- 缺点：该接口仅在小程序环境有效，H5 本地浏览器或其他环境会抛错；需要做环境检测。
H5 页面跳回带参数（H5 → 小程序）
- 在 H5 完成某些操作后，通过 window.location.href = 'weixin://dl/business/?param=xxx' 形式触发小程序跳回（或调用小程序导航 API）。
- 或者通过“点击”特定的“MiniProgram JS-SDK”接口（如 WeixinJSBridge.invoke('launchMiniProgram', ...)）。
- 优点：可携带数据在小程序页面重新打开时传递；兼顾了一些老版本兼容。
- 缺点：需要页面跳转/刷新，不能实现实时、无缝的交互；体验相对粗糙；多用于“完成操作后回跳首页”。
Hybrid 方案（SDK/桥接）
- 对于“自定义容器的 H5”或“自己封装的 WebView”，可以引入专门的 JSBridge，通过约定方法名进行通信。
- 这种方式在第三方 App 中更常见（如抖音内置浏览器、头条内置浏览器），本文着重小程序官方 WebView，故不详细展开。

方案对比表（示例）

方案	小程序→H5 可行性	H5→小程序可行性	实时性	适用场景	核心 API/事件
URL 参数	✅	❌	否	首次加载、静态参数	`<web-view src="https://.../page?key=val">`
小程序 `postMessage`	✅	❌	是	页面加载后动态推送	`const ctx = this.createWebViewContext('webviewID'); ctx.postMessage()`
H5 `wx.miniProgram.postMessage`	❌（需 H5 适配）	✅	是	H5 侧主动推送数据	`window.wx.miniProgram.postMessage()`
H5 跳回小程序带参	❌	✅	否	操作完成后返回或跳转	`window.location.href = 'weixin://dl/business/?param=...'` / JS-SDK
自定义 JSBridge（第三方）	✅	✅	可自定义	特殊容器/自有客户端	视具体容器而定

三、小程序 → H5：URL 参数 & `postMessage`

3.1 最简单的 URL 参数方式

当只需要在 H5 页面首次加载时接收一些“初始化数据”，可以直接通过 URL 参数传递。例如：

<!-- 小程序 WXML / AXML -->
<web-view 
  id="myWebview" 
  src="{{webviewUrl}}"
  bindload="onWebviewLoad"
/>

// 小程序 JS（假设以微信小程序为例）
Page({
  data: {
    webviewUrl: ''
  },
  onLoad(options) {
    // 假设我们要传递 userId=12345, token=abcdef
    const userId = 12345;
    const token = 'abcdef'; 
    // 注意需要 encodeURIComponent 对值进行编码
    this.setData({
      webviewUrl: `https://example.com/h5page.html?userId=${userId}&token=${encodeURIComponent(token)}`
    });
  },
  onWebviewLoad() {
    console.log('WebView 已经加载完成');
  }
});

在 H5 端，只需要在 JavaScript 中解析 window.location.search：

<!-- H5 页面 (h5page.html) 中的脚本 -->
<script>
  function parseQuery() {
    const query = window.location.search.substring(1); // 去掉 '?'
    const vars = query.split('&');
    const params = {};
    vars.forEach(pair => {
      const [key, value] = pair.split('=');
      params[key] = decodeURIComponent(value || '');
    });
    return params;
  }

  document.addEventListener('DOMContentLoaded', () => {
    const params = parseQuery();
    console.log('从小程序传过来的参数：', params);
    // 例如，params.userId == "12345"，params.token == "abcdef"
  });
</script>

注意事项：
URL 最大长度有限制（开发者工具下 \~2KB，上线后各机型有所差异），请避免一次性传递过多信息或大型 JSON；
URL 可见，敏感数据（如真实 Token）不要以明文形式放在 URL 中，否则有泄露风险；
如果数据量很大，建议改用后续介绍的 postMessage 方式或请求后端接口再拉取。

3.2 小程序 `postMessage`（动态推送）

URL 参数只能在页面首次渲染前生效，但在 H5 运行过程中，有时需要向 H5 推送最新状态或动态数据。这时就需要用到小程序提供的 WebView 上下文（WebViewContext）和 postMessage：

3.2.1 小程序端：创建并调用 WebViewContext

给 <web-view> 绑定一个 id

<!-- WXML / AXML -->
<web-view id="myWebview" src="{{webviewUrl}}" bindload="onWebviewLoad" />

Page/Component 中获取 WebView 上下文

Page({
  data: {
    webviewUrl: 'https://example.com/h5page.html'
  },
  onLoad() {
    // 1. 在 onLoad 或 onReady 中创建上下文
    this.webviewCtx = wx.createWebViewContext('myWebview');
  },
  onWebviewLoad() {
    console.log('WebView 内的 H5 已加载完毕');
    // 2. 页面加载完成后，发送第一条消息
    this.webviewCtx.postMessage({
      command: 'init',
      payload: {
        userId: 12345,
        token: 'abcdef',
        timestamp: Date.now()
      }
    });
  },
  // 假设在某个按钮点击后，需要再次推送数据
  onButtonClick() {
    this.webviewCtx.postMessage({
      command: 'updateData',
      payload: {
        newValue: Math.random()
      }
    });
  }
});

wx.createWebViewContext('myWebview') 会返回一个包含 postMessage 方法的上下文对象，id 必须与 <web-view id="..."> 保持一致；
只能在小程序端将消息发送给 H5，不能直接在 H5 端调用 postMessage（H5 → 小程序需要使用专用 API，详见下节）；
bindload="onWebviewLoad" 代表 <web-view> 在加载完毕时，会触发小程序的 onWebviewLoad 回调，此时 H5 页面已经渲染完成，如需向 H5 发送第一条数据，必须在此时机或之后才可执行。

3.2.2 H5 端：监听 `message` 事件

在 H5 页面中，需要监听 window.addEventListener('message', handler) 来接收小程序发来的消息。示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>H5 页面（接收小程序消息）</title>
</head>
<body>
  <h1>H5 内嵌页面</h1>
  <div id="log"></div>

  <script>
    function log(msg) {
      const $log = document.getElementById('log');
      const p = document.createElement('p');
      p.textContent = msg;
      $log.appendChild(p);
    }

    // 1. 检测是否在小程序 web-view 内
    function isInMiniProgram() {
      // 微信小程序会在 H5 全局注入 wx 对象，并且 wx.miniProgram.getEnv 可用
      return window.__wxjs_environment === 'miniprogram' || 
             (window.wx && window.wx.miniProgram && typeof window.wx.miniProgram.postMessage === 'function');
    }

    document.addEventListener('DOMContentLoaded', () => {
      log(`当前环境是否在小程序 WebView 内？ ${isInMiniProgram()}`);

      // 2. 监听 message 事件
      window.addEventListener('message', (event) => {
        // event.data 中即为小程序 postMessage 的对象
        const data = event.data || {};
        log(`收到小程序消息：${JSON.stringify(data)}`);

        if (data.command === 'init') {
          log(`初始化数据：userId=${data.payload.userId}, token=${data.payload.token}`);
          // 可以在此处保存到 localStorage 或直接渲染到页面
        } else if (data.command === 'updateData') {
          log(`动态更新：newValue=${data.payload.newValue}`);
        }
      });
    });
  </script>
</body>
</html>

ASCII 图解：小程序 → H5 的 postMessage 流程

┌────────────────────┐      1. web-view 加载完成      ┌──────────────────────────┐
│  小程序 JS 逻辑    │──────────────────────────────▶│   H5(WebView) 脚本        │
│  createWebViewCtx  │                              │  window.addEventListener │
│  postMessage({...})│◀──────────────────────────────│  监听 message 事件        │
└────────────────────┘      2. 触发事件回调         └──────────────────────────┘

代码执行顺序：

小程序端 onLoad 创建 webviewCtx，设置好 bindload；
WebView 内的 H5 页面渲染完成后，触发小程序的 onWebviewLoad；
小程序执行 webviewCtx.postMessage({ command: 'init', ... })，将数据发给 H5；
H5 端的 window.addEventListener('message', handler) 捕获到消息，并做相应处理。

注意：
时机控制：必须等 H5 DOM 渲染完成之后再调用 postMessage，否则 H5 脚本尚未注册 message 监听，消息会丢失；可在 onWebviewLoad 或用户交互后再发。
兼容性：微信小程序的 postMessage 需配合 window.addEventListener('message', ...)；支付宝小程序及百度小程序类似，但可能需要使用各自的 my.createWebViewContext 或 swan.createWebViewContext。
消息格式：建议使用统一的“命令 + payload”模式，方便在 H5 端做分发处理。

四、H5 → 小程序：`wx.miniProgram.postMessage` & 跳回带参

在 H5 页面内部，如果需要向小程序主动“推送”数据或指令，可以借助微信小程序为 WebView 内注入的 wx.miniProgram 对象。核心 API 为 wx.miniProgram.postMessage，小程序端通过 <web-view> 的 bindmessage 事件（或 onMessage 回调）获取。

4.1 微信小程序场景

4.1.1 H5 端调用 `wx.miniProgram.postMessage`

在 H5 中，需要先判断是否在小程序环境下，再调用对应 API。示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>H5 页面 （向小程序 postMessage）</title>
</head>
<body>
  <h2>H5 向小程序示例</h2>
  <button id="sendBtn">发送消息给小程序</button>

  <script>
    function isInWxMiniProgram() {
      return window.__wxjs_environment === 'miniprogram' || 
             (window.wx && window.wx.miniProgram && window.wx.miniProgram.postMessage);
    }

    document.getElementById('sendBtn').addEventListener('click', () => {
      if (!isInWxMiniProgram()) {
        alert('当前不在微信小程序 web-view 内部，无法发送消息');
        return;
      }
      // 组装要发送的数据
      const msg = {
        command: 'h5ToMini',
        payload: {
          result: '支付成功',
          orderId: 'ORD123456'
        }
      };
      // 发送
      window.wx.miniProgram.postMessage({ data: msg });
      console.log('已向小程序发送消息：', msg);
    });
  </script>
</body>
</html>

重点解析：
window.__wxjs_environment === 'miniprogram' 是微信官方推荐的判断方式，表示当前 H5 运行在微信小程序（WebView）环境中；
window.wx.miniProgram.postMessage({ data }) 会将对象 data 传回给小程序；
如果 H5 在普通浏览器环境中访问，则 window.wx 可能为 undefined，此时需避免直接调用，否则会抛错。

4.1.2 小程序端接收 H5 消息：`bindmessage` / `onMessage` 回调

在小程序的 WXML/AXML 中，给 <web-view> 注册 bindmessage 或 onMessage 回调：

<!-- WXML -->
<web-view 
  id="myWebview" 
  src="{{webviewUrl}}" 
  bindmessage="onWebMessage" 
/>

// 小程序 JS
Page({
  data: {
    webviewUrl: 'https://example.com/h5-to-mini.html'
  },
  onWebMessage(e) {
    // e.detail.data 中包含了 H5 发来的消息
    const msg = e.detail.data || {};
    console.log('收到 H5 消息：', msg);
    if (msg.command === 'h5ToMini') {
      // 处理逻辑，例如跳转或弹窗
      wx.showToast({
        title: `订单 ${msg.payload.orderId} 支付成功`,
        icon: 'success'
      });
    }
  }
});

流程图示（H5 → 小程序 postMessage）

┌────────────────────────────────┐      1. H5 点击按钮调用             ┌───────────────────────────┐
│     H5 页面 (window.wx.miniProgram.postMessage) │────────────────────────▶│  小程序 <web-view>        │
│                                 │      2. 小程序 onWebMessage 回调触发  │  bindmessage 事件         │
└────────────────────────────────┘                                        └───────────────────────────┘

执行顺序：

用户在 H5 页面点击 “发送消息给小程序” 按钮；
H5 脚本执行 window.wx.miniProgram.postMessage({ data: msg })；
小程序内的 <web-view> 触发 bindmessage（或 onMessage）回调，e.detail.data 中即为 H5 发来的 msg；
小程序根据 msg.command 做相应处理。

注意：
window.wx.miniProgram.postMessage 必须在 H5 端已经引入了微信 JS-SDK，并且页面已经在小程序的 WebView 环境中；否则调用会失败；
同样地，网页在支付宝/百度/字节等小程序时，需要使用对应平台的 API（如支付宝是 my.miniProgram.postMessage，百度是 swan.miniProgram.postMessage）。

4.2 H5 跳回小程序带参（备用方案）

如果在某些极端场景下，postMessage 不能满足需求，或者需要在操作完成后“关闭当前 H5 页面并跳回小程序”，可以使用“跳回带参”方案。思路如下：

H5 端在完成操作后，调用“跳转到小程序页面”的 JS-SDK 接口
- 微信小程序官方文档中，H5 页面可调用 WeixinJSBridge.invoke('launchMiniProgram', { ... })。
- 但该接口一般仅在微信公众号的 H5 中可用，不适用于小程序 WebView；在小程序 WebView 中更推荐用 wx.miniProgram.navigateBack({ delta: 1, success: ()=>{} }) 或直接在小程序端监听。
H5 新开一个临时页面，URL 指向小程序页面，带需要的参数
- 举例：H5 操作完成后，跳转到 weixin://dl/officialaccounts/?params=... 或 weixin://dl/business/?params=...。
- 但该方式在小程序与公众号、企业微信、App 内置 WebView 中效果差异较大，且体验不够流畅。

综合来看，“跳回小程序带参”并非通用方案，此处仅作了解。若只是需要在 H5 内完成业务后，让小程序执行某些操作，更推荐 wx.miniProgram.postMessage + navigateBack 组合：

H5 端：

if (isInWxMiniProgram()) {
  const msg = { command: 'paymentDone', payload: { orderId: 'ORD12345', amount: 98.5 } };
  window.wx.miniProgram.postMessage({ data: msg });
  // 通知 H5 页面跳回
  window.wx.miniProgram.navigateBack();
}

小程序端：

Page({
  onWebMessage(e) {
    const msg = e.detail.data || {};
    if (msg.command === 'paymentDone') {
      // 支付成功逻辑
      wx.showToast({ title: '支付完成：' + msg.payload.orderId, icon: 'success' });
    }
  }
});

这种方式可以做到“H5 告知小程序并主动关闭 H5 页面”双重效果，用户体验也更连贯。

五、示例：微信小程序与 H5 的完整交互

下面整合上述思路，给出一个微信小程序 + H5 WebView 的示例项目结构与核心代码，帮助你快速上手。

5.1 项目结构（精简示例）

├─ miniprogram/                  # 小程序端目录
│   ├─ pages/
│   │   └─ index/
│   │       ├─ index.wxml
│   │       ├─ index.js
│   │       └─ index.wxss
│   ├─ pages/
│   │   └─ webview/
│   │       ├─ webview.wxml
│   │       ├─ webview.js
│   │       └─ webview.wxss
│   ├─ app.js
│   ├─ app.json
│   └─ app.wxss
└─ h5/                           # H5 端代码（可以单独部署）
    ├─ index.html                # 用于小程序 postMessage 测试
    └─ h5-to-mini.html           # 用于 H5 → 小程序 postMessage 测试

5.2 小程序端代码

5.2.1 `app.json`

{
  "pages": [
    "pages/index/index",
    "pages/webview/webview"
  ],
  "window": {
    "navigationBarTitleText": "小程序与 H5 交互Demo"
  }
}

5.2.2 `pages/index/index.wxml`

<view class="container">
  <button bindtap="onOpenWebview">打开 H5 页面</button>
</view>

5.2.3 `pages/index/index.js`

// pages/index/index.js
Page({
  data: {
    // 初始化为本地 H5 服务地址或线上 H5 地址
    // 这里假设 H5 已部署到 https://your-domain/h5/index.html
    h5Url: 'https://your-domain/h5/index.html'
  },
  onOpenWebview() {
    // 跳转到 WebView 页面，并将 h5Url 传入
    wx.navigateTo({
      url: `/pages/webview/webview?src=${encodeURIComponent(this.data.h5Url)}`
    });
  }
});

5.2.4 `pages/webview/webview.wxml`

<view class="container">
  <!-- webview 页面展示区域 -->
  <web-view 
    id="myWebview" 
    src="{{webviewUrl}}" 
    bindload="onWebviewLoad"
    bindmessage="onWebMessage"
  />
</view>

5.2.5 `pages/webview/webview.js`

// pages/webview/webview.js
Page({
  data: {
    webviewUrl: ''  // 将从 options 中获取
  },
  onLoad(options) {
    // options.src 为 encodeURIComponent 编码后的 H5 地址
    const url = decodeURIComponent(options.src || '');
    this.setData({ webviewUrl: url });

    // 创建 WebViewContext
    this.webviewCtx = wx.createWebViewContext('myWebview');
  },
  onWebviewLoad() {
    // WebView 加载完成后，动态向 H5 发送初始化消息
    const initMsg = {
      command: 'init',
      payload: {
        userId: 10086,
        token: 'demo_token_123'
      }
    };
    this.webviewCtx.postMessage({ data: initMsg });
  },
  onWebMessage(e) {
    // H5 通过 wx.miniProgram.postMessage 发送过来的消息都在 e.detail.data
    const msg = e.detail.data || {};
    console.log('收到 H5 消息：', msg);
    if (msg.command === 'h5ToMini') {
      wx.showToast({
        title: `H5 说：${msg.payload.text}`,
        icon: 'none'
      });
    } else if (msg.command === 'paymentDone') {
      wx.showToast({
        title: `订单 ${msg.payload.orderId} 支付成功`,
        icon: 'success'
      });
      // 可根据业务逻辑决定是否关闭 WebView，示例这里调用 navigateBack
      wx.navigateBack(); 
    }
  }
});

5.2.6 `app.js`（可选，用于演示“小程序 → H5 再次推送”）

// app.js
App({
  globalData: {
    appLaunchedAt: Date.now()
  }
});

5.3 H5 端代码

5.3.1 `h5/index.html`（小程序 → H5 测试页面）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>H5 接收小程序 postMessage</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
    #log { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: auto; }
  </style>
</head>
<body>
  <h1>小程序 → H5 数据交互示例</h1>
  <div id="log"></div>
  <button id="requestUpdate">请求小程序再推送一次</button>

  <script>
    function log(msg) {
      const $log = document.getElementById('log');
      const p = document.createElement('p');
      p.textContent = msg;
      $log.appendChild(p);
      $log.scrollTop = $log.scrollHeight;
    }

    function isInWxMiniProgram() {
      return window.__wxjs_environment === 'miniprogram' ||
             (window.wx && window.wx.miniProgram && typeof window.wx.miniProgram.postMessage === 'function');
    }

    document.addEventListener('DOMContentLoaded', () => {
      log(`页面加载完成：检测是否在小程序中？ ${isInWxMiniProgram()}`);

      // 监听小程序发来的 postMessage
      window.addEventListener('message', event => {
        const data = event.data || {};
        log(`收到小程序消息：${JSON.stringify(data)}`);
        if (data.command === 'init') {
          log(`初始化参数：userId=${data.payload.userId}, token=${data.payload.token}`);
        } else if (data.command === 'updateData') {
          log(`动态更新数据：newValue=${data.payload.newValue}`);
        }
      });

      // 示例：点击按钮请求小程序再次推送一次
      document.getElementById('requestUpdate').addEventListener('click', () => {
        if (!isInWxMiniProgram()) {
          alert('请在小程序内打开此页面再试');
          return;
        }
        // 告诉小程序 H5 需要更新数据
        window.wx.miniProgram.postMessage({ data: { command: 'h5RequestUpdate' } });
        log('已向小程序发送“请再次推送数据”请求');
      });
    });
  </script>
</body>
</html>

5.3.2 `h5/h5-to-mini.html`（H5 → 小程序测试页面）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>H5 向小程序 postMessage 示例</title>
  <style>
    body { font-family: Arial, sans-serif; padding: 20px; }
  </style>
</head>
<body>
  <h1>H5 → 小程序 数据交互示例</h1>
  <button id="sendToMini">向小程序发送消息</button>
  <button id="paymentDone">支付完成 并跳回小程序</button>

  <script>
    function isInWxMiniProgram() {
      return window.__wxjs_environment === 'miniprogram' ||
             (window.wx && window.wx.miniProgram && typeof window.wx.miniProgram.postMessage === 'function');
    }

    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById('sendToMini').addEventListener('click', () => {
        if (!isInWxMiniProgram()) {
          alert('请在微信小程序内打开此页面再操作');
          return;
        }
        const msg = { command: 'h5ToMini', payload: { text: 'Hello 小程序，来自 H5' } };
        window.wx.miniProgram.postMessage({ data: msg });
        alert('已发送消息给小程序：' + JSON.stringify(msg));
      });

      document.getElementById('paymentDone').addEventListener('click', () => {
        if (!isInWxMiniProgram()) {
          alert('请在微信小程序内打开此页面再操作');
          return;
        }
        const msg = { command: 'paymentDone', payload: { orderId: 'ORD-20230501', amount: 199.9 } };
        window.wx.miniProgram.postMessage({ data: msg });
        // 通知小程序并直接跳回
        window.wx.miniProgram.navigateBack();
      });
    });
  </script>
</body>
</html>

示例流程：
小程序首页 “打开 H5 页面” → 跳转到 webview 页面；
webview 页面中 <web-view src=".../index.html">，加载 H5；
H5 index.html DOMContentLoaded 后，注册 message 监听；
小程序的 onWebviewLoad 通过 webviewCtx.postMessage({command:'init',payload:{....}}) 发送初始化数据；
H5 收到后在页面上打印日志；用户点击 “请求小程序再推送一次” 按钮，H5 端调用 wx.miniProgram.postMessage({data:{command:'h5RequestUpdate'}})；
小程序 onWebMessage 回调捕获到 {command:'h5RequestUpdate'}，可根据业务决定再次调用 postMessage({command:'updateData',payload:{...}})；
H5 收到 updateData 后在日志区打印新数据；
如果打开的是 h5-to-mini.html 页面，点击 “向小程序发送消息” 或 “支付完成并跳回小程序” 即可示范 H5 → 小程序通信与跳回。

六、跨平台兼容与注意事项

虽然上述示例针对微信小程序，但在支付宝小程序、百度小程序、字节跳动小程序中也有类似能力，只不过命名略有不同。下面简单列举各平台差异及注意点：

平台	创建 WebViewContext	小程序 → H5 postMessage API	H5 → 小程序 postMessage API
微信小程序	`wx.createWebViewContext(id)`	`webviewCtx.postMessage({ data })`	`window.wx.miniProgram.postMessage({ data })`
支付宝小程序	`my.createWebViewContext(id)`	`webviewCtx.postMessage({ data })`	`window.my.miniProgram.postMessage({ data })`
百度小程序	`swan.createWebViewContext(id)`	`webviewCtx.postMessage({ data })`	`window.swan.miniProgram.postMessage({ data })`
字节跳动小程序	`tt.createWebViewContext(id)`	`webviewCtx.postMessage({ data })`	`window.tt.miniProgram.postMessage({ data })`

示例：在 H5 中做多平台环境检测

function getMiniProgramEnv() {
  if (window.__wxjs_environment === 'miniprogram' && window.wx && window.wx.miniProgram) {
    return 'weixin';
  }
  if (window.my && window.my.miniProgram) {
    return 'alipay';
  }
  if (window.swan && window.swan.miniProgram) {
    return 'baidu';
  }
  if (window.tt && window.tt.miniProgram) {
    return 'douyin';
  }
  return '';
}

const env = getMiniProgramEnv();
if (env === 'weixin') {
  window.wx.miniProgram.postMessage({ data: {...} });
} else if (env === 'alipay') {
  window.my.miniProgram.postMessage({ data: {...} });
}
// …同理

注意事项：

H5 页面必须通过 HTTPS 提供服务，小程序 WebView 只允许加载 HTTPS URL，否则会报错。
不同平台 JS-SDK 注入时机略有差异，记得在 DOMContentLoaded 或 window.onload 后再调用 xxx.miniProgram.postMessage；
若 H5 仅用于小程序内嵌，可不做“非 WebView 环境”适配，但若 H5 有时需在普通浏览器访问，需做相应空值判断与降级逻辑。
数据序列化：postMessage 支持向 H5 发送任意可序列化对象，但不要传 function、DOM 等不可序列化数据；
大小限制：postMessage 消息太大的话可能会被截断，推荐一次传输量控制在 1MB 以内；
安全性：不要在消息中直接传递敏感信息（如密码），H5 端尽量不要把这些敏感信息写到 innerHTML，以防 XSS；
编码与特殊字符：如果通过 URL 参数传递数据，记得做 encodeURIComponent 与 decodeURIComponent；
调试技巧：在开发者工具的“调试 - 调试面板 → 控制台”中，可以看到小程序输出的 console.log，也可以在 H5 页面通过浏览器 DevTools 调试（微信开发者工具自带网页预览）。

七、安全与性能优化

为了让整个“小程序 ↔ H5”交互方案更稳健，需关注一些安全与性能细节。

7.1 数据安全与校验

签名/加密：
- 如果通过 URL 参数传递 token、userId 等敏感信息，建议先在小程序端进行签名或加密，H5 端在接收后再校验/解密，避免在网络请求链路或日志中泄露。
- 例如，小程序把 token 用 AES 加密后再拼到 URL，H5 在本地做 AES 解密。
白名单机制：
- H5 在接收到 postMessage 后，先校验 data.command 是否在允许列表中，再做下一步处理。避免恶意 H5 注入任意命令。
防 XSS：
- H5 不要把 event.data 直接写到 innerHTML，如确实需要，可使用 textContent 或进行严格的转义；
- 如果 H5 与小程序端分属不同域名，务必启用 HTTPS，避免 MITM 攻击。

7.2 性能优化

节流/防抖 postMessage：
- 用户在 H5 或小程序端连续触发多次交互时，频繁使用 postMessage 会造成消息拥堵。可在发送前做防抖或节流。
- 例如，H5 端在短时间内多次调用 wx.miniProgram.postMessage，可以先用 setTimeout 延迟，最后一次一起发送。
控制数据量：
- 不要一次性传输过大数组或文件数据，若需要传输大文件，可先在小程序端上传到 OSS，H5 端直接通过接口拉取；或在 H5 端以 URL 形式传递给小程序，再让小程序去下载。
WebView 缓存：
- 如果 H5 页面中包含大量静态资源（JS/CSS/图片等），注意开启合理的缓存策略，如 Cache-Control、ETag 等，让后续加载更快；
- 小程序在打开同一个 WebView 多次时，会尽量使用缓存页，减少网络请求。

八、总结

本文系统地介绍了小程序与 H5 内嵌 WebView 之间的双向数据交互方案，覆盖了从“最简单的 URL 参数”到“实时的 postMessage”各个层面，并提供了微信小程序与 H5 的完整示例代码。总结如下：

URL 参数 —— 适合在 H5 首次加载时传递少量、非敏感、静态的初始化数据。
小程序 webviewCtx.postMessage —— 适合在 H5 运行过程中实时向 H5 发送更新；
H5 wx.miniProgram.postMessage —— 适合在 H5 侧需要主动触发事件给小程序时使用；
跳回带参或 navigateBack —— 适合在 H5 端完成某个操作后立即关闭 WebView 并返回小程序。
跨平台 —— 支付宝小程序、百度小程序、字节跳动小程序等，均有类似的 createWebViewContext 和 miniprogram.postMessage API，命名略有不同。
安全与性能 —— 切忌把敏感信息直接放 URL，postMessage 消息量不要过大，需做好签名校验、防抖节流、XSS 过滤等。

通过以上思路与示例，你已经可以在自己的项目中灵活搭建“小程序 ↔ H5”的通信桥梁，保证数据实时、有序、安全地在两个环境间流动。只需将示例代码稍作改造，即可适配自己的业务场景，例如：

在电商小程序中，嵌入商品详情 H5 页面，向 H5 推送用户登录态，H5 端下单完成后再通知小程序刷新购物车；
在社交类小程序中，嵌入活动页面 H5，向 H5 下发用户信息，H5 页面中分享成功后再触发小程序弹窗；
在金融类小程序中，嵌入交易页面 H5，实时将行情推送给 H5，H5 报价触碰条件后立即发消息给小程序执行风控逻辑。

一、引言

二、方案总览

三、小程序 → H5：URL 参数 & postMessage

3.1 最简单的 URL 参数方式

3.2 小程序 postMessage（动态推送）

3.2.1 小程序端：创建并调用 WebViewContext

3.2.2 H5 端：监听 message 事件

四、H5 → 小程序：wx.miniProgram.postMessage & 跳回带参