Przewodnik: tworzenie zestawu SDK przy użyciu języka JavaScript

W tym przewodniku pokazano, jak używać języka JavaScript do tworzenia prostego zestawu SDK matematycznego jako rozszerzenia programu Visual Studio (VSIX). Przewodnik jest podzielony na następujące części:

Aby utworzyć projekt zestawu SDK rozszerzenia SimpleMathVSIX
Aby utworzyć przykładową aplikację korzystającą z zestawu SDK

W przypadku języka JavaScript nie ma typu projektu biblioteki klas. W tym przewodniku przykładowy plik arithmetic.js jest tworzony bezpośrednio w projekcie VSIX. W praktyce zalecamy najpierw skompilowanie i przetestowanie plików JavaScript i CSS jako aplikacji ze Sklepu Windows — na przykład przy użyciu szablonu Pusta aplikacja — przed umieszczeniem ich w projekcie VSIX.

Wymagania wstępne

Aby wykonać czynności opisane w tym przewodniku, należy zainstalować zestaw Visual Studio SDK. Aby uzyskać więcej informacji, zobacz Visual Studio SDK.

Aby utworzyć projekt zestawu SDK rozszerzenia SimpleMathVSIX

Na pasku menu wybierz pozycję Plik>nowy>projekt.
Na liście kategorii szablonów w obszarze Visual C# wybierz pozycję Rozszerzalność, a następnie wybierz szablon projektu VSIX.
W polu tekstowym Nazwa określ SimpleMathVSIX i wybierz przycisk OK .
Jeśli zostanie wyświetlony Kreator pakietów programu Visual Studio, wybierz przycisk Dalej na stronie powitalnej, a następnie na stronie 1 z 7 wybierz przycisk Zakończ.

Mimo że Projektant manifestu zostanie otwarty, ten przewodnik będzie prosty, modyfikując plik manifestu bezpośrednio.

W Eksplorator rozwiązań otwórz menu skrótów dla pliku source.extension.vsixmanifest, a następnie wybierz pozycję Wyświetl kod. Użyj tego kodu, aby zastąpić istniejącą zawartość w pliku.

<?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>

W Eksplorator rozwiązań otwórz menu skrótów dla projektu SimpleMathVSIX, a następnie wybierz pozycję Dodaj>nowy element.
W kategorii Dane wybierz pozycję Plik XML, nadaj plikowi SDKManifest.xmlnazwę , a następnie wybierz przycisk Dodaj.
W Eksplorator rozwiązań otwórz menu skrótów dla pliku SDKManifest.xml, a następnie wybierz pozycję Otwórz, aby wyświetlić plik w edytorze XML.

Dodaj następujący kod do pliku 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>

W Eksplorator rozwiązań w menu skrótów dla pliku SDKManifest.xml wybierz pozycję Właściwości.
W oknie Właściwości ustaw właściwość Include in VSIX na True.
W Eksplorator rozwiązań w menu skrótów dla projektu SimpleMathVSIX wybierz pozycję Dodaj>nowy folder, a następnie nadaj folderowi Redistnazwę .
Dodaj podfoldery w obszarze Redist, aby utworzyć tę strukturę folderów:

\Redist\CommonConfiguration\Neutral\SimpleMath\js\
W menu skrótów folderu \js\ wybierz pozycję Dodaj>nowy element.
W obszarze elementy Visual C# wybierz kategorię Sieć Web , a następnie wybierz element Plik JavaScript. Nadaj plikowi arithmetic.jsnazwę , a następnie wybierz przycisk Dodaj .

Wstaw następujący kod do pliku 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);

W Eksplorator rozwiązań w menu skrótów dla pliku arithmetic.js wybierz pozycję Właściwości. Wprowadź następujące zmiany właściwości:
- Ustaw właściwość Include in VSIX na True.
- Ustaw właściwość Copy to Output Directory na Kopiuj zawsze.
W Eksplorator rozwiązań w menu skrótów dla projektu SimpleMathVSIX wybierz pozycję Kompiluj.
Po pomyślnym zakończeniu kompilacji w menu skrótów projektu wybierz pozycję Otwórz folder w Eksplorator plików. Przejdź do folderu \bin\debug\, a następnie uruchom polecenie SimpleMathVSIX.vsix , aby go zainstalować.
Wybierz przycisk Zainstaluj i pozwól na ukończenie instalacji.
Uruchom ponownie program Visual Studio.

Aby utworzyć przykładową aplikację korzystającą z zestawu SDK

Na pasku menu wybierz pozycję Plik>nowy>projekt.
Na liście kategorii szablonów w obszarze JavaScript wybierz pozycję Sklep Windows, a następnie wybierz szablon Pusta aplikacja.
W polu Nazwa określ wartość ArithmeticUI. Wybierz przycisk OK.
W Eksplorator rozwiązań otwórz menu skrótów dla projektu ArithmeticUI, a następnie wybierz pozycję Dodaj>odwołanie.
W obszarze Windows wybierz pozycję Rozszerzenia i zwróć uwagę, że jest wyświetlana prosta matematyka .
Zaznacz pole wyboru Proste obliczenia matematyczne, a następnie wybierz przycisk OK.
W Eksplorator rozwiązań w obszarze Odwołania zwróć uwagę, że jest wyświetlane proste odwołanie matematyczne. Rozwiń go i zwróć uwagę, że istnieje folder \js\ , który zawiera plik arithmetic.js. Możesz otworzyć plik arithmetic.js , aby potwierdzić, że kod źródłowy został zainstalowany.

Użyj następującego kodu, aby zastąpić zawartość pliku 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>

Użyj następującego kodu, aby zastąpić zawartość pliku \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();
})();

Zastąp zawartość pliku \css\default.css następującym kodem:

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;
}

Wybierz klucz F5 do skompilowania i uruchomienia aplikacji.
W interfejsie użytkownika aplikacji wprowadź dowolne dwie liczby, wybierz operację, a następnie wybierz = przycisk. Zostanie wyświetlony prawidłowy wynik.

Tworzenie zestawu Software Development Kit

Last updated on 2025-12-12

Udostępnij przez

Przewodnik: tworzenie zestawu SDK przy użyciu języka JavaScript

Wymagania wstępne

Aby utworzyć projekt zestawu SDK rozszerzenia SimpleMathVSIX

Aby utworzyć przykładową aplikację korzystającą z zestawu SDK

Powiązana zawartość

Dodatkowe źródła