通過建立 webviewContext,提供從小程式向 web-view 發送訊息的能力。
說明
基礎庫 1.8.0 及以上版本支援本功能,低版本需做相容處理,操作參見 小程式基礎庫說明。
mPaaS 10.1.32 及以上版本支援本功能。
my.createWebViewContext(webviewId)
該介面用於通過建立 webviewContext 提供從小程式向 web-view 發送訊息的能力。建立並返回 web-view 上下文 webViewContext 對象。
入參
參數 | 類型 | 必填 | 說明 |
webviewId | String | 是 | 要建立的 |
傳回值
為一個 webViewContext 對象。
webViewContext 通過 webviewId 跟一個 web-view 組件綁定,通過它可以實現一些功能。
webViewContext 對象的方法如下:
方法 | 參數 | 描述 | 相容性 |
postMessage | Object | 小程式向 |
程式碼範例
<view>
<web-view id="web-view-1" src="..." onMessage="onMessage"></web-view>
</view>Page({
onLoad() {
this.webViewContext = my.createWebViewContext('web-view-1');
},
// 接收來自H5的訊息
onMessage(e) {
console.log(e); //{'sendToMiniProgram': '0'}
// 向H5發送訊息
this.webViewContext.postMessage({'sendToWebView': '1'});
}
})// H5的js代碼中需要先定義my.onMessage 用於接收來自小程式的訊息。
my.onMessage = function(e) {
console.log(e); //{'sendToWebView': '1'}
}
// H5向小程式發送訊息
my.postMessage({'sendToMiniProgram': '0'});說明
以上的雙向通訊能力的流程是 H5 先發訊息給小程式,小程式接收到訊息後再發訊息給 H5。