65.9K
CodeProject 正在变化。 阅读更多。
Home

准备好使用 Mobile Blazor Bindings 为跨平台移动开发学习 Blazor 了吗？

syed shanu
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.96/5 (11投票s)

2020年1月22日

CPOL

12分钟阅读

viewsIcon

39353

downloadIcon

341

在本文中，我们将学习如何开始使用新的 Mobile Blazor Binding 来开发跨平台移动应用程序。

引言

在本文中，我们将学习如何开始使用新的 Mobile Blazor Binding 来开发跨平台移动应用程序。我们将涵盖以下主题。

  • 如何安装 Mobile Blazor Binding
  • 创建我们的第一个 Mobile Blazor Binding 应用程序
  • 创建简单的移动游戏应用程序，在 5 次尝试内找到我的名字
  • 使用 Xamarin Essentials 添加文本到语音功能

2020年1月14日，微软发布了新的实验性 Mobile Blazor Binding，用于使用 Blazor 开发跨平台移动应用程序。是的，目前这只是一个实验性版本，但我们仍然可以开始工作和学习 Mobile Blazor Binding，使用 Blazor 代码开发我们的移动应用程序。对于所有 C# 程序员来说，这将是使用 C# 代码开发移动应用程序的一个很好的开始，而且不需要太多了解 Xamarin、Android 或 IOS 开发。

Mobile Blazor Binding 是 Blazor 和 Xamarin.Forms 的结合。UI 设计部分基于 Xamarin.Forms UI 控件，组件和代码部分基于 Blazor。Blazor 和 Xamarin.Forms 的结合允许用户使用 Web 编程模式为 iOS 和 Android 创建原生移动应用程序开发。所有 Android 和 iOS 的设计和代码部分都可以从 Blazor 项目中创建，并使用 Android 和 iOS 项目，应用程序可以在相应的模拟器或设备上运行。

更多详情，请参阅 此链接。

Mobile Blazor Binding 应用程序入门

当我们创建 Mobile Blazor Binding Blazor 应用程序时，默认情况下，我们的解决方案中会添加 3 个项目。在解决方案中，我们可以找到 3 个项目：

1. Blazor 项目

这是我们使用 Blazor 设计页面 UI 并完成移动应用程序开发所有业务逻辑的地方。请注意，UI 设计部分，我们将在 Razor 页面中使用相同的 Xamarin.Forms UI 控件。在代码部分，我们将更详细地了解如何添加新页面，以及如何使用 Blazor 代码创建自己的游戏。

2. Android 项目

我们还可以看到 Android 项目已添加到我们的解决方案中，该项目用于在 Android 模拟器或 Android 设备上构建和运行 Blazor 应用程序。

3. IOS 项目

我们还可以看到 iOS 项目已添加到我们的解决方案中，该项目用于在 iOS 模拟器或 iOS 设备上构建和运行 Blazor 应用程序。

背景

必备组件

为了使用 Mobile Blazor Binding，您需要安装 .NET Core 3.0 或更高版本的 SDK。您需要在计算机上安装 Visual Studio 或 Visual Studio for Mac、ASP.NET Web 开发和移动开发（含 Xamarin.Forms）工作负载。在此篇文章中，我已安装了最新版本的 Visual Studio 2019，并使用了 .NET Core 3.0 SDK。

安装 Mobile Blazor Binding 模板

安装完先决条件后，您就可以开始使用 Mobile Blazor Binding 了，但要使用 Mobile Blazor Binding，我们需要安装模板。为此，请打开命令提示符。

点击 Windows 开始：在命令提示符中键入 **CMD** 并按 **Enter**。

在命令提示符中，输入以下代码来安装 Microsoft MobileBlazorBindings 模板。

我们需要在 CMD 或 Shell 中运行以下代码，复制代码并粘贴，然后按 Enter 键。

dotnet new -i Microsoft.MobileBlazorBindings.Templates::0.1.173-beta

等待几秒钟，模板将安装完成。

Using the Code

创建 Mobile Blazor Binding 应用程序

点击 Windows 开始：在命令提示符中键入 **CMD** 并按 **Enter**。

在命令提示符中，导航到您想要创建应用程序的驱动器和文件夹。

在这里，我在 D:> 驱动器下创建了一个文件夹，并将项目创建在 Android/Blazor 文件夹下。

要在命令提示符中创建项目，请运行以下命令：

dotnet new mobileblazorbindings -o ShanuMobile

请注意，ShanuMobile 是 projectName。您可以将其替换为您需要的项目名称。

Mobile Blazor Binding 解决方案结构

当我们创建 Mobile Blazor Binding Blazor 应用程序时，默认情况下，我们的解决方案中会添加 3 个项目。在解决方案中，我们可以找到 3 个项目：

