The <web-view />
component bears HTML5 pages and automatically fills the entire Mini Program page.
Attribute | Type | Default value | Description |
---|---|---|---|
src | String | N/A | URL of the HTML5 page that web-view is about to render. |
onMessage | EventHandle | N/A | Message that the web page sends to the Mini Program using postMessage e.detail = { data } |
Each page can have only one <web-view />
. Do not render multiple <web-view />
components. It will automatically fill the entire page and cover other components.
Code sample
<!-- axml -->
<! -- web-view that points to Alipay homepage -->
<web-view src="https://ds.alipay.com/" onMessage="test"></web-view>
Related APIs
On a <web-view />
HTML5 page, you can manually introduce https://appx/web-view.min.js
(this link can be accessed only from the mPaaS client). Related APIs are provided to return to the Mini Program page. The following APIs are supported.
API Type | API Name | Description |
---|---|---|
Navigation Bar | my.navigateTo | Keeps the current page and redirects to a specified page in the application. |
Navigation Bar | my.navigateBack | Closes the current page and returns to a previous page. |
Navigation Bar | my.switchTab | Redirects to a specified tabBar page and closes all non-tabBar pages. |
Navigation Bar | my.reLaunch | Closes all current pages and redirects to a specified page in the application. |
Navigation Bar | my.redirectTo | Closes the current page and redirects to a specified page in the application. |
Image | my.chooseImage | Takes a picture or select one from the mobile album. |
Image | my.previewImage | Previews the image. |
Location | my.getLocation | Obtains the current geographic location information of the user. |
Location | my.openLocation | Uses the built-in map to view the location. |
Interaction feedback | my.alert | Alert box. |
Interaction feedback | my.showLoading | Displays the loading reminder. |
Interaction feedback | my.hideLoading | Hides the loading reminder. |
Cache | my.setStorage | Stores the data in the key specified in the local cache, which overwrites the original data of the key. |
Cache | my.getStorage | Obtains the cache data. |
Cache | my.removeStorage | Deletes the cache data. |
Cache | my.clearStorage | Deletes the local cache data. |
Cache | my.getStorageInfo | Asynchronously obtains information about the current storage. |
Network status | my.getNetworkType | Obtains the current network status. |
Sending message to Mini Program | my.postMessage | Send messages to the Mini Program. The message can be one or multiple sets of custom key and value data in the format of JSON, for example, my.postMessage({name:”test web-view”}) |
Monitoring message sent from Mini Program | my.onMessage | Monitor messages sent from the Mini Program. web-view component control. |
Obtaining current environment | my.getEnv | Obtaining current environment. |
Code sample
<web-view />
HTML5 page:<!-- html -->
<script type="text/javascript" src="https://appx/web-view.min.js"></script>
// If the HTML5 page needs to be used in a non-mPaaS client at the same time, to avoid the 404 error for the request, refer to the following code writing method.
// Run the following script in the HTML head.
<script>
if (navigator.userAgent.indexOf('AlipayClient') > -1 || navigator.userAgent.indexOf('mPaaSClient') > -1) {
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
}
// javascript
my.navigateTo({url: '../get-user-info/get-user-info'});
// The web page sends messages to the Mini Program using postMessage.
my.postMessage({name:"test web-view"});
// Receives messages from the Mini Program.
my.onMessage = function(e) {
console.log(e); //{'sendToWebView': '1'}
}
// Determines whether the running is in the Mini Program environment.
my.getEnv(function(res) {
console.log(res.miniprogram) // true
});
my.startShare();
</script>
After the message is sent using
my.postMessage
, the Mini Program page executes the method configured byonMessage
.// The page.js corresponding to the Mini Program page declares the test method.
// The web-view component in page.axml has onMessage="test" configured.
// Therefore, after the web page executes my.postMessage, the test method will be executed.
Page({
onLoad(e){
this.webViewContext = my.createWebViewContext('web-view-1');
},
test(e){
my.alert({
content:JSON.stringify(e.detail),
});
this.webViewContext.postMessage({'sendToWebView': '1'});
},
)};
my.getEnv
code sample:// Determines whether the running is in the Mini Program environment.
my.getEnv(function(res){
console.log(res.miniprogram); //true
});
You can obtain the URL of the current
<web-view />
when you share it. That is, thewebViewUrl
parameter is returned during theonShareAppMessage
callback.Page({
onShareAppMessage(options) {
console.log(options.webViewUrl)
}
});
FAQ
How does the HTML5 page pass information to the Mini Program?
The HTML5 page uses the my.postMessage
interface to transfer data. The code sample is as follows:
my.postMessage({key1:"value1",key2:"value2"});
How does the Mini Program pass information to the HTML5 page?
<web-view />
supports two-way communication capabilities. For more details, see Web-view component control.
How to return to the Mini Program in the web-view component?
On a <web-view />
HTML5 page, you can manually introduce https://appx/web-view.min.js
(this link can be accessed only from the mPaaS client). Then use my.navigateTo interfaces.
How to upload images on the HTML5 page when the chooseImage interface of the Mini Program is used?
The path of the image obtained can be uploaded after the relevant data is sent to the Mini Program using my.postMessage()
.