- 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
- Guildlines for 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
- 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 APIs
- Custom APIs
- Sensitive APIs
- H5 Real-Time communication
- JS SDK
- Base 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
- Guildlines for 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
- 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 APIs
- Custom APIs
- Sensitive APIs
- H5 Real-Time communication
- JS SDK
- Base 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
web-view
Feature description:A container that hosts the H5 pages. It will automatically fill the mini program page.
Parameter and description:
Property | Type | Default value | Description |
src | string | - | H5 page URL. Configure the H5 page domain in the mini program management backend. |
bindmessage | eventhandler | - | Triggered when the H5 page uses the wx.miniProgram.postMessage to send a message to the mini program. This occurs during back navigation, component destruction, or sharing. e.detail = { data }, where data is an array of parameters from multiple postMessage calls. |
bindload | eventhandler | - | Triggered when the H5 page is loaded successfully. e.detail = { src } |
binderror | eventhandler | - | Triggered when the H5 page fails to load. e.detail = { url, fullUrl }, where fullUrl is the complete URL that failed to load. |
bindevent | eventhandler | - | Triggered when the H5 page uses the wx.miniProgram.sendWebviewEvent to send a message to the mini program. e.detail = { data }, where data is the parameter from sendWebviewEvent. |
Notes:
The iframe domain within the H5 page must also be configured as the allowed domain.
In the developer tools, click the debug button on the <web-view> component for debugging.
Each H5 page can only have one <web-view>. It will automatically fill the entire page and cover other components.
Only the JSSDK API can be used to enable the communication between the H5 page embedded in the <web-view> component and the mini program.
For details, see JSSDK API description.
The priority of the navigation bar title for the page containing the <web-view> component：
<title></title>(H5 page) > wx.navigationBarTitleText(miniprogram) > navigationBarTitleText(page.json)> navigationBarTitleText(app.json)Authorization
Some APIs require user consent before they can be called. We divide these APIs into multiple scopes according to their usage. When the user provides authorization to a scope, all the APIs in the scope can be called directly.
When such APIs are called：
If the user has neither accepted nor declined this permission, a pop-up will appear asking for their consent. The API can only be called if the user agrees.
If the user has already granted permission, the APIs can be called directly.
If the user has previously denied permission, no pop-up will appear, and the API will immediately trigger the fail callback.Developers should ensure their applications handle scenarios where the user has denied permission.
To obtain user authorization status
Developers can get the user's current authorization status using wx.getSetting.
To open the settings page
Users can manage the authorization status for the mini program on the mini program settings page through <b>Settings</b> in the upper-right corner.
Developers can call wx.openSetting to open the settings page and guide users to enable the authorization.
To initiate an authorization request in advance
Developers can use wx.authorize to initiate authorization requests to users before calling the APIs that require authorization.
List of scopes
scope | APIs | Description |
scope.userinfo | wx.getUserInfo | User information |
scope.userLocation | wx.getLocation, wx.startLocationUpdate, wx.startLocationUpdateBackground | Obtains geographic location information |
scope.userFuzzyLocation | wx.getFuzzyLocation | Obtains approximate geographic location information |
scope.record | live-pusher component or wx.startRecord, wx.operateRecorder | Live streaming or recording |
scope.camera | camera component | Camera component |
scope.addPhoneCalendar | wx.addPhoneCalendar | Adds logs |
scope.writePhotosAlbum | wx.saveImageToPhotosAlbum | Saves images to an album |
scope.bluetooth | wx.openBluetoothAdapter | Bluetooth |
scope.chooseImage | wx.chooseImage | Selects images in the album |
scope.chooseVideo | wx.chooseVideo | Selects videos in the album |
scope.chooseMedia | wx.chooseMedia | Media |
scope.makeMedia | wx.makeMedia | Media |
scope.addPhoneContact | wx.addPhoneContact, wx.chooseContact | Adds/selects contacts |
Authorization validity
The user’s approval or rejection for the authorization request is recorded locally on the client until the mini program is deleted.
Best practices
Initiates an authorization request to the user when you need to call the API. Clearly explain the reason for calling in the request.
Yes
No
Was this page helpful?