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.