createWebView

從HBuilderX 2.8.1及以上版本開始支持

創建指定viewId的WebView控件視圖，在窗體左側或右側區域創建一個tab項。tab內容爲webview，webview裏可裝載html頁面，可以較靈活的渲染自定義的內容。

viewId需要在package.json文件內的配置擴展點views中聲明。

完整的擴展視圖流程參考 如何註冊一個新的視圖？

簡介

參數說明

參數名稱 參數類型 描述
viewId String 視圖Id，需要首先在配置擴展點views中聲明。
options WebViewOptions WebView屬性

返回值

返回類型 描述
WebViewPanel WebViewPanel WebViewPanel屬性

示例

  1.     let webviewPanel = hx.window.createWebView("viewId",{
  2.         enableScripts:true
  3.     });
  4.     let webview = webviewPanel.webView;
  5.     webview.html = `
  6.         <script>
  7.             hbuilderx.onDidReceiveMessage((msg)=>{
  9.             });
  10.             hbuilderx.postMessage({
  11.                 command: 'alert',
  12.                 text: 'HelloWorld'
  13.             });
  14.         </script>
  15.         <img src="xxxx">
  16.     `;
  17.     webview.postMessage({
  18.         command:"test"
  19.     });
  20.     webview.onDidReceiveMessage((msg)=>{
  21.         if(msg.command == 'alert'){
  22.             hx.window.showInformationMessage(msg.text);
  23.         }
  24.     });

WebViewOptions

webview的配置項

屬性列表

屬性名 屬性類型 描述
enableScripts Boolean 是否啓用JavaScript腳本支持

WebViewPanel

調用createWebView返回的WebViewPanel對象

屬性列表

參數名稱 參數類型 描述
webView WebView WebView 關聯的WebView對象
dispose() dispose方法 調用關閉該擴展視圖

WebView

調用createWebView創建WebView對象

WebView屬性列表

參數名稱 參數類型 描述
options WebViewOptions 調用createWebView創建WebView時傳入的options參數
html String WebView中要顯示的html內容

onDidReceiveMessage

收到hbuilderx.postMessage發出的消息時調用回調函數。

參數說明

參數名稱 參數類型 描述
callback Function 響應收到消息的回調

返回值

返回類型
無

示例

  1.     webview.onDidReceiveMessage((message)=>{ console.log(message) });

postMessage(message: any): Thenable

在WebView中發送消息

參數說明

參數名稱 參數類型 描述
message Any 消息內容

返回值

返回類型 描述
Thenable Javascript異步延遲後執行

asWebviewUri

將本地資源轉換成可在WebView中加載的uri。

參數說明

參數名稱 參數類型 描述
localResource Uri 統一資源訪問符

返回值

返回類型 描述
Uri 可在WebView中加載的uri