- Release Notes and Announcements
- Product Introduction
- Purchasing Guide
- Getting Started
- Introduction to platform functions
- Guidelines for Code Integration
- Get Demo and SDK
- Android
- iOS
- Flutter
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Guidance
- Framework
- Components
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Worker
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- H5 Real-Time communication
- JS SDK
- Basic Library
- IDE Operation Instructions
- FAQs
- API Documentation
- Application APIs
- Management-Sensitive APIs
- Platform Management APIs
- Mini Program APIs
- DescribeMNPOfflinePackageURL
- CreateMNPDomainACL
- CreateMNP
- ReleaseMNPVersion
- CreateMNPApproval
- DescribeMNPAllStageVersions
- DeleteMNP
- DescribeMNP
- DescribeMNPList
- DescribeMNPCategory
- DescribeMNPPreview
- ModifyMNP
- ConfigureMNPPreview
- ProcessMNPApproval
- CreateMNPVersion
- DescribeMNPVersion
- DescribeMNPReleasedVersionHistory
- RemoveMNP
- RollbackMNPVersion
- Team Management APIs
- Global Domain Management APIs
- User Management APIs
- Role Management APIs
- Sensitive API-related APIs
- Agreements
- Release Notes and Announcements
- Product Introduction
- Purchasing Guide
- Getting Started
- Introduction to platform functions
- Guidelines for Code Integration
- Get Demo and SDK
- Android
- iOS
- Flutter
- Guide to Mini Program Development
- Mini program introduction and development environment
- Mini program code composition
- Guidance
- Framework
- Components
- API
- API Overview
- Fundamentals
- Routing
- Redirect
- Forwarding
- Interface
- Network
- Data Caching
- Data Analysis
- canvas
- Worker
- Media
- WXML
- File
- Device
- Contact person
- Vibration
- Battery Level
- Screen
- Memory
- Device Orientation
- Accessibility
- Network
- Keyboard
- Phone number
- Accelerometer
- Compass
- Gyroscope
- SMS
- Code scanning
- Encryption
- NFC－Ndef
- NFC－NfcA
- NFC－NfcB
- NFC－NfcF
- NFC－NfcV
- WiFi
- Calendar
- Clipboard
- NFC－getNFCAdapter
- NFC－NFCAdapter
- NFC－IsoDep
- NFC－MifareClassic
- NFC－MifareUltralight
- Bluetooth - Low Energy Central Device
- Bluetooth - Low Energy Peripheral Device
- Bluetooth - Beacon
- Bluetooth - General
- Location
- Open Interfaces
- Custom APIs
- Sensitive API
- H5 Real-Time communication
- JS SDK
- Basic Library
- IDE Operation Instructions
- FAQs
- API Documentation
- Application APIs
- Management-Sensitive APIs
- Platform Management APIs
- Mini Program APIs
- DescribeMNPOfflinePackageURL
- CreateMNPDomainACL
- CreateMNP
- ReleaseMNPVersion
- CreateMNPApproval
- DescribeMNPAllStageVersions
- DeleteMNP
- DescribeMNP
- DescribeMNPList
- DescribeMNPCategory
- DescribeMNPPreview
- ModifyMNP
- ConfigureMNPPreview
- ProcessMNPApproval
- CreateMNPVersion
- DescribeMNPVersion
- DescribeMNPReleasedVersionHistory
- RemoveMNP
- RollbackMNPVersion
- Team Management APIs
- Global Domain Management APIs
- User Management APIs
- Role Management APIs
- Sensitive API-related APIs
- Agreements
In order to help customers quickly migrate existing H5 pages to TCMPP, the mini program supports embedding h5 pages within mini programs using the web-view component. Additionally, TCMPP enables H5 pages to call mini-program APIs using JSSDK and support real-time communication between H5 pages and mini-programs. This is not only a technical innovation, but also a key factor in optimizing the user experience.
Data sharing: By establishing an effective communication mechanism, the user's actions and status in the mini program can be transmitted to the H5 page in real time and vice versa. This instant sharing of data ensures user consistency across pages, making it easier for users to complete tasks.
Capability expansion: The integration of mini-program with H5 pages extends the overall capabilities. For example, a mini-program can call specific functions within an H5 page or process data from an H5 page.
Improve development efficiency: Developers can leverage existing H5 page resources without redeveloping the same features. The communication mechanism enables better integration between mini programs and H5 pages, reducing migration, development, and maintenance costs.
Adapt to diverse needs:Different users may have varying habits and requirements. The communication mechanism allows developers to flexibly adjust interactions between mini programs and H5 pages based on user feedback and needs.
In summary, enabling communication between mini programs and embedded H5 pages via the
web-viewcomponent not only enhances the user experience but also provides developers with greater flexibility and convenience.
sendWebviewEvent
Feature description:The mini program sends message events to the H5 page embedded within the
web-viewcomponent.Example:For more information about the real-time communication, seeCommunication section in JSSDK - API description.
The mini program sends message events to H5 page
wx.sendWebviewEvent({message: "I'm Miniprogram, I received"})
function onEvent(e) {console.log(e.message) // I'm Miniprogram, I received}// Register a listenerwx.miniProgram.onWebviewEvent(onEvent)// Remove the listenerwx.miniProgram.offWebviewEvent(onEvent)
Yes
No
Was this page helpful?