web-view

2021-07-21 11:23

Webview

Scan QR code to try:

web-view

This component does not support personal Mini Program temporarily.

<web-view/> The component is a component that is used to carry H5 webpage and automatically bespreads the whole Mini Program page.

Property	Type	Default	Description
src	String	No	H5 webpage URL to be rendered in web-view H5 webpage URL needs login Mini Program management background- In Mini Program details - Setting, configure H5 domain whitelist.
onMessage	EventHandle	No	postMessage message from webpage to Mini Program e.detail = { data }.

Each page can have only one . Do not render multiple . It bespreads whole page and overlaps other components.

Sample Code

copy

<!-- axml -->
<!-- web-view pointing to google -->
<web-view src="https://google.com/" onMessage="test"></web-view>

APIs Available

API Type	Name	Description
Navigation	my.navigateTo	Navigate to another page of the app while keeping current one.
Navigation	my.navigateBack	Close current page and return to one of the pages before.
Navigation	my.switchTab	Navigate to a page on tabBar and close any other pages that are not on the tabBar.
Navigation	my.reLaunch	Close all pages and navigate to a page from the app.
Navigation	my.redirectTo	Close current page and navigate to a page from the app.
Image	my.chooseImage	Take a photo or choose one from the album. (The file path of the obtained photo can be sent to the current mini program via `my.postMessage()`, and then be uploaded if needed.)
Image	my.previewImage	Preview the image.
Location	my.getLocation	Get location information of current user.
Popups	my.alert	Show alert window.
Popups	my.showLoading	Show loading indicator.
Popups	my.hideLoading	Hide loading indicator.
Storage	my.setStorage	Store some data in local storage with a key. Will overwrite if the key already exists.
Storage	my.getStorage	Retrieve stored data.
Storage	my.removeStorage	Delete stored data.
Storage	my.clearStorage	Clear local storage.
Storage	my.getStorageInfo	Get information about local storage asynchronously.
Network	my.getNetworkType	Get information about current network status.
Payment	my.tradePay	Invoke payment procedures. (Don't process payment in H5 environment, and always call this API for payments.)
Message	my.postMessage	Send message to the current mini program, in JSON format.
Message	my.onMessage	Listen to messages from the current mini program.
Environment	my.getEnv	Get information about current environment.

Demo Code

Code for web-view page for H5.

copy

<script type="text/javascript" src="https://appx/web-view.min.js"></script>
<script>
  my.navigateTo({url: '../get-user-info/get-user-info'});

  // Send message to Mini Program.
  my.postMessage({name:"test web-view"});

  // Did receive message from Mini Program.
  my.onMessage = function(e) {
    console.log(e); // {'sendToWebView': '1'}
  }
  // Check if is run in Mini Program environment
  my.getEnv(function(res) {
    console.log(res.miniprogram) // true
  });
</script>

After my.postMessage is called, onMessage will be executed in this mini program page.

copy

<!-- .axml -->
<view>
  <web-view id="web-view-1" src="..." onMessage="test"></web-view>
</view>

copy

// A 'test' method is declared in this page.
// As web-view in page.axml has set 'test' for the call of 'onMessage',
// after my.postMessage is executed in the web-view, test will be called.
Page({
  onLoad(e){
    this.webViewContext = my.createWebViewContext('web-view-1');    
  },
  test(e){
    my.alert({
      content:JSON.stringify(e.detail),
    });  
    this.webViewContext.postMessage({'sendToWebView': '1'});
  },
});