1. Blazor 项目

这是我们使用 Blazor 设计页面 UI 并完成移动应用程序开发所有业务逻辑的地方。请注意，UI 设计部分，我们将在 Razor 页面中使用相同的 Xamarin.Forms UI 控件。在代码部分，我们将更详细地了解如何添加新页面，以及如何使用 Blazor 代码创建自己的游戏。

在这里，我们创建的项目名称为“ShanuMobile”，它已作为 Blazor 项目创建，在该项目中，我们可以看到默认添加了 Microsoft.MobileBlazorBinding 和 Xamarin.Forms 包。此外，Blazor 项目包含以下文件：

  • Imports.razor

    Imports.razor 文件包含默认所需的 Xamarin.Forms 和 MobileBlazorBindings 导入，以便使用 Xamarin.Forms 和 Blazor 代码为 Android 和 iOS 创建原生移动应用。

  • App.cs

    在 App.cs 类中，我们将指定默认加载的 Razor 页面。在下面的代码中，我们可以看到 HelloWorldRazor 页面已添加，以默认显示。

  • Counter.Razor

    默认情况下，我们可以看到 Counter.Razor 页面已添加。在这里，我们可以看到示例中使用了 Xamarin.Form 的 UI 控件，例如 StackLayout，我们还可以看到 Blazor 代码函数已添加，以在按钮点击事件中执行递增操作。

  • HelloWorld.Razor

    在 HelloWorld Razor 页面中，我们可以看到该页面被设为 ContentPage，该页面将首先加载，并将 Counter 页面添加到 HelloWorld 的 content 页面中，以执行递增功能。

2. Android 项目

我们还可以看到 Android 项目已添加到我们的解决方案中，该项目用于在 Android 模拟器或 Android 设备上构建和运行 Blazor 应用程序。

在这里，我们创建的项目名称为“ShanuMobile”，Android 项目已默认创建为 ShanuMobile.Android。

在这里，我们不需要处理太多内容，因为我们将把 Blazor App 添加到 MainActivity 中以运行我们的移动应用程序。我们还可以在 Label 中添加 App 显示名称，默认情况下，项目名称已添加到 Label 中。如果需要，您可以进行更改，还可以从 MainActivity 中更改应用程序的图标。为了在 Android 模拟器或 Android 设备上运行我们的 Blazor 应用，请将 Android 项目设置为启动项目。

3. IOS 项目

我们还可以看到 iOS 项目已添加到我们的解决方案中，该项目用于在 iOS 模拟器或 iOS 设备上构建和运行 Blazor 应用程序。

在这里，我们不需要处理太多内容，因为我们将把 Blazor App 添加到 AppDelegate 中以运行我们的移动应用程序。为了在 iOS 模拟器或 iOS 设备上运行我们的 Blazor 应用，请将 iOS 项目设置为启动项目。

在 Android 上运行 Blazor APP

现在我们可以在 Android 设备或 Android 模拟器上看到 Counter 演示。为此，首先将 Android 项目设置为启动项目。右键单击 Android 项目，然后单击“设置为启动项目”。您可以通过 USB 在连接的 Android 设备上运行应用程序，或通过已安装的 Android 模拟器运行。

在这里，我通过 USB 连接了我的三星 Galaxy Note 10 手机，并选择了我的手机设备来运行 Blazor Mobile 应用程序。您可以连接到您的 Android 设备，或选择或安装 Android 模拟器来在模拟器中运行。

选择后，我们的 Android 设备将运行应用程序并等待几秒钟。我们将看到我们的移动应用程序正在连接的 Android 手机设备上运行。

使用 Blazor 创建“找到我的名字”手机游戏

什么是“找到我的名字”益智游戏

“找到我的名字”益智游戏是一款问答游戏，用户需要从隐藏的字符中选出我名字的全部字符。我有一组 12 个字符，例如“ABSDEHGZNXCU”。在这 12 个字符中，包含了我的名字字符“SHANU”。每当用户点击“新益智游戏”按钮时，我都会打乱所有字符，并为所有字符创建 12 个带有“？”符号的按钮，在按钮点击事件中，我们将从 0 到 11 的字符作为数组传递给每个按钮，从按钮 1 到 12 开始。

规则很简单，用户只有 5 次机会，在这 5 次机会内，他/她需要找到我的名字“SHANU”。每个按钮将包含“ABSDEHGZNXCU”中的一个字符。第一个按钮将包含第一个字符，第二个按钮将包含第二个字符，依此类推，最多 12 个按钮将包含从 1 到 12 的一个字符。棘手之处在于，每当用户点击“开始游戏”时，我们将打乱 2 个字符的排列，并随机将字符绑定到按钮。按钮将不会显示隐藏的字符，按钮的文本将是“?”。用户需要在 5 次尝试内准确找到我的名字“Shanu”。如果找到，他/她就赢得了游戏，否则就输了游戏。用户可以尝试任意次数，玩游戏没有限制。这是一种有趣的益智游戏。

