vscode插件 - 节点

`vscode.WebviewViewProvider`

用于在 VSCode 的面板（如侧边栏、活动栏、面板视图等）中嵌入自定义的 Webview（HTML 页面）。它允许开发者为特定的面板或视图提供自定义内容

WebviewViewProvider 的作用

提供一个 WebviewView 的内容。
响应 VSCode 中视图的生命周期（如显示、隐藏、销毁）。
允许在 Webview 和扩展之间进行双向通信（通过 vscode.Message 和 postMessage）。

export default class BranchProvider implements vscode.WebviewViewProvider {
  public resolveWebviewView(webviewView: vscode.WebviewView) {
    webviewView.webview.options = {
      enableScripts: true, // 允许 Webview 中运行 JavaScript
      localResourceRoots: [this._extensionUri],
    };
    webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
    // 处理 Webview 和扩展之间的消息通信
    webviewView.webview.onDidReceiveMessage((message) => {
      switch (message.command) {
        case 'alert':
          vscode.window.showInformationMessage(message.text);
          break;
      }
    });
    webviewView.panel.onDidChangeViewState (webviewView: vscode.WebviewView) {
      
    }
  }
}

1.视图窗口

1. 注册视图容器

在扩展的 package.json 文件中，定义一个新的视图容器。例如，注册一个侧边栏视图：

json

"contributes": {
  "viewsContainers": {
    "activitybar": [
      {
        "id": "myExtensionSidebar", //注意ID1
        "title": "My Sidebar",
        "icon": "resources/icon.svg"
      }
    ]
  },
  "views": {
    "myExtensionSidebar": [ //注意ID1
      {
        "id": "myWebviewView", //注意ID2
        "name": "My Webview View"
      }
    ]
  }
}

viewsContainers.activitybar：
- 定义了一个新的视图容器，显示在活动栏（Activity Bar）。
- id 是容器的唯一标识符。
- title 是显示的名称。
views.myExtensionSidebar：
- 定义了一个新的视图，显示在刚才创建的容器中。
- id 是视图的唯一标识符。
- name 是显示在侧边栏中的名称。

2. 实现 WebviewViewProvider

创建一个类来实现 WebviewViewProvider 接口：

javascript

const vscode = require('vscode');

class MyWebviewViewProvider {
  constructor(context) {
    this.context = context;
  }

  /**
   * 实现 resolveWebviewView 方法
   * @param {vscode.WebviewView} webviewView - 提供的 WebviewView 实例
   */
  resolveWebviewView(webviewView) {
    // 设置 Webview 的 HTML 内容
    webviewView.webview.options = {
      enableScripts: true, // 允许 Webview 中运行 JavaScript
    };

    webviewView.webview.html = this.getHtmlForWebview(webviewView.webview);

    // 处理 Webview 和扩展之间的消息通信
    webviewView.webview.onDidReceiveMessage((message) => {
      switch (message.command) {
        case 'alert':
          vscode.window.showInformationMessage(message.text);
          break;
      }
    });
  }

  /**
   * 返回 Webview 的 HTML 内容
   */
  getHtmlForWebview(webview) {
    const scriptUri = webview.asWebviewUri(
      vscode.Uri.joinPath(this.context.extensionUri, 'media', 'main.js')
    );

    return `
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Webview</title>
      </head>
      <body>
        <h1>Hello from Webview!</h1>
        <button id="alertButton">Send Message to Extension</button>
        <script src="${scriptUri}"></script>
      </body>
      </html>
    `;
  }
}

module.exports = MyWebviewViewProvider;

3. 注册 WebviewViewProvider

在扩展的 activate 方法中注册视图提供者：

javascript

const vscode = require('vscode');
const MyWebviewViewProvider = require('./MyWebviewViewProvider');

function activate(context) {
  // 注册 WebviewViewProvider
  const provider = new MyWebviewViewProvider(context);
  
  context.subscriptions.push(
    vscode.window.registerWebviewViewProvider('myWebviewView', provider) // 注意ID2 和provider
  );
}

function deactivate() {}
module.exports = {activate, deactivate};

4. 实现 Webview 的 JavaScript

创建一个 main.js 文件，处理 Webview 内部的交互逻辑（放在 media 文件夹中）：

javascript

document.getElementById('alertButton').addEventListener('click', () => {
  // 发送消息到扩展
  vscode.postMessage({
    command: 'alert',
    text: 'Hello from Webview!',
  });
});

context: vscode.ExtensionContext



vscode.commands.executeCommand("matrix.commit", data.value);
await vscode.commands.executeCommand("git.sync");

vscode.commands.registerCommand("matrix.commit", async (msg: string) => {
  runGitCommand(`commit -m "${msg}"`);
})

function runGitCommand(command: string) {
  if (!terminal) {
    terminal = vscode.window.createTerminal("Matrix Plus");
  }
  terminal.show();
  terminal.sendText(`git ${command}`);
}

vscode插件 - 节点 ​

vscode.WebviewViewProvider ​

1.视图窗口 ​

vscode插件 - 节点

`vscode.WebviewViewProvider`

1.视图窗口