复杂场景下 H5 与小程序通信实践

脚本加载完成后，即可通过 my.postMessage 和 my.onMessage 进行通信。为了规范处理，我们统一约定：H5 发送消息给小程序时必须携带 action，小程序根据 action 处理业务逻辑；同时小程序处理完成的结果必须带 type，H5 在不同业务场景下通过 my.onMessage 监听不同 type 的响应。

实战示例：扫脸签到

以典型的扫脸签到流程为例，H5 侧需要封装 Promise 来处理异步回调：

// 处理扫脸签到逻辑
const faceVerify = (): Promise<AlipaySignResult> => {
  return new Promise((resolve) => {
    const handle = () => {
      window.my.onMessage = (result: AlipaySignResult) => {
        // 根据业务类型解析结果
        if (
          result.type === 'FACE_VERIFY_TIMEOUT' ||
          result.type === 'DO_SIGN' ||
          result.type === 'FACE_VERIFY' ||
          result.type === 'LOCATION' ||
          result.type === 'LOCATION_UNBELIEVABLE' ||
          result.type === 'NOT_IN_ALIPAY'
        ) {
          resolve(result);
        }
      };
      
      window.my.postMessage({
        action: SIGN_CONSTANT.FACE_VERIFY,
        activityId: id,
        userId: user.userId
      });
    };
    
    if (window.my) {
      handle();
    }
  });
};

注意这里利用了 Promise 将回调转换为标准异步流，便于后续链式调用。实际项目中还需补充组件卸载时的清理逻辑，确保资源释放。