Mobile Platform as a Service:web-view

The web-view component hosts H5 web pages and fills the entire miniapp page, covering other components. Each page supports only one web-view.

Property name	Type	Default	Description
src	String	None	URL of the H5 web page to render.
onMessage	EventHandle	None	Triggered when the web page calls `postMessage`. e.detail = { data }

Code example

<!-- axml -->
<!-- A web-view that points to the Alipay home page -->
<web-view src="https://ds.alipay.com/" onMessage="test"></web-view>

Related APIs

H5 pages in a web-view can call the following APIs to interact with the miniapp. Import https://appx/web-view.min.js first (accessible only from an mPaaS client).

API category	API name	Description
Navigation bar	my.navigateTo	Navigates to a page without closing the current one.
Navigation bar	my.navigateBack	Closes the current page and returns to the previous or a specified earlier page.
Navigation bar	my.switchTab	Navigates to a specified tabBar page and closes all other non-tabBar pages.
Navigation bar	my.reLaunch	Closes all pages and navigates to a specified page.
Navigation bar	my.redirectTo	Replaces the current page with a specified page.
Image	my.chooseImage	Takes a photo or selects an image from the phone's album.
Image	my.previewImage	Previews an image.
Interactive feedback	my.alert	Displays an alert box.
Interactive feedback	my.showLoading	Displays a loading prompt.
Interactive feedback	my.hideLoading	Hides the loading prompt.
Cache	my.setStorage	Stores data under a specified key, overwriting any existing value.
Cache	my.getStorage	Gets cached data.
Cache	my.removeStorage	Deletes cached data.
Cache	my.clearStorage	Clears the local data cache.
Cache	my.getStorageInfo	Gets storage information asynchronously.
Network status	my.getNetworkType	Gets the current network status.
Send message to miniapp	my.postMessage	Sends a JSON message to the miniapp. Example: my.postMessage({name:"Test web-view"}).
Listen for messages from the miniapp	my.onMessage	Listens for messages from the miniapp. web-view component control.
Get current environment	my.getEnv	Gets the current environment.

Code examples

• web-view H5 page:

    <!-- html -->
    <script type="text/javascript" src="https://appx/web-view.min.js"></script>
    // If this H5 page also needs to be used outside an mPaaS client, use the following code to avoid a 404 error for the request.
    // Run the following script in the HTML header if possible.
    <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'});
  
    // Send a postMessage message from the web page to the miniapp
    my.postMessage({name:"Test web-view"});
  
    // Receive messages from the miniapp.
    my.onMessage = function(e) {
      console.log(e); //{'sendToWebView': '1'}
    }
  
    // Check if the code is running in a miniapp environment
    my.getEnv(function(res) {
      console.log(res.miniprogram) // true
    });
  
    my.startShare();
  
    </script>

• When the miniapp receives a `my.postMessage` message, it runs the `onMessage` handler:

    // In the page.js file corresponding to the miniapp page, declare the test method.
    // Because the web-view component in page.axml has onMessage="test",
    // the test method is executed after my.postMessage is run on the web page.
    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` example:

    // Check if the code is running in a miniapp environment
    my.getEnv(function(res){
        console.log(res.miniprogram); //true
    });

  When a user shares the page, the current web-view URL is returned as `webViewUrl` in the `onShareAppMessage` callback.

    Page({
      onShareAppMessage(options) {
        console.log(options.webViewUrl)
      }
    });

FAQ

How does an H5 page pass information to a miniapp?

Use `my.postMessage` to pass data:

my.postMessage({key1:"value1",key2:"value2"});

How does a miniapp pass information to an H5 page?

The web-view component supports bidirectional communication. web-view component control.

How do I return to the miniapp from a web-view?

On the H5 page, import https://appx/web-view.min.js (accessible only from an mPaaS client), then call my.navigateTo.

After using the miniapp's `chooseImage` API, how do I upload the image from the H5 page?

Pass the image path to the miniapp with my.postMessage(), then upload from the miniapp.