逐步解說：使用 JavaScript 建立 SDK

發行項
03/01/2024

本逐步解說教導如何使用 JavaScript 建立簡單的數學 SDK 作為 Visual Studio 擴充功能 (VSIX)。本逐步解說分為下列幾個部分：

建立 SimpleMathVSIX 擴充功能 SDK 專案
建立使用 SDK 的範例應用程式

沒有適用於 JavaScript 的類別庫專案類型。在本逐步解說中，直接在 VSIX 專案中建立範例 arithmetic.js 檔案。在實務上，我們建議您在將 JavaScript 和 CSS 檔案放入 VSIX 專案前，先將其作為 Windows 市集應用程式進行建置和測試，例如，使用空白應用程式範本。

必要條件

若要依照本逐步解說執行作業，您必須安裝 Visual Studio SDK。如需詳細資訊，請參閱 Visual Studio SDK。

建立 SimpleMathVSIX 擴充功能 SDK 專案

在功能表列上，選擇 [檔案]>[新增]>[專案]。
在範本類別清單的 Visual C# 下，選取擴充性，然後選取 VSIX 專案範本。
在名稱文字方塊中，指定 SimpleMathVSIX，然後選擇確定按鈕。
如果出現 Visual Studio 套件精靈，請選擇歡迎頁面上的下一步按鈕，然後在 第 7 之 1 頁選擇完成按鈕。

雖然會開啟資訊清單設計工具，但我們將直接修改資訊清單檔案來保持本逐步解說的簡單性。

在方案總管中，開啟 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 屬性設定為 True。
在方案總管中的 SimpleMathVSIX 專案的捷徑功能表上，選擇新增>新增資料夾，然後將資料夾 Redist 命名。
在 [Redist] 底下新增子資料夾，以建立此資料夾結構：

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
在 \js\ 資料夾的捷徑功能表上，選擇新增>新增項目。
在 Visual C# 項目下，選取 Web 類別，然後選取 JavaScript 檔案 項目。將檔案 arithmetic.js 命名，然後選擇新增按鈕。

將下列程式碼插入 arithmetic.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);

在方案總管中的 arithmetic.js 檔案捷徑功能表上，選擇屬性。進行下列屬性變更：
- 將包含在 VSIX 屬性設定為 True。
- 將 複製到輸出目錄屬性設定設為永遠複製。
在方案總管中的 SimpleMathVSIX 專案的捷徑功能表上，選擇建置。
建置成功完成之後，在專案的捷徑功能表上，選擇在檔案總管中開啟資料夾。瀏覽至 \bin\debug\，然後執行 SimpleMathVSIX.vsix 以將其安裝。
選擇安裝按鈕，讓安裝完成。
重新啟動 Visual Studio。

建立使用 SDK 的範例應用程式

在功能表列上，選擇 [檔案]>[新增]>[專案]。
在範本類別清單中的 JavaScript 下，選取 Windows 市集，然後選取空白應用程式範本。
在名稱方塊中，指定 ArithmeticUI。選擇 [確定] 按鈕。
在方案總管中，開啟 ArithmeticUI 專案的捷徑功能表，然後選擇新增>參考。
在 Windows 下，選擇擴充功能，並注意是否顯示 簡單數學。
選取簡單數學核取方塊，然後選擇確定按鈕。
在方案總管的參考下，注意是否顯示簡單數學 參考。將其展開，並注意是否有一個包含 arithmetic.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 的範例應用程式

其他資源

共用方式為

逐步解說：使用 JavaScript 建立 SDK

必要條件

建立 SimpleMathVSIX 擴充功能 SDK 專案

建立使用 SDK 的範例應用程式

相關內容

其他資源