Erstellen von UWP-Paketen

Die universelle Windows-Plattform (UWP) stellt eine allgemeine App-Plattform bereit für alle Windows 10-Geräte bereit. Innerhalb dieses Modells können UWP-Apps sowohl die WinRT-APIs aufrufen, die für alle Geräte verwendet werden, als auch die APIs (einschließlich Win32 und .NET), die spezifisch für die Gerätefamilie sind, auf der die App ausgeführt wird.

In dieser exemplarischen Vorgehensweise erstellen Sie ein NuGet-Paket mit einer nativen UWP-Komponente (einschließlich eines XAML-Steuerelements), das für verwaltete und native Projekte verwendet werden kann.

Voraussetzungen

  1. Visual Studio 2017 oder Visual Studio 2015. Sie können die 2017 Community Edition kostenlos über visualstudio.com installieren oder die Professional bzw. Enterprise-Edition verwenden.

  2. NuGet-CLI. Laden Sie die neuste Version von nuget.exe unter nuget.org/downloads herunter, und speichern Sie diese an einem beliebigen Ort (dies ist der direkte Download für die .exe). Fügen Sie diesen Speicherort, falls erforderlich, anschließend der Umgebungsvariable „PATH“ hinzu.

Erstellen einer UWP-Komponente für Windows-Runtime

  1. Wählen Sie in Visual Studio dateineue >> Project aus, erweitern Sie den Visual C++ > -Knoten Windows > Universellen Knoten, wählen Sie die Vorlage Windows-Runtime Komponente (Universelle Windows) aus, ändern Sie den Namen in "ImageEnhancer", und klicken Sie auf "OK". Übernehmen Sie die Standardwerte für „Zielversion“ und „Mindestens erforderliche Version“, wenn Sie dazu aufgefordert werden.

    Creating a new UWP Windows Runtime Component project

  2. Klicken Sie mit der rechten Maustaste auf das Projekt in Projektmappen-Explorer, wählen Sie "Neues Element hinzufügen>", klicken Sie auf den Visual C++>-XAML-Knoten, wählen Sie "Vorlagensteuerelement" aus, ändern Sie den Namen in "AwesomeImageControl.cpp", und klicken Sie auf "Hinzufügen":

    Adding a new XAML Templated Control item to the project

  3. Klicken Sie mit der rechten Maustaste auf das Projekt in Projektmappen-Explorer, und wählen Sie "Eigenschaften" aus. Erweitern Sie auf der Seite "Eigenschaften" die Konfigurationseigenschaften > C/C++, und klicken Sie auf "Ausgabedateien". Ändern Sie den Wert für XML-Dokumentationsdateien generieren im rechten Bereich in „Ja“.

    Setting Generate XML Documentation Files to Yes

  4. Klicken Sie nun mit der rechten Maustaste auf Projektmappe und dann auf Batcherstellung. Aktivieren Sie wie im Folgenden dargestellt die drei Kontrollkästchen für das Debuggen. Damit stellen Sie sicher, dass alle Artefakte für jedes der von Windows unterstützten Zielsysteme generiert wurde, wenn Sie einen Build erstellen.

    Batch Build

  5. Klicken Sie im Dialogfeld „Batcherstellung“ auf Erstellen, um das Projekt zu überprüfen und die Ausgabedateien zu erstellen, die für das NuGet-Paket erforderlich sind.

Hinweis

In dieser exemplarischen Vorgehensweise werden die Debugartefakte für das Paket verwendet. Überprüfen Sie für Nichtdebugpakete stattdessen die Releaseoptionen im Dialogfeld „Batcherstellung“, und verwenden Sie in den folgenden Schritten die als Ergebnis angezeigten Ordner für Releases.

Erstellen und Aktualisieren der NUSPEC-Datei

