演练：使用 JavaScript 创建 SDK

项目
01/13/2024

本演练介绍如何使用 JavaScript 创建简单的数学 SDK 作为 Visual Studio 扩展（VSIX）。本演练分为以下部分：

创建 SimpleMathVSIX 扩展 SDK 项目
创建使用 SDK 的示例应用

对于 JavaScript，没有类库项目类型。在本演练中，示例 算术.js 文件直接在 VSIX 项目中创建。在实践中，建议先在将 JavaScript 和 CSS 文件作为 Windows 应用商店应用（例如使用 空白应用 模板）生成和测试，然后再将其放入 VSIX 项目中。

先决条件

要按照本演练的步骤操作，必须安装 Visual Studio SDK。有关详细信息，请参阅 Visual Studio SDK。

创建 SimpleMathVSIX 扩展 SDK 项目

在菜单栏上，依次选择“文件”>“新建”>“项目”。
在模板类别列表中，在 Visual C# 下，选择扩展性，然后选择 VSIX 项目模板。
在 “名称 ”文本框中，指定 SimpleMathVSIX 并选择“ 确定 ”按钮。
如果显示 Visual Studio 包向导，请选择“欢迎”页上的“下一步”按钮，然后在第 1 页的第 7 页上选择“完成”按钮。

虽然清单 设计器 打开，但我们将通过直接修改清单文件来简化本演练。

在解决方案资源管理器中，打开 source.extension.vsixmanifest 文件的快捷菜单，然后选择“查看代码”。使用此代码替换文件中的现有内容。

<?xml version="1.0" encoding="utf-8"?>
<PackageManifest Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vsx-schema/2011" xmlns:d="http://schemas.microsoft.com/developer/vsx-schema-design/2011">
  <Metadata>
    <Identity Id="SimpleMathVSIX" Version="1.0" Language="en-US" Publisher="myname" />
    <DisplayName>Simple Math</DisplayName>
    <Description>Does basic arithmetic calculations.</Description>
  </Metadata>
  <Installation Scope="Global" AllUsers="true">
    <InstallationTarget Id="Microsoft.ExtensionSDK" TargetPlatformIdentifier="Windows" TargetPlatformVersion="v8.0" SdkName="SimpleMath" SdkVersion="1.0" />
  </Installation>
  <Dependencies>
    <Dependency Id="Microsoft.Framework.NDP" DisplayName="Microsoft .NET Framework" d:Source="Manual" Version="4.5" />
  </Dependencies>
  <Assets>
    <Asset Type="Microsoft.ExtensionSDK" d:Source="File" Path="SDKManifest.xml" />
  </Assets>
</PackageManifest>

在解决方案资源管理器中，打开 SimpleMathVSIX 项目的快捷菜单，然后选择“添加新>项”。
在“数据”类别中，选择 XML 文件、命名文件SDKManifest.xml，然后选择“添加”按钮。
在解决方案资源管理器中，打开 SDKManifest.xml 文件的快捷菜单，然后选择“打开”以显示 XML 编辑器中的文件。

将以下代码添加到 SDKManifest.xml 文件。

<?xml version="1.0" encoding="utf-8" ?>
<FileList
  DisplayName="Simple Math"
  MinVSVersion="14.0"
  AppliesTo="JavaScript+WindowsAppContainer"
  SupportsMultipleVersions="Error"
  MoreInfo="https://msdn.microsoft.com/">

  <!-- JS -->
  <File Content="js\arithmetic.js" />
</FileList>

在解决方案资源管理器中，在 SDKManifest.xml 文件的快捷菜单上，选择“属性”。
在 “属性” 窗口中，将 VSIX 属性中的 Include 设置为 True。
在解决方案资源管理器，在 SimpleMathVSIX 项目的快捷菜单上，选择“添加新>文件夹”，然后将文件夹Redist命名。
在 Redist 下添加子文件夹以创建此文件夹结构：

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
在 \js\ 文件夹的快捷菜单上，选择“添加新>项”。
在 Visual C# 项下，选择 Web 类别，然后选择 JavaScript 文件项。将文件 arithmetic.js命名，然后选择“ 添加 ”按钮。

将以下代码插入 算术.js：

(function (global) {
    "use strict";
    global.Arithmetic = {
        add: function (firstNumber, secondNumber) {
            return firstNumber + secondNumber;
        },

        subtract: function (firstNumber, secondNumber) {
            return firstNumber - secondNumber;
        },

        multiply: function (firstNumber, secondNumber) {
            return firstNumber * secondNumber;
        },

        divide: function (firstNumber, secondNumber) {
            return firstNumber / secondNumber;
        }
    };
})(this);

