Blazor 移動開發-起步

Web 開發人員的移動Blazor開發系列 1

Blazor 移動開發-起步

譯自： https://chrissainty.com/getting-started-with-mobile-blazor-bindings/

 

這是系列博客文章中的第一篇，將探索新的實驗性Mobile Blazor Bindings項目。在這篇文章中，我將向您介紹Mobile Blazor Bindings（MBB）項目，說明它是什么，您為什么對其感興趣，什么是可用的，什么不可用，我們用它創建完成第一個應用程序。

什么是移動端Blazor 綁定（MBB）？

這是一個由Microsoft首席軟件工程師Eilon Lipton領導的新實驗項目。 該項目的特點是，它使開發人員能夠使用Blazor編程模型編寫本機跨平台的移動應用程序。這意味着不是像在Blazor的網絡托管模型中那樣編寫C＃和HTML的混合來創建組件，而是編寫C＃和本機移動控件。 為了讓您大致了解它的外觀，下面是為Blazor WebAssembly應用程序編寫的計數器組件，然后在下面是為MBB編寫的相同組件。

<!-- Blazor WebAssembly -->

<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

<!-- Mobile Blazor Bindings -->

<Label Text="@($"Current count: {currentCount}")" />
<Button Text="Click me" OnClick="@IncrementCount" />

