如何扩展一个新的视图？

扩展一个新的 TreeView

扩展一个新的 WebView

TreeView

从HBuilderX 2.7.12及以上版本开始支持

扩展一个新的 TreeView 视图（view）通过以下2个步骤：

  1. //package.json；
  2. //...NOTE：package.json不支持注释，以下代码使用时需要将注释删掉
  3.     "contributes": {
  4.         "viewsContainers": {
  5.             "activitybar": [{
  6.                 "id": "demoview",
  7.                 "title": "DemoView"
  8.             }]
  9.         },
  10.         "views": {
  11.             "demoview": [{
  12.                 //该id需要和window.createTreeView中的viewId参数一致
  13.                 "id": "extensions.treedemo",
  14.                 "name": "DemoView"
  15.             }]
  16.         }
  17.     }
  1. // extension.js
  2. var hx = require("hbuilderx");
  4. class DemoTreeDataProvider extends hx.TreeDataProvider{
  5.     constructor(demoData) {
  6.         super();
  7.         this._demoData = demoData;
  8.     }
  9.     getChildren(element) {
  10.         let demoData = this._demoData;
  11.         return new Promise(resolve => {
  12.             if (!element) {
  13.                 resolve(demoData);
  14.             } else {
  15.                 resolve(element.children);
  16.             }
  17.         });
  18.     }
  19.     getTreeItem(element) {
  20.         return {
  21.             label:element.name,
  22.             collapsibleState:element.children ? 1 : 0,
  23.             command:{
  24.                 command:element.children ? "":"extension.helloWorld",
  25.                 arguments:[
  26.                     element.name
  27.                 ]
  28.             }
  29.         }
  30.     }
  31. }
  32. //该方法将在插件激活的时候调用
  33. function activate(context) {
  34.     let demoData = [
  35.         {
  36.             name:"Root1",
  37.             children:[
  38.                 {
  39.                     name:"child1"
  40.                 },
  41.                 {
  42.                     name:"child2"
  43.                 }
  44.             ]
  45.         },
  46.         {
  47.             name:"Root2",
  48.             children:[
  49.                 {
  50.                     name:"child3",
  51.                 },
  52.                 {
  53.                     name:"child4"
  54.                 }
  55.             ]
  56.         }
  57.     ]
  58.     hx.commands.registerCommand("extension.helloWorld",function(param){
  59.         hx.window.showInformationMessage("选中了TreeItem:" + param[0]);
  60.     });
  61.     hx.window.createTreeView("extensions.treedemo", {
  62.         showCollapseAll: true,
  63.         treeDataProvider: new DemoTreeDataProvider(demoData)
  64.     });
  65. }
  66. //该方法将在插件禁用的时候调用（目前是在插件卸载的时候触发）
  67. function deactivate() {
  69. }
  70. module.exports = {
  71.     activate,
  72.     deactivate
  73. }

扩展后的视图可通过菜单视图-显示扩展视图打开

效果图

如何注册一个视图 - 图1

WebView

从HBuilderX 2.8.1及以上版本开始支持

扩展一个新的 WebView 视图（view）通过以下2个步骤：

  1. //package.json；
  2. //...NOTE：package.json不支持注释，以下代码使用时需要将注释删掉
  3.      "contributes": {
  4.          "viewsContainers": {            
  5.              "rightside": [{
  6.                  "id": "WebViewcontainerId",
  7.                  "title": "webview 展示"
  8.              }]
  9.          },
  10.          "views": {            
  11.              "WebViewcontainerId": [{
  12.                  "id": "extension.WebView",
  13.                  "title": "webview - 展示"
  14.              }]
  15.          },
  16.          ...
  17.     }
  1. const hx = require('hbuilderx');
  3. /**
  4.  * @description 显示webview
  5.  */
  6. function showWebView(webviewPanel) {
  7.     let webview = webviewPanel.WebView;
  9.     var background = '';
  11.     let config = hx.workspace.getConfiguration();
  12.     let colorScheme = config.get('editor.colorScheme');
  13.     if (colorScheme == 'Monokai') {
  14.         background = 'rgb(39,40,34)'
  15.     } else if (colorScheme == 'Atom One Dark') {
  16.         background = 'rgb(40,44,53)'
  17.     } else {
  18.         background = 'rgb(255,250,232)'
  19.     };
  21.     webview.html =
  22.         `
  23.         <body style="background-color:${background};border:1px solid ${background};">
  24.             <div style="max-width:200px;">
  25.                 <img src="https://download1.dcloud.net.cn/uploads/images/hbuilderx/hx_desc@1x.png" style="position: absolute;bottom: 0;left: 0;right: 0;width: 100%;margin: auto;">
  26.             </div>
  27.             <script>
  28.                 //    以下两种写法等同
  29.                 hbuilderx.onDidReceiveMessage((msg) => {});
  30.                 window.addEventListener("message", (msg) => {});
  31.                 hbuiderx.postMessage({
  32.                     command: 'alert',
  33.                     text: 'HelloWorld'
  34.                 });
  35.             </script>
  36.         </body>
  37.       `;
  38.     webview.postMessage({
  39.         command: "test"
  40.     });
  41.     webview.onDidReceiveMessage((msg) => {
  42.         if (msg.command == 'alert') {
  43.             hx.window.showInformationMessage(msg.text);
  44.         }
  45.     });
  46. };
  49. module.exports = {
  50.     showWebView
  51. }

扩展后的视图可通过菜单视图-显示扩展视图打开

效果图

如何注册一个视图 - 图2