在此游戏中，我们还将使用 Xamarin.Essentials 来使用文本到语音功能，以便在游戏开始和获胜/失败消息播报中使用语音功能。通过添加语音功能，游戏将更具交互性，并且用户玩起来会更有趣。

步骤 1：添加 Game.Razor 页面

右键单击 **Blazor 项目**，然后单击 **添加新项**，选择 **Razor 组件**，并将其命名为 Game.razor，然后单击 **添加**。

步骤 2：将 Xamarin.Essentials 包添加到 Blazor 项目

为了在我们的移动游戏应用程序中使用文本到语音功能，我们需要将 Xamarin.Essentials 包安装到 Blazor 项目中。为此，请右键单击 Blazor 项目，然后单击“管理 NuGet 包”。

选择 **浏览**，搜索 Xamarin Essentials，然后单击 **安装**。等待几秒钟，包将安装到您的项目中。

步骤 3：游戏设计部分编码

现在打开 Game.Razor 页面，并将代码替换为以下代码，用于我们的手机游戏设计。

在以下代码中，我们首先在标签中添加游戏标题“找到我的名字游戏”。接下来，在标签中，我们显示游戏的 Blazor 代码部分的返回结果值。然后，我们添加“开始游戏”按钮，该按钮从代码中调用 ShowButton 方法，以打乱谜题字符串并将结果绑定到按钮，并使用文本到语音功能。接下来，我们添加另一个标签来显示最终结果消息，即用户赢得了游戏还是输了游戏。最后，我们检查新游戏，并显示 12 个按钮来玩游戏。在每个按钮点击时，我们通过传递参数（字符数组从 0 到 11）来调用 Find Result，对应于从 1 到 12 的每个按钮。在 findResult 方法中，我们检查结果，并使用文本到语音来播报结果，同时向用户显示“赢”或“输”的消息。

<Frame CornerRadius="10" BackgroundColor="Color.Gold">

    <StackLayout Orientation="StackOrientation.Horizontal" 
     HorizontalOptions="LayoutOptions.Center">
        <Label Text="Find My Name Game!"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" FontSize="25" /> 
    </StackLayout>

</Frame>

<Frame CornerRadius="10" BackgroundColor="Color.LightBlue">

    <StackLayout Orientation="StackOrientation.Horizontal" 
     HorizontalOptions="LayoutOptions.Center">
        <Label Text="Result : "
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" FontSize="25" />

        <Label Text="@results"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" FontSize="25" />

    </StackLayout>

</Frame>

<Button Text="Start Game" OnClick="@showButtons" BackgroundColor="Color.LightSkyBlue" />

<Frame CornerRadius="10" BackgroundColor="Color.DeepPink">

    <StackLayout Orientation="StackOrientation.Horizontal" 
     HorizontalOptions="LayoutOptions.Center">

        <Label Text="@messages"
               FontAttributes="FontAttributes.Bold"
               VerticalTextAlignment="TextAlignment.Center" FontSize="25" />

    </StackLayout>

</Frame>

@if (findmyNameChar.Length > 0)
{
    <Frame CornerRadius="10" BackgroundColor="Color.DarkBlue">
        <StackLayout Orientation="StackOrientation.Horizontal" 
         HorizontalOptions="LayoutOptions.Center">
            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
             OnClick="() => findResult(findmyNameChar[0].ToString())" />

            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
             OnClick="() => findResult(findmyNameChar[1].ToString())" />

            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
             OnClick="() => findResult(findmyNameChar[2].ToString())" />
        </StackLayout>
    </Frame>

    <Frame CornerRadius="10" BackgroundColor="Color.DarkBlue">
        <StackLayout Orientation="StackOrientation.Horizontal" 
                     HorizontalOptions="LayoutOptions.Center">
            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
                             OnClick="() => findResult(findmyNameChar[3].ToString())" />

            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
                             OnClick="() => findResult(findmyNameChar[4].ToString())" />

            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
                             OnClick="() => findResult(findmyNameChar[5].ToString())" />
        </StackLayout>
    </Frame>

    <Frame CornerRadius="10" BackgroundColor="Color.DarkBlue">
        <StackLayout Orientation="StackOrientation.Horizontal" 
        HorizontalOptions="LayoutOptions.Center">
            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
            OnClick="() => findResult(findmyNameChar[6].ToString())" />

            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
            OnClick="() => findResult(findmyNameChar[7].ToString())" />

            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
            OnClick="() => findResult(findmyNameChar[8].ToString())" />
        </StackLayout>
    </Frame>

    <Frame CornerRadius="10" BackgroundColor="Color.DarkBlue">
        <StackLayout Orientation="StackOrientation.Horizontal" 
        HorizontalOptions="LayoutOptions.Center">
            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
            OnClick="() => findResult(findmyNameChar[9].ToString())" />

            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
            OnClick="() => findResult(findmyNameChar[10].ToString())" />

            <Button Text="?" BackgroundColor="Color.LightSkyBlue" 
            OnClick="() => findResult(findmyNameChar[11].ToString())" />
        </StackLayout>
    </Frame>
}

