Skip to main content

概述

什么是 H5 嵌入小程序​

将使用 AaaS Pilot Kit 开发的 H5 应用嵌入到微信小程序的 WebView 组件中，实现复杂的数字员工交互界面。这种方案适用于：

  • 需要复杂交互的数字员工服务界面
  • 希望在小程序和 Web 端复用同一套 H5 代码
  • 需要快速迭代的业务功能

通过 WebView 集成，您可以利用 H5 的灵活性，同时享受微信小程序的生态优势。

技术架构​

核心组成部分：

  • 微信小程序：通过 WebView 组件加载 H5 页面
  • H5 应用：集成 AaaS Pilot Kit 的 Web 应用
  • 服务器：部署 H5 资源并通过 HTTPS 提供服务
  • 通信层：基于微信 JSSDK 的消息传递机制

前置要求​

在开始集成前，请确保您具备：

  • ✅ 已备案的域名（必须经过 ICP 备案）
  • ✅ HTTPS/SSL 证书（微信 WebView 仅支持 HTTPS）
  • ✅ Web 服务器（Nginx、Node.js 或其他）
  • ✅ 微信小程序账号（已完成认证）
  • ✅ AaaS Pilot Kit H5 应用（已开发完成）

集成流程​

步骤 1：小程序配置​

配置微信小程序后台，完成域名验证。

📖 详细指南：小程序配置

主要任务：

  • 在微信公众平台配置业务域名
  • 下载域名校验文件
  • 完成域名验证
  • 在小程序中添加 WebView 组件

步骤 2：服务器部署​

部署 H5 应用到服务器，配置 HTTPS 和校验文件。

📖 详细指南：

主要任务：

  • 部署 H5 静态资源
  • 配置域名校验文件访问路径
  • 启用 HTTPS/SSL
  • 验证服务器配置

步骤 3：H5 与小程序通信​

实现 H5 页面与小程序之间的双向消息传递。

📖 详细指南：H5 与小程序通信

主要任务：

  • 在 H5 页面中引入微信 JSSDK
  • 实现 H5 向小程序发送消息
  • 在小程序中接收和处理 H5 消息
  • 添加运行环境检测逻辑

步骤 4：测试与调试​

在开发工具和真机上测试 WebView 集成。

📖 详细指南：问题排查

主要任务：

  • 在微信开发者工具中测试
  • 真机测试和调试
  • 排查常见问题

关键注意事项​

重要提示
  • ⚠️ HTTPS 必需：WebView 仅支持 HTTPS 协议，不支持 HTTP
  • ⚠️ 域名备案：域名必须经过 ICP 备案，新备案域名需等待 24 小时
  • ⚠️ 域名格式：不支持 IP 地址和端口号
  • ⚠️ WebRTC 支持：语音功能需要麦克风权限，建议提前进行权限检测

相关文档​

AaaS Pilot Kit 快速开始​

微信官方文档​

下一步​

准备好开始了吗？前往 小程序配置 开始第一步！