web-view

Webview.

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.

Attribute NameTypeDefaultDescription
srcStringNoH5 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
onMessageEventHandleNopostMessage message from webpage to Mini Program e.detail = { data }

Each page can have only one . Do not render multiple . It bestspreads 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 TypeNameDescription
Navigationmy.navigateToNavigate to another page of the app while keeping current one.
Navigationmy.navigateBackClose current page and return to one of the pages before.
Navigationmy.switchTabNavigate to a page on tabBar and close any other pages that are not on the tabBar.
Navigationmy.reLaunchClose all pages and navigate to a page from the app.
Navigationmy.redirectToClose current page and navigate to a page from the app.
Imagemy.chooseImageTake a photo or choose one from the album. (The file path of the obtained photo  can be sent to current MiniProgram via my.postMessage(), and then be uploaded if needed.)
Imagemy.previewImagePreview the image.
Locationmy.getLocationGet location information of current user.
Popupsmy.alertShow alert window.
Popupsmy.showLoadingShow loading indicator.
Popupsmy.hideLoadingHide loading indicator.
Storagemy.setStorageStore some data in local storage with a key. Will overwrite if the key already exists.
Storagemy.getStorageRetrieve stored data.
Storagemy.removeStorageDelete stored data.
Storagemy.clearStorageClear local storage.
Storagemy.getStorageInfoGet information about local storage asynchronously.
Networkmy.getNetworkTypeGet information about current network status.
Paymentmy.tradePayInvoke payment procedures. (Don't process payment in H5 environment, and always call this API for payments.)
Messagemy.postMessageSend message to current MiniProgram, in JSON format.
Messagemy.onMessageListen to messages from current MiniProgram.
Environmentmy.getEnvGet 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 MiniProgram 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'});
  },
});