Skip to main content

Overview

What is H5 Embedded in Mini Program​

Embedding H5 applications developed with AaaS Pilot Kit into the WeChat Mini Program's WebView component to implement complex Digital Employee interaction interfaces. This solution is suitable for:

  • Complex Digital Employee service interfaces requiring rich interactions
  • Reusing the same H5 code across Mini Programs and Web platforms
  • Business features requiring rapid iteration

Through WebView integration, you can leverage the flexibility of H5 while enjoying the ecosystem advantages of WeChat Mini Programs.

Technical Architecture​

Core Components:

  • WeChat Mini Program: Loads H5 pages via WebView component
  • H5 Application: Web application integrating AaaS Pilot Kit
  • Server: Deploys H5 resources and provides services via HTTPS
  • Communication Layer: Message passing mechanism based on WeChat JSSDK

Prerequisites​

Before starting integration, ensure you have:

  • ✅ ICP-filed domain (ICP filing required)
  • ✅ HTTPS/SSL certificate (WeChat WebView only supports HTTPS)
  • ✅ Web server (Nginx, Node.js, or other)
  • ✅ WeChat Mini Program account (verified)
  • ✅ AaaS Pilot Kit H5 application (development completed)

Integration Process​

Step 1: Mini Program Configuration​

Configure WeChat Mini Program backend and complete domain verification.

📖 Detailed Guide: Mini Program Configuration

Main Tasks:

  • Configure business domain in WeChat Official Accounts Platform
  • Download domain verification file
  • Complete domain verification
  • Add WebView component to Mini Program

Step 2: Server Deployment​

Deploy H5 application to server, configure HTTPS and verification file.

📖 Detailed Guides:

Main Tasks:

  • Deploy H5 static resources
  • Configure domain verification file access path
  • Enable HTTPS/SSL
  • Verify server configuration

Step 3: H5 and Mini Program Communication​

Implement bidirectional message passing between H5 pages and Mini Programs.

📖 Detailed Guide: H5 and Mini Program Communication

Main Tasks:

  • Import WeChat JSSDK in H5 page
  • Implement H5 sending messages to Mini Program
  • Receive and handle H5 messages in Mini Program
  • Add runtime environment detection logic

Step 4: Testing and Debugging​

Test WebView integration in developer tools and on real devices.

📖 Detailed Guide: Troubleshooting

Main Tasks:

  • Test in WeChat Developer Tools
  • Real device testing and debugging
  • Troubleshoot common issues

Key Considerations​

Important Notes
  • ⚠️ HTTPS Required: WebView only supports HTTPS protocol, not HTTP
  • ⚠️ Domain Filing: Domain must have ICP filing, newly filed domains require 24-hour wait
  • ⚠️ Domain Format: IP addresses and port numbers are not supported
  • ⚠️ WebRTC Support: Voice features require microphone permissions, recommend early permission detection

AaaS Pilot Kit Quick Start​

WeChat Official Documentation​

Next Steps​

Ready to begin? Proceed to Mini Program Configuration for the first step!