用 Visual Studio Code 做基於 .NET MAUI 跨平臺移動應用開發

微軟技術棧發表於2022-03-04
UI

2010年起，移動應用開發是非常熱門的一個方向，從技術上我們經歷了原生應用開發，基於 H5 的 Web App，還有混合模式的移動應用開發，再到跨平臺移動應用開發。 .NET 除了是一個跨平臺的應用外，也是一個跨應用場景的平臺。.NET 的移動應用方案最開始基於 Mono,從 MonoTouch, 到 MonoDroid，到跨平臺移動應用方案 Xamarin, 再到現在整合到.NET 6 的 MAUI。通過.NET MAUI 你可以通過一份程式碼，一個專案快速構建具備原生效能的 iOS/Android/Windows/MacOS/Linux 應用。

Visual Studio Code 的 MAUI 環境安裝

官方現在基本上都是推薦用最新預覽版本的 Visual Studio 2022 在 Windows 平臺上做開發，macOS 的 Visual Studio 支援 MAUI 還沒有準備好！記得 2020 年 Build 大會上微軟是有展示過在 Visual Studio Code 上開發的，當時我也非常期待，但一直沒有下文。實際上，在 Visual Studio Code 上的 .NET 跨平臺開發元件已經有了，通過開源專案存在。要用 Visual Studio Code 開發 MAUI，請按照以下步驟來完成：

1 .NET 6 環境安裝

點選該連結 https://dotnet.microsoft.com/... 安裝最新的 .NET 6

2 MAUI 環境安裝

無論你在 Windows/macoOS 建議使用 maui-check (https://github.com/Redth/dotn...) 對 MAUI 所需要的環境進行安裝，這裡麵包含了 Android SDK/iOS SDK 等相關配置的檢查

在命令列安裝 maui-check

dotnet tool install -g Redth.Net.Maui.Check

在終端執行 maui-check

maui-check

如下圖，maui-check 會對你對你係統裡依賴的如 JDK, Android SDK,Xcode, Visual Studio，.NET SDK 以及 MAUI 相關的包等環境掃描一次，如果缺少，他會提示你安裝

3 用 .NET Tools 安裝 Comet

Comet 是 .NET 基於 MVU 設計模式的前端實現框架， 你可以把它應用於 Windows, Android, iOS, macOS, Blazor 應用開發中。你可以從 https://github.com/dotnet/comet 瞭解更多。

什麼是 MVU ?

MVU (Model-View=Update) 是一種功能響應式程式設計、架構設計模式。在 MVU 中 UI 是不可變的。所以每次你想更新一個屬性時，你都必須重建你的 UI。不變性是函數語言程式設計的特性。C# 9.0 後支援函數語言程式設計正規化。UI 和業務都使用相同的語言（例如 C#）編寫。資料流是單向的。它非常適合應用程式的熱過載。您不需要學習 XAML 來開發 UI，而是用一種語言開發完整的應用程式。如下程式碼, 通過描述式表達完成了頁面和邏輯構建

public class MyPage : View {

    readonly State<int> clickCount = new State<int> (1);

    public MyPage() {
        Body = () => new VStack {
            new Text (() => $"Click Count: {clickCount}"),
            new Button("Update Text", () => {
                clickCount.Value++;
            }
        };
    }
}

4 安裝Comet for Visual Studio Code 元件

通過 Visual Studio Code 管理你的 MAUI 專案

1 通過命令列建立一個 MAUI 專案

mkdir mauidemo
cd mauidemo
dotnet new comet

2 通過命令列嘗試執行該專案

dotnet build mauidemo -t:Run -f net6.0-android
dotnet build mauidemo -t:Run -f net6.0-ios

執行結果如下：

3 用 Visual Studio Code 開啟該專案

開啟後，Comet 元件就會檢測你的 MAUI 專案，我們可以看到左下角

你可以點選選擇選擇相關的執行環境

4 選擇 iOS/Android 直接在 Visual Studio Code 中執行和除錯

開啟後，Comet 元件就會檢測你的 MAUI 專案，我們可以看到左下角，系統會檢測到相關的環境，並且可以選擇你要執行的裝置

設定一個斷點看看

注意：

  1. Comet for .NET Mobile 元件還在開發中，在 MAUI Preview 13 的版本上 Visual Studio Code不能成功載入 Android裝置，所以例子以 iOS 為主。
  2. 在 Windows 環境下，如果要除錯 iOS 程式，還是得用 Visual Studio 和 macOS 做連結，具體方式可以點解該連結 https://docs.microsoft.com/zh...進行了解

HotReload 作為補充

之前提過Comet建立的專案是基於MVU模式，介面和業務都是基於函式式的方式去完成。這個時候 HotReload 就非常重要了，可以所編即所得，者也是對 Visual Studio Code 開發 MAUI 應用的補充，接下來我也介紹一下。

1 Reloadify 安裝

Reloadify 3000 是一個支援HotReload 的 .NET 元件，已經內建於 Comet 的 MAUI 專案中。安裝指令碼如下：

dotnet tool install --global Reloadify

2 設定

進入專案，輸入如下命令

iOS
reloadify mauiappdemo.csproj -t ios

Android
reloadify mauiappdemo.csproj -t android

之後你就可以在 Visual Studio Code 下編寫程式碼間同步你的程式碼在模擬器, 實現所編即所得的 HotReload 功能

最後給大家看看我用 Visual Studio Code 完成的 MAUI Demo

展望

通過 Visual Studio Code 開發 MAUI 應用是值得期待的，也為 MAUI 拓寬了開發場景，結合 Hot Reload 會讓跨平臺應用開發更有效率。我期待正式版本能和 MAUI 的正式版本有更好的結合。

相關文章