Befolgen Sie folgende drei Schritte, um die erste .nuspec-Datei zu erstellen. In den folgenden Schritten werden weitere erforderliche Updates erläutert.

  1. Öffnen Sie die Eingabeaufforderung, und navigieren Sie zu dem Ordner, der ImageEnhancer.vcxproj enthält. Dabei handelt es sich um einen Unterordner des Speicherorts der Projektmappendatei.

  2. Führen Sie den NuGet-Befehl spec aus, um ImageEnhancer.nuspec zu generieren. Der Name der Datei wird dem Namen der .vcxproj-Datei entnommen:

    nuget spec
    
  3. Öffnen Sie ImageEnhancer.nuspec in einem Editor, aktualisieren Sie die Datei gemäß den folgenden Angaben, und ersetzen Sie YOUR_NAME dabei durch einen entsprechenden Wert. Insbesondere der <id>-Wert muss auf nuget.org eindeutig sein. Weitere Informationen zu den Namenskonventionen finden Sie unter Creating a package (Erstellen eines Pakets). Beachten Sie außerdem, dass Sie ebenfalls die Tags für den Autor und die Beschreibung ändern müssen, damit beim Packen kein Fehler ausgelöst wird.

    <?xml version="1.0"?>
    <package >
        <metadata>
        <id>ImageEnhancer.YOUR_NAME</id>
        <version>1.0.0</version>
        <title>ImageEnhancer</title>
        <authors>YOUR_NAME</authors>
        <owners>YOUR_NAME</owners>
        <requireLicenseAcceptance>false</requireLicenseAcceptance>
        <description>Awesome Image Enhancer</description>
        <releaseNotes>First release</releaseNotes>
        <copyright>Copyright 2016</copyright>
        <tags>image enhancer imageenhancer</tags>
        </metadata>
    </package>
    

Hinweis

Bei Paketen, die für die öffentliche Nutzung bereitgestellt werden, sollten Sie besonders auf das <tags>-Element achten, da diese Tags andere Personen dabei unterstützen, nach Ihrem Paket zu suchen und dessen Zweck nachzuvollziehen.

Hinzufügen von Windows-Metadaten zum Paket

Eine Komponente für Windows-Runtime erfordert Metadaten, die alle öffentlich verfügbaren Typen beschreibt. Dadurch wird es anderen Apps und Bibliotheken ermöglicht, die Komponente zu nutzen. Die Metadaten sind in einer WINMD-Datei enthalten. Diese wird erstellt, wenn Sie das Projekt kompilieren und muss in Ihrem NuGet-Paket enthalten sein. Gleichzeitig wird außerdem eine XML-Datei mit IntelliSense-Daten erstellt, die ebenfalls enthalten sein sollte.

Fügen Sie der .nuspec-Datei folgenden <files>-Knoten hinzu:

<package>
    <metadata>
        ...
    </metadata>

    <files>
        <!-- WinMd and IntelliSense files -->
        <file src="..\Debug\ImageEnhancer\ImageEnhancer.winmd" target="lib\uap10.0"/>
        <file src="..\Debug\ImageEnhancer\ImageEnhancer.xml" target="lib\uap10.0"/>
    </files>
</package>

Hinzufügen von XAML-Inhalten

Wenn Sie Ihrer Komponente ein XAML-Steuerelement hinzufügen möchten, müssen Sie die XAML-Datei hinzufügen, die die Standardvorlage für das Steuerelement enthält. Diese wurde von der Projektvorlage generiert. Dies gilt ebenfalls für den Abschnitt <files>:

<?xml version="1.0"?>
<package >
    <metadata>
        ...
    </metadata>
    <files>
        ...

        <!-- XAML controls -->
        <file src="Themes\Generic.xaml" target="lib\uap10.0\Themes"/>

    </files>
</package>

Hinzufügen der nativen Bibliotheken für die Implementierung

Innerhalb Ihrer Komponente ist die Kernlogik des ImageEnhancer-Typs in nativem Code definiert. Dieser ist in den zahlreichen ImageEnhancer.dll-Assemblys enthalten, die für jede Zielruntime (ARM, x86, x64) generiert werden. Verweisen Sie im Abschnitt <files> mithilfe der zugehörigen PRI-Ressourcendateien auf diese Assemblys, um diese in das Paket einzuschließen:

<?xml version="1.0"?>
<package >
    <metadata>
        ...
    </metadata>
    <files>
        ...

        <!-- DLLs and resources -->
        <file src="..\ARM\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-arm\native"/>
        <file src="..\ARM\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-arm\native"/>

        <file src="..\ARM64\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-arm64\native"/>
        <file src="..\ARM64\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-arm64\native"/>

        <file src="..\x64\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-x64\native"/>
        <file src="..\x64\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-x64\native"/>

        <file src="..\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-x86\native"/>
        <file src="..\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-x86\native"/>

    </files>
</package>

Hinzufügen von TARGETS-Dateien

