Blazor 移動開發-起步

阿新 • • 發佈：2020-07-31

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(includingShellContent,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（+商店）。至少在我的機器上，這似乎真的很好用*

Blazor 移動開發-起步

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