All Products
Search
Document Center

web-view

Last Updated: Apr 20, 2021

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 }
Note: The component applies to basic library 1.6.0 and later versions. Operations to resolve the compatibility problems need to be performed in earlier versions. For the operations, see Mini-program Basic Library Description.

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

  1. <!-- axml -->
  2. <! -- web-view that points to Alipay homepage -->
  3. <web-view src="https://ds.alipay.com/" onMessage="test"></web-view>

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:

    1. <!-- html -->
    2. <script type="text/javascript" src="https://appx/web-view.min.js"></script>
    3. // 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.
    4. // Run the following script in the HTML head.
    5. <script>
    6. if (navigator.userAgent.indexOf('AlipayClient') > -1 || navigator.userAgent.indexOf('mPaaSClient') > -1) {
    7. document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
    8. }
    9. // javascript
    10. my.navigateTo({url: '../get-user-info/get-user-info'});
    11. // The web page sends messages to the Mini Program using postMessage.
    12. my.postMessage({name:"test web-view"});
    13. // Receives messages from the Mini Program.
    14. my.onMessage = function(e) {
    15. console.log(e); //{'sendToWebView': '1'}
    16. }
    17. // Determines whether the running is in the Mini Program environment.
    18. my.getEnv(function(res) {
    19. console.log(res.miniprogram) // true
    20. });
    21. my.startShare();
    22. </script>
  • After the message is sent using my.postMessage, the Mini Program page executes the method configured by onMessage.

    1. // The page.js corresponding to the Mini Program page declares the test method.
    2. // The web-view component in page.axml has onMessage="test" configured.
    3. // Therefore, after the web page executes my.postMessage, the test method will be executed.
    4. Page({
    5. onLoad(e){
    6. this.webViewContext = my.createWebViewContext('web-view-1');
    7. },
    8. test(e){
    9. my.alert({
    10. content:JSON.stringify(e.detail),
    11. });
    12. this.webViewContext.postMessage({'sendToWebView': '1'});
    13. },
    14. )};
  • my.getEnv code sample:

    1. // Determines whether the running is in the Mini Program environment.
    2. my.getEnv(function(res){
    3. console.log(res.miniprogram); //true
    4. });

    You can obtain the URL of the current <web-view /> when you share it. That is, the webViewUrl parameter is returned during the onShareAppMessage callback.

    1. Page({
    2. onShareAppMessage(options) {
    3. console.log(options.webViewUrl)
    4. }
    5. });

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:

  1. 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().