在 解决方案资源管理器 中，在算术.js 文件的快捷菜单上，选择“属性”。进行以下属性更改：
- 将 VSIX 属性中的 Include 设置为 True。
- 将 “复制到输出目录 ”属性设置为 “始终复制”。
在 解决方案资源管理器 中，在 SimpleMathVSIX 项目的快捷菜单上，选择“生成”。
生成成功完成后，在项目的快捷菜单上，在文件资源管理器中选择“打开文件夹”。导航到 \bin\debug\，然后运行 SimpleMathVSIX.vsix 以安装它。
选择 “安装 ”按钮，让安装完成。
重新启动 Visual Studio。

创建使用 SDK 的示例应用

在菜单栏上，依次选择“文件”>“新建”>“项目”。
在模板类别列表中，在 JavaScript 下，选择 Windows 应用商店，然后选择空白应用模板。
在 “名称 ”框中，指定 ArithmeticUI。选择 “确定” 按钮。
在解决方案资源管理器中，打开 ArithmeticUI 项目的快捷菜单，然后选择“添加>引用”。
在“Windows”下，选择“扩展”，并注意到“简单数学”已显示。
选择“简单数学检查”框，然后选择“确定”按钮。
在解决方案资源管理器的“引用”下，请注意会显示“简单数学”引用。展开它并注意到有一个包含算术.js 的 \js\ 文件夹。可以打开 arithmetic.js 以确认源代码已安装。

使用以下代码替换 default.htm 的内容。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>ArithmeticUI</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>

    <!-- ArithmeticUI references -->
    <link href="/css/default.css" rel="stylesheet" />
    <script src="/js/default.js"></script>
    <script src="/SimpleMath/js/arithmetic.js"></script>
</head>
<body>
    <form>
    <div id="calculator" class="ms-grid">
        <input name="firstNumber" id="firstNumber" type="number" step="any">
        <div id="operators">
            <button class="operator" type="button">+</button>
            <button class="operator" type="button">-</button>
            <button class="operator" type="button">*</button>
            <button class="operator" type="button">/</button>
        </div>
        <input id="secondNumber" type="number">
        <button class="calculate" type="button">=</button>
        <input id="result" type="number" name="result" disabled="" readonly="">
    </div>
    </form>
</body>
</html>

使用以下代码替换 \js\default.js 的内容。

(function () {
    "use strict";

    var app = WinJS.Application;
    var operation = null;

    function calculateResult() {
        var firstNumber = parseFloat(document.querySelector("#firstNumber").value),
            secondNumber = parseFloat(document.querySelector("#secondNumber").value),
            result = 0;

        if (isNaN(firstNumber) || isNaN(secondNumber)) {
            result = 0;
        }
        else {
            switch (operation) {
                case "+":
                    result = Arithmetic.add(firstNumber, secondNumber);
                    break;
                case "-":
                    result = Arithmetic.subtract(firstNumber, secondNumber);
                    break;
                case "*":
                    result = Arithmetic.multiply(firstNumber, secondNumber);
                    break;
                case "/":
                    result = Arithmetic.divide(firstNumber, secondNumber);
                    break;
                default:
            }
        }
        document.querySelector("#result").value = result.toString();
    }

    app.onactivated = function (args) {
        document.querySelector("#calculator").addEventListener("click", function (event) {
            if (event.target.tagName.toLowerCase() === "button") {
                switch (event.target.className) {
                    case "operator":
                        operation = event.target.innerText;
                        break;
                    case "calculate":
                        calculateResult();
                        break;
                    default:
                        break;
                }
            }
        });
    };

    app.start();
})();

将 \css\default.css 的内容替换为以下代码：

form {
    display: -ms-grid;
    -ms-grid-rows: 1fr auto 1fr;
    -ms-grid-columns: 1fr auto 1fr;
    height: 100%;
    width: 100%;
}

button, input[type=number] {
    margin-right: 5px;
    -ms-grid-row-align: center;
}

#calculator {
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    display: -ms-grid;
    -ms-grid-rows: 1fr;
    -ms-grid-columns: auto min-content auto auto auto;
}

.ms-grid input {
    width: 5em;
}

#firstNumber {
    -ms-grid-column: 1;
    -ms-grid-row-align: center;
}

#operators {
    -ms-grid-column: 2;
    -ms-grid-row-align: center;
}

    #operators button.operator {
        margin-bottom: 5px;
        height: 40px;
    }

#secondNumber {
    -ms-grid-column: 3;
}

button.calculate {
    -ms-grid-column: 4;
    -ms-grid-row-align: center;
    height: 40px;
}

#result {
    -ms-grid-column: 5;
}

选择要 生成并运行应用的 F5 密钥。
在应用 UI 中，输入任意两个数字，选择一个操作，然后选择 = 按钮。将显示正确的结果。

创建软件开发工具包

通过

演练：使用 JavaScript 创建 SDK

先决条件

创建 SimpleMathVSIX 扩展 SDK 项目

创建使用 SDK 的示例应用

相关内容

其他资源