步骤 4：游戏设计部分编码

现在打开 Game.Razor 页面，并将代码替换为以下代码，用于我们的手机游戏设计。

首先，声明所有必需的变量，并在 ShowButtons 方法中，我们在每次调用时随机打乱 namePuzzle 并将其存储在 FinmyNameChar 中。同时，在第一次开始游戏时清除所有值。

此外，使用 Xamarin.Essentials.TextToSpeech.SpeakAsync，我们将文本“Five Chance to find Shanu”发送过去，将其转换为语音，并作为公告，告知用户游戏即将开始。每次用户点击 **开始游戏** 方法时，此函数都会被调用，并进行语音播报。

findResult 方法将从 12 个带有“?”的按钮调用，并将参数（findmyNameChar[0] 数组值，从 0 到 11）传递给函数，并检查查找名字“Shanu”的逻辑，同时检查 5 次尝试，最后向用户显示结果。

@code {

    int CharCount = 0; // To check and maintain the user click on each button

    int findvalue = 5; // To check the result count which is less than the find value 
        // here I have used 9 so the user can check their name trail only for 9 times.

    string namePuzzle = "ABSDEHGZNXCU";

    string findmyNameChar = "";
    string tofind = "SHANU";
    string results = "";
    string messages = "";

    void showButtons()
    {
        // to shuffle the character and reorder the characters for new Puzzle Game start

        Random rnd = new Random();

        findmyNameChar = new string(namePuzzle.ToCharArray().
                       OrderBy(s => (rnd.Next(2) % 2) == 0).ToArray());

        results = "";
        CharCount = 0;
        messages = "Start Your Game";

        Xamarin.Essentials.TextToSpeech.SpeakAsync
                ("Five Chance to find Shanu").ContinueWith((t) =>
    {
}, TaskScheduler.FromCurrentSynchronizationContext());

    }

    private void findResult(string puzzleChar)
    {
        CharCount = CharCount + 1;
        if (CharCount <= findvalue)
        {
            results = results + puzzleChar;
            if (CharCount >= tofind.Length)
            {
                if (results == tofind)
                {
                    messages = "You Won :)";
                    Xamarin.Essentials.TextToSpeech.SpeakAsync
                                       ("Wow You Won").ContinueWith((t) =>
                      { 
                    }, TaskScheduler.FromCurrentSynchronizationContext());
                }
                else
                {
                    messages = "You Loss :(";
                    Xamarin.Essentials.TextToSpeech.SpeakAsync
                                        ("Sorry You Loss").ContinueWith((t) =>
                     { 
                    }, TaskScheduler.FromCurrentSynchronizationContext());
                }
            }
        }
        else
        {
            results = "";
            CharCount = 0;
            messages = "Try Again :(";
        }
    }
}

步骤 5：将 Game.razor 页面添加到主内容页面

在 HelloWorld 中，我们将 Game razor 页面添加到内容页面以加载游戏。此外，我们将标题从“Hello World”更改为“Shanu Blazor Mobile!”。

步骤 6：在 Android 设备或模拟器上运行应用程序

在这里，我们使用了三星 Galaxy Note 10 Android 应用来运行我的游戏。您可以在任何 **Android 设备** 或您已安装的 **Android 模拟器** 上运行。

关注点

Mobile Blazor Bindings 是一个实验性版本，不适用于生产环境。但目前来说，它是开始和使用 Mobile Blazor Bindings，使用 Blazor 开发原生移动应用程序的一个好起点。这对于所有 Web 开发者以及不熟悉原生应用开发、甚至不熟悉 Xamarin 的 C# 爱好者来说都非常需要。我们作为 C# 爱好者，总是喜欢处理这类原生移动应用开发，而且是用 Blazor 来实现，这对我们来说简直是锦上添花。让我们等待正式发布。在此之前，让我们继续多尝试 Mobile Blazor Bindings。

历史

  • 2020年1月22日：ShanuMobile.Zip
© . All rights reserved.