- 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. When loading an offline H5 webpage, the src should start with file:// or / (pointing to an HTML page, e.g., file://xxx/index.html). You need to configure the staticPath property (an array of strings) in app.json, e.g. ["xxx"]. |
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.
Do not include Chinese characters in the link, otherwise white screen may occur on iOS. It is recommended to add encodeURIComponent.
For details, see API Description.
The priority of the navigation bar title on the page where the component <web-view> is:
<title></title>(H5 page) > wx.navigationBarTitleText(miniprogram) > navigationBarTitleText(page.json)> navigationBarTitleText(app.json).When specifying the static resource address for src, it must start with file:// or / and point to a specific HTML page. The static resources must be located in the root directory of the mini program. Additionally, you need to configure the staticPath property in app.json (an array of strings representing the directory names of the static resources). Multiple static resources can be configured, but they are only supported within the main package. When uploading the mini program, all static resources are uploaded together with the mini program, and the total size must not exceed the size limit for the entire package.
Authorization
Some APIs require user consent before they can be called. These APIs are divided into multiple scopes based on their usage range. Users can choose to authorize a specific scope, and once authorized, all APIs within that scope can be used directly.
When calling such APIs：
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 | Selects images or videos in the album. |
scope.makeMedia | wx.makeMedia | Takes photos or videos. |
scope.addPhoneContact | wx.addPhoneContact, wx.chooseContact | Adds/selects contacts. |
Authorization validity
Once a user explicitly agrees to or rejects an authorization, the authorization status is recorded locally on the client until the mini program is deleted.
Best practices
Request authorization from the user only when you actually need to use the authorized API. Clearly explain the reason for needing the functionality in the authorization request.
Yes
No
Was this page helpful?