Mobile Platform as a Service:Webview component control

You can provide Mini program the ability to send messages to web-view by creating webviewContext.

my.createWebViewContext(webviewId)

This interface is used to create and return web-view context webViewContext object.

Input parameters

Return value

The return value is a webViewContext object. webViewContext is bound with a web-view component via webviewId to implement some functions through.

The methods of webViewContext object are as follows:

Code sample

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

Page({
  onLoad() {
    this.webViewContext = my.createWebViewContext('web-view-1');
  },
  // Receive the message from H5
  onMessage(e) {
      console.log(e); //{'sendToMiniProgram': '0'}
    // Send message to H5
    this.webViewContext.postMessage({'sendToWebView': '1'});
  }
})

In the two-way communication procedure, H5 firstly sends message to Mini Program. After receiving the message, Mini Program sends message to H5.

// In the JS code of H5, my.onMessage need to be firstly defined to receive the messages from Mini program.
my.onMessage = function(e) {
    console.log(e); //{'sendToWebView': '1'}
}
// H5 sends message to Mini program
my.postMessage({'sendToMiniProgram': '0'});