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