On this page
Open capability
web-view
Functional description: The container that hosts the web page. It will automatically fill the entire mini program page.
Parameters and descriptions:
| Properties | Type | Default value | Description |
|---|---|---|---|
| src | string | - | webview Link to the web page. The web page needs to log in to the mini program management backend to configure the business domain name Offline H5 webpage, path starting with file:// and / (pointing to HTML page, such as: file://xxx/index.html). The staticPath property (string array) needs to be configured in app.json, such as: ['xxx'] |
| bindmessage | eventhandler | - | When a web page uses the wx.miniProgram.postMessage method to send a message to a mini program, the mini program will be triggered and receive the message at a specific time (mini program back, component destruction, sharing). e.detail = { data }, data is an array of multiple postMessage parameters |
| bindload | eventhandler | - | This event is triggered when the web page loads successfully. e.detail = { src } |
| binderror | eventhandler | - | This event is triggered when the web page fails to load. e.detail = { url, fullUrl }, where fullUrl is the full url when the loading fails |
| bindevent | eventhandler | - | When a web page uses the wx.miniProgram.sendWebviewEvent method to send a message to a mini program, the mini program will trigger this event. e.detail = { data }, data is the parameter of sendWebviewEvent |
TIP
- The domain name of the iframe in the webpage also needs to be configured to the domain name whitelist.
- In the developer tools, you can click the debug button on the <web-view> component to open the debugging of the <web-view> component.
- Each page can only have one <web-view>, which will automatically cover the entire page and cover other components.
- The <web-view> web page and the mini program do not support communication except the interface provided by JSSDK.
- Avoid Chinese characters in the link, which will cause a white screen when opened in iOS. It is recommended to add encodeURIComponent.
- For details of the relevant interfaces, see JSSDKInterface Description
- Priority of the navigation bar title of the page where the <web-view> component is located: <title></title>(H5 webpage) > wx.navigationBarTitleText(miniprogram) > navigationBarTitleText(page.json)> navigationBarTitleText(app.json)
- When filling in the static resource address of src, it must start with file:// and /, and be specific to a certain html page. The static resource needs to be in the root directory of the mini program, and the staticPath property (string[], the directory name of the static resource) needs to be configured in app.json. Multiple static resources can be configured. Static resources are only supported in the main package. When the mini program is uploaded, all static resources are uploaded together with the mini program, and the overall size cannot exceed the entire package size limit of the mini program.
Authorization
Some interfaces require user authorization before they can be called. We divide these interfaces into multiple scopes according to the scope of use. Users choose to authorize the scope. After authorizing a scope, all corresponding interfaces can be used directly.
TIP
- If the user has not accepted or rejected this permission, a pop-up window will appear to ask the user. The user can call the interface only after clicking "Agree";
- If the user has authorized, the interface can be called directly;
- If the user has rejected the authorization, no pop-up window will appear, and the interface fail callback will be directly entered. Developers are requested to be compatible with the scenario where the user rejects the authorization
Get user authorization settings
Developers can use wx.getSetting to get the user's current authorization status.
Open the settings interface
Users can control the authorization status of the mini program in the mini program settings interface ("upper right corner" - "Settings").
Developers can call wx.openSetting to open the settings interface and guide users to enable authorization.
Initiate authorization request in advance
Developers can use wx.authorize to initiate authorization requests to users in advance before calling the API that requires authorization.
scope list
| scope | Corresponding interface | Description |
|---|---|---|
| scope.userinfo | wx.getUserInfo | User information |
| scope.userLocation | wx.getLocation、wx.startLocationUpdate、wx.startLocationUpdateBackground | Get geographic location information. |
| scope.userFuzzyLocation | wx.getFuzzyLocation | Get fuzzy geographic location information. |
| scope.record | live-pusherwx or startRecord、wx.operateRecorder | Live broadcast or recording |
| scope.camera | camera | Camera component |
| scope.addPhoneCalendar | wx.addPhoneCalendar | Add log |
| scope.writePhotosAlbum | wx.saveImageToPhotosAlbum | Save pictures to album |
| scope.bluetooth | wx.openBluetoothAdapter | Bluetooth |
| scope.chooseImage | wx.chooseImage | Select pictures in album |
| scope.chooseVideo | wx.chooseVideo | Select videos in album |
| scope.chooseMedia | wx.chooseMedia | Select pictures or videos from mobile album |
| scope.makeMedia | wx.makeMedia | Take videos or pictures |
| scope.addPhoneContact | wx.addPhoneContact、wx.chooseContact | Add/select contacts |
Authorization validity period
Once the user explicitly agrees or refuses authorization, the authorization relationship will be recorded locally on the client until the mini program is deleted.
Best Practices
Initiate authorization request to users only when you really need to use the authorization interface, and explain the reason for using the function in the authorization request.