全部產品
Search
文件中心

Mobile Platform as a Service:webview 組件控制

更新時間:Aug 14, 2024

通過建立 webviewContext,提供從小程式向 web-view 發送訊息的能力。

說明
  • 基礎庫 1.8.0 及以上版本支援本功能,低版本需做相容處理,操作參見 小程式基礎庫說明

  • mPaaS 10.1.32 及以上版本支援本功能。

my.createWebViewContext(webviewId)

該介面用於通過建立 webviewContext 提供從小程式向 web-view 發送訊息的能力。建立並返回 web-view 上下文 webViewContext 對象。

入參

參數

類型

必填

說明

webviewId

String

要建立的 web-view 所對應的 ID 屬性。

傳回值

為一個 webViewContext 對象。

webViewContext 通過 webviewId 跟一個 web-view 組件綁定,通過它可以實現一些功能。

webViewContext 對象的方法如下:

方法

參數

描述

相容性

postMessage

Object

小程式向 web-view 組件發送訊息,配合 web-view.js 中提供的 my.postMessage 可以實現小程式和 web-view 網頁的雙向通訊。

1.8.0

程式碼範例

<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。