如何使 WinUI 3 应用面向多个平台

项目
07/10/2024

创建初学者 Hello World WinUI 3 应用后，你可能想知道如何通过单个代码库访问更多用户。本操作方法将使用 Uno Platform 扩展现有应用程序的覆盖范围，从而在本机移动、Web 和桌面之间重复使用业务逻辑和 UI 层。

在浏览器中运行的“Hello world”应用。

先决条件

Visual Studio 2022 17.4 或更高版本
设置开发计算机（请参阅 WinUI 入门）
ASP.NET 和 Web 开发工作负载（适用于 WebAssembly 开发）
已安装 .NET Multi-Platform App UI 开发（适用于 iOS、Android、Mac Catalyst 开发）。
已安装 .NET 桌面开发（适用于 Gtk、Wpf 和 Linux Framebuffer 开发）

完成环境设置

打开命令行提示符 Windows 终端（如果已安装），或者从“开始”菜单中打开命令提示符或 Windows Powershell。
安装或更新 uno-check 工具：
- 使用以下命令：
```
dotnet tool install -g uno.check
```
- 更新该工具（如果之前已安装旧版本）：
```
dotnet tool update -g uno.check
```
使用以下命令运行该工具：
```
uno-check
```
按照工具指示的说明进行操作。由于它需要修改系统，系统可能会提示你需要提升的权限。

安装 Uno Platform 解决方案模板

启动 Visual Studio，然后单击 Continue without code。在菜单栏中单击 Extensions ->Manage Extensions。

读取管理扩展的 Visual Studio 菜单栏项

在扩展管理器中 展开“联机 ”节点并搜索 Uno、安装 Uno Platform 扩展或从 Visual Studio Marketplace 下载它，然后重启 Visual Studio。

使用 Uno Platform 扩展作为搜索结果在 Visual Studio 中管理“扩展”窗口

创建应用程序

现在，我们已准备好创建多平台应用程序，接下来要采用的方法是创建新的 Uno Platform 应用程序。我们将上一教程的 Hello World WinUI 3 项目中的 XAML 代码复制到多平台项目中。这是可行的，因为 Uno Platform 支持重复使用现有的代码库。对于依赖于每个平台提供的 OS API 的功能，可随时间推移轻松使它们正常工作。如果需要将现有应用程序移植到其他平台，此方法特别有用。

很快，你将能够从此方法中获益，因为你可通过熟悉的 XAML 风格和已有的代码库来面向更多平台。

打开 Visual Studio 并通过 File>New>Project 新建项目：

新建项目

搜索 Uno 并选择“Uno Platform 应用”项目模板：

Uno 平台应用

指定项目名称、解决方案名称和目录。在此示例中，Hello World MultiPlatform 项目属于 Hello World 多平台解决方案，该解决方案将位于 C：\Projects 中：

指定项目详细信息

使用 Visual Studio 起始页中的“Uno Platform 应用”类型新建 C# 解决方案。为了避免与上一教程中的代码冲突，我们将为此解决方案提供另一个名称“Hello World Uno”。

现在，你将选择一个基本模板来采用 Hello World 应用程序多平台。 “Uno Platform 应用”模板附带两个预设选项，可通过这两个选项快速开始使用“空白”解决方案或“默认”配置，“默认”配置包括对 Uno.Material 和 Uno.Toolkit 库的引用。默认配置还包括用于依赖项注入、配置、导航和日志记录的 Uno.Extensions，并且它使用 MVUX 代替 MVVM，使其成为快速构建真实应用程序的绝佳起点。

项目启动类型的取消解决方案模板

为简单起见，请选择“空白”预设。然后单击“创建”按钮。等待项目创建及其依赖项还原完成。

编辑器顶部的横幅可能要求重新加载项目，单击“ 重载项目”： Visual Studio 横幅产品/服务，用于重新加载项目以完成更改

生成应用

生成多平台 WinUI 应用程序的功能起点后，可以从上一教程中概述的 Hello World WinUI 3 项目将标记复制到其中。

解决方案资源管理器应会显示以下默认文件结构：

默认文件结构

确保 Visual Studio 已打开 WinUI 3 项目，然后将 WinUI 3 项目中的子 XAML 元素 MainWindow.xaml 复制到 MainPage.xaml Uno Platform 项目中的文件。 MainPage 视图 XAML 应如下所示：

<Page x:Class="HelloWorld.MainPage"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   xmlns:local="using:HelloWorld"
   xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
   xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   mc:Ignorable="d"
   Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

      <!-- Below is the code you copied from MainWindow: -->
      <StackPanel Orientation="Horizontal"
                  HorizontalAlignment="Center"
                  VerticalAlignment="Center">
          <TextBlock x:Name="myText" 
                     Text="Hello world!"
                     Foreground="Red"/>
      </StackPanel>
</Page>

启动 HelloWorld.Windows 目标。请注意，此 WinUI 应用与上一教程相同。

现可在任何支持的平台上生成和运行应用。为此，可使用调试工具栏下拉列表选择要部署的目标平台：

运行 WebAssembly (Wasm) 头：
- 右键单击 HelloWorld.Wasm 项目，然后选择“设为启动项目”
- 按 HelloWorld.Wasm 按钮部署应用
- 如果需要，可以将 HelloWorld.Server 项目用作替代项
针对 iOS 进行调试：
- 右键单击 HelloWorld.Mobile 项目，然后选择“设为启动项目”
- 在调试工具栏下拉列表中，选择活动的 iOS 设备或模拟器。需要与 Mac 配对才能执行此操作。
针对 Mac Catalyst 进行调试：
- 右键单击 HelloWorld.Mobile 项目，然后选择“设为启动项目”
- 在调试工具栏下拉列表中，选择远程 macOS 设备。需要与一个配对才能执行此操作。
调试 Android 平台：
- 右键单击 HelloWorld.Mobile 项目，然后选择“设为启动项目”
- 在调试工具栏下拉列表中，选择活动的 Android 设备或模拟器
  - 在“设备”子菜单中选择一个活动设备
使用 Skia GTK 在 Linux 上进行调试：
- 右键单击 HelloWorld.Skia.Gtk 项目，然后选择“设为启动项目”
- 按 HelloWorld.Skia.Gtk 按钮部署应用

现在，你已准备好开始构建多平台应用程序了！

通过