为什么我的按钮功能只提供一次输出？

Question

我正在试验基本的 VSCode 扩展 webview。我试图让一个简单的按钮单击以在单击时显示一条消息，但该消息仅在第一次出现。我的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Module Manager</title>
  <style> h1 {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -200px;}
  </style>
</head>
<body style="background-color:rgb(60,99,201);">
  <h1 style="color:white;">Welcome to the Lab Ticketing System</h1>
  
  <button onclick="moduleAdd()">Click me</button>
  
  <script>
    function moduleAdd(){
      const vscode = acquireVsCodeApi(); 
      vscode.postMessage({command: "alert", text: "BUTTON PRESSED!"});
    }
  </script> 
</body>
</html>

然后，javascript代码：

let newCommand = vscode.commands.registerCommand('ticketing.start', function () {
    vscode.window.showInformationMessage("Activating ticketing system!")
    
    // create webview
    const modulePanel = vscode.window.createWebviewPanel('modManage', "Module Manager",
    vscode.ViewColumn.One, {enableScripts: true}, );
    
    // pull in the HTML content for the webview panel from external module
    modulePanel.webview.html = htmlStuff.getWelcomeScreen();
    
    // handle recieving messages from the webview
    modulePanel.webview.onDidReceiveMessage(message => 
        {switch(message.command){case 'alert': vscode.window.showErrorMessage(message.text);
        return;}}, undefined, context.subscriptions); 
    });
    context.subscriptions.push(disposable, newCommand);

我遗漏了一些管理扩展的代码，因为 webview 显示正确我认为这只是我如何实现按钮的问题。

Answer 1

只调用 acquireVsCodeApi() 一次，在需要它的函数之外。

为什么我的按钮功能只提供一次输出？

Why is my button function only providing output once?

html

javascript

node.js

visual-studio-code

vscode-extensions