Als nächstes benötigen die C++- und JavaScript-Projekte, die Ihr NuGet-Paket möglicherweise verwenden, eine TARGETS-Datei, um die notwendigen Assembly- und WINMD-Dateien zu identifizieren. (C# und Visual Basic Projekte tun dies automatisch.) Erstellen Sie diese Datei, indem Sie den folgenden Text in ImageEnhancer.targets denselben Ordner wie die .nuspec Datei kopieren und speichern. Hinweis: Der Name der .targets-Datei muss die Paket-ID enthalten (also z.B. das <Id>-Element in der .nupspec-Datei):

<?xml version="1.0" encoding="utf-8"?>
<Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
    <PropertyGroup>
        <ImageEnhancer-Platform Condition="'$(Platform)' == 'Win32'">x86</ImageEnhancer-Platform>
        <ImageEnhancer-Platform Condition="'$(Platform)' != 'Win32'">$(Platform)</ImageEnhancer-Platform>
    </PropertyGroup>
    <ItemGroup Condition="'$(TargetPlatformIdentifier)' == 'UAP'">
        <Reference Include="$(MSBuildThisFileDirectory)..\..\lib\uap10.0\ImageEnhancer.winmd">
            <Implementation>ImageEnhancer.dll</Implementation>
        </Reference>
    <ReferenceCopyLocalPaths Include="$(MSBuildThisFileDirectory)..\..\runtimes\win10-$(ImageEnhancer-Platform)\native\ImageEnhancer.dll" />
    </ItemGroup>
</Project>

Verweisen Sie dann in Ihrer .nuspec-Datei auf ImageEnhancer.targets:

<?xml version="1.0"?>
<package >
    <metadata>
        ...
    </metadata>
    <files>
        ...

        <!-- .targets -->
        <file src="ImageEnhancer.targets" target="build\native"/>

    </files>
</package>

Endgültige NUSPEC-Datei

Die endgültige .nuspec-Datei sollte nun folgendermaßen aussehen, wobei Sie erneut YOUR_NAME durch einen passenden Wert ersetzen sollten:

<?xml version="1.0"?>
<package >
    <metadata>
    <id>ImageEnhancer.YOUR_NAME</id>
    <version>1.0.0</version>
    <title>ImageEnhancer</title>
    <authors>YOUR_NAME</authors>
    <owners>YOUR_NAME</owners>
    <requireLicenseAcceptance>false</requireLicenseAcceptance>
    <description>Awesome Image Enhancer</description>
    <releaseNotes>First Release</releaseNotes>
    <copyright>Copyright 2016</copyright>
    <tags>image enhancer imageenhancer</tags>
    </metadata>
    <files>
    <!-- WinMd and IntelliSense -->
    <file src="..\Debug\ImageEnhancer\ImageEnhancer.winmd" target="lib\uap10.0"/>
    <file src="..\Debug\ImageEnhancer\ImageEnhancer.xml" target="lib\uap10.0"/>

    <!-- XAML controls -->
    <file src="Themes\Generic.xaml" target="lib\uap10.0\Themes"/>

    <!-- DLLs and resources -->
    <file src="..\ARM\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-arm\native"/>
    <file src="..\ARM\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-arm\native"/>
    <file src="..\ARM64\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-arm64\native"/>
    <file src="..\ARM64\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-arm64\native"/>     
    <file src="..\x64\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-x64\native"/>
    <file src="..\x64\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-x64\native"/>
    <file src="..\Debug\ImageEnhancer\ImageEnhancer.dll" target="runtimes\win10-x86\native"/>
    <file src="..\Debug\ImageEnhancer\ImageEnhancer.pri" target="runtimes\win10-x86\native"/>

    <!-- .targets -->
    <file src="ImageEnhancer.targets" target="build\native"/>

    </files>
</package>

Packen der Komponente

Mithilfe der vollständigen .nuspec-Datei, die auf alle Dateien verweist, die Sie in das Paket einfügen müssen, können Sie jetzt den pack-Befehl ausführen:

nuget pack ImageEnhancer.nuspec

Dadurch wird die Datei ImageEnhancer.YOUR_NAME.1.0.0.nupkg generiert. Wenn Sie diese Datei in einem Tool wie dem NuGet-Paket-Explorer öffnen und alle Knoten erweitern, werden Ihnen folgende Inhalte angezeigt:

NuGet Package Explorer showing the ImageEnhancer package

Tipp

Bei einer .nupkg-Datei handelt es sich um eine ZIP-Datei mit einer anderen Erweiterung. Sie können auch die Paketinhalte untersuchen, indem Sie .nupkg in .zip ändern. Denken Sie jedoch daran, die Erweiterung wiederherzustellen, bevor Sie ein Paket auf nuget.org hochladen.

Um Ihr Paket anderen Entwicklern zur Verfügung zu stellen, befolgen Sie die Anweisungen zum Veröffentlichen eines Pakets.