@code
{
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

如您所見，編程模型是相同的，只是所使用的控件類型不同。 對於希望使用現有技術跨平台本機移動應用程序開發的Web開發人員而言，MBB成為了很好的墊腳石。我們使用MBB編寫應用程序所使用的組件實質上是Xamarin Forms控件的包裝器。 在撰寫本文時，以下組件可用:

Page components

• ContentPage
• MasterDetailPage
• Page
• TabbedPage
• TemplatedPage

Layout components

• ContentView
• Frame
• Grid
• ScrollView
• StackLayout

View components

• ActivityIndicator
• BoxView
• Button
• CheckBox
• Image
• ImageButton
• Entry
• Label
• ProgressBar
• Slider
• Stepper
• Switch

Specialized components

• Application
• BaseMenuItem
• FormattedString
• GestureElement
• MenuItem
• Shell (including ShellContent, ShellGroupItem, ShellItem, FlyoutItem, TabBar, ShellSection, Tab)
• Span

您可以查看官方文檔以獲取有關當前可用組件的最新信息。閱讀以上內容后，您可能會想到一些問題，Xamarin怎么了？ 他們知道這件事嗎？ Xamarin是否要換成這個了？ 這些都是很好的問題，所以讓我們接下來討論。

Xamarin怎么了？ Xamarin要被替換了嗎？

首先要指出的是，MBB只是一個實驗，沒有致力於將其開發和交付為產品。 當宣布MBB的第一個版本時，博客文章中包含以下聲明。

 我們從一組來自Web編程背景的開發人員那里聽說，擁有Web特定模式來構建移動應用程序將是他們的理想選擇。 這些綁定的目的是查看開發人員是否希望選擇使用具有Razor語法和功能的Blazor風格編程模型為本地移動應用程序編寫標記並進行數據綁定。

關鍵部分是“如果開發人員願意的話”。 如果將MBB推向前進，它將提供使用XAML編寫本機移動應用程序的替代方法。我認為這是個好主意，我很想知道它的發展方向，讓我遠離本機移動開發的大事是XAML，我只是不喜歡它。 這並不是說它有什么問題，我知道很多開發人員都非常喜歡使用它。 我也知道很多開發人員對HTML也有同樣的感覺。我認為，讓開發人員可以選擇使用他們喜歡的語言和技能來編寫應用程序是一件很棒的事情。 Uno Platform之類的公司以另一種方式提供了相同的選擇，從而使熟悉XAML的開發人員可以選擇使用該應用程序而不是HTML編寫Web應用程序。 每個人都贏了！

環境安裝

安裝VS Workloads

您可以使用Visual Studio或Visual Studio for Mac嘗試MBB，但需要安裝以下Workloads：.NET進行移動開發ASP.NET和Web開發。

 

 

 

安裝上述工作負載后，還需要下載並安裝最新版本的.NET SDK。

 

安裝 MBB 項目模板

我們需要使用一個項目模板來創建新的MBB應用程序，可以使用以下命令使用dotnet CLI安裝該模板（您可能需要在安裝之前檢查模板的較新版本）。

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.4.74-preview

安裝模板后，在運行dotnet new命令時應該可以看到它。

 

 

 啟用Windows Hypervisor平台

這是我第一次嘗試從Visual Studio運行Android模擬器時遇到的問題。 然后，我必須去啟用它，然后需要重新啟動PC。 因此，我想節省您一些時間，現在讓您知道。當與MBB或與此相關的任何Xamarin應用程序一起使用時，Windows Hypervisor平台將極大地提高Android模擬器的性能。 如果您單擊此鏈接，則會獲得有關如何在計算機上啟用WHP的完整說明。

建立一個 MBB 應用

完成上述步驟后，您應該准備創建第一個Mobile Blazor Bindings應用程序！目前，Visual Studio中沒有與新項目對話框的集成，因此我們需要使用dotnet CLI從命令行創建應用程序。 要創建新的MBB應用程序，請使用以下命令（我已將我的應用程序命名為HelloMBB，但可以隨心所欲地調用您的應用程序）：

dotnet new blazorhybrid -o HelloMBB

現在，您可以打開Visual Studio並加載解決方案。 您應該在解決方案資源管理器中看到5個項目：HelloMBB，HelloMBB.Android,HelloMBB.iOS,HelloMBB.macOS,HelloMBB.Windows。分別為各個不同平台的項目。

 

 

Android和iOS等其他項目本質上是MBB應用程序要加載到的特定平台的外殼。 所有的應用程序邏輯都保存在HelloMBB項目中。這與使用服務器或WebAssembly托管模型來運行Blazor Web應用程序的方法相同。 將所有通用組件放入RazorClassLibrary中，並從Server和WebAssembly項目中刪除除基礎結構代碼以外的所有內容。 如果您以前沒有看過，可以在我的GitHub上找到該方法的示例。如果要運行iOS項目，則需要一台Mac才能編譯該項目。 這是由於Apple許可，沒有解決方法。 我確實有Mac，但是目前正在Windows機器上工作，因此，現在，我將Android項目設置為啟動項目，然后按F5鍵運行該應用程序。

 

建立一個Android設備

如果您之前沒有做過Xamarin的工作，幾秒鍾后，您將看到此屏幕。

 

 

 

 這是因為我們目前沒有可供模擬器使用的Android設備設置。 我對Android設備不是很熟悉，因此我創建了所選的默認設備Pixel 2（+商店）。 至少在我的機器上，這似乎真的很好用*😋。創建設備后，將下載該設備，然后就可以使用它了。 這可能需要幾分鍾才能完成。

 

運行APP

 您可能最終會回到Visual Studio，至少是我這樣做的，但是現在“開始調試”按鈕應該包含您已創建的新設備的名稱。 再按一次F5，片刻后您應該會看到新的MBB應用程序。

 

 

 

做一些修改

讓我們進行簡單的更改，然后添加一個按鈕，該按鈕將更新文本以顯示“ Hello，Blazor！”。 而不是默認的“ Hello，World！”。 當前，沒有可用的MBB熱加載，因此我們將不得不停止調試以進行更改。停止調試后，打開Main.razor文件，把Label改成：

<Label Text="@($"{hello} {CounterState.CurrentCount}")" FontSize="40"  />

再加一行：

<Button Text="Update Message" OnClick="@(()=>this.hello="Hello Blazor!")"  Padding="10"></Button>

在@code 行的下一行加上：

string hello = "Hello, World";

按下F5鍵，畫面成了這個：

 

當你點擊 Update Message  ，你會看見Hello World變了。

 

 祝賀你！您已經創建，修改並運行了您的第一個Mobile Blazor Bindings應用程序！

總結

在這篇文章中，我介紹了Mobile Blazor Bindings。 我們首先介紹了MBB是什么，為什么我們可能會選擇嘗試MBB以及可用的組件。 我們還討論了與Xamarin有關的MBB，以及它如何補充現有的Xamarin平台。然后，我們繼續設置一台使用MBB的計算機，該計算機涵蓋了Visual Studio和Visual Studio for Mac所需的工作量。 如何通過啟用Windows Hypervisor平台為MBB安裝模板並提高Android設備仿真器的性能。最后，我們創建了一個新的MBB應用程序，並將其在Android設備模擬器上運行。 然后，我們對應用程序進行了簡單的更改，添加了一個按鈕，該按鈕更新了顯示的默認消息。希望我引起了您對Mobile Blazor Bindings的興趣。 下次，我將通過構建更復雜的應用程序來進行更深入的研究。