缩小差距：MAUI 混合移动开发

在移动应用程序开发的动态世界中，寻找兼具效率、灵活性和稳健性的正确工具是一项持续的任务。虽然编程中有许多可用的移动框架，但当专注于 JavaScript 框架和混合应用程序时，选择会变得有限。开发人员经常寻求能够让他们无缝利用现代 JavaScript 框架以及本机功能的解决方案。

进入 MAUI Hybridizer，这是一个功能强大的库，旨在将 JavaScript 应用程序与 .NET MAUI 集成，使开发人员能够轻松创建动态、跨平台混合移动应用程序。

对增强型混合库的需求

基于现有解决方案

使用 JavaScript 框架构建混合应用程序有多种选择。 Capacitor 和 NativeScript 等工具为混合移动应用程序开发做出了重大贡献。它们提供了有价值的功能并拥有自己的优势：

• Capacitor 提供广泛的平台支持和熟悉的基于 Web 的开发方法。
• NativeScript 允许开发人员使用 JavaScript、TypeScript 或 Angular 构建本机应用程序，从而提供对本机 API 的直接访问。

但是，开发者可能会遇到诸如以下的挑战：

• 插件开发复杂性：Capacitor 插件通常需要了解 Java 和 Swift 等本地语言，这对于那些主要从事 Web 开发的人来说可能是一个障碍。
• 支持和维护：NativeScript 虽然功能强大，但可能会缺乏积极的支持和更新，这可能会给开发和维护生产就绪应用程序带来挑战。

这些考虑因素强调了一个库的机会，它结合了现有解决方案的优势，同时解决了它们的局限性，专门为 JavaScript 框架和混合应用程序提供了更简化和更易于访问的开发体验。

MAUI 混合器简介

利用毛伊岛丰富的遗产

.NET 多平台应用程序 UI (MAUI) 建立在 Xamarin 奠定的坚实基础之上，提供了一个统一的框架，用于跨多个平台（包括 Android、iOS、macOS 和 Windows）创建本机应用程序。这种丰富的背景意味着 MAUI 已经实现了大量 API，无需特定于平台的代码即可访问本机设备功能。

图书馆背后的逻辑

MAUI Hybridizer 充当 JavaScript 应用程序和 .NET MAUI 框架之间的桥梁。它支持 JavaScript 和 C# 层之间的双向通信，允许开发人员从 JavaScript 调用本机 API，反之亦然。这是通过加载 JavaScript 应用程序并促进使用消息系统进行通信的混合 Web 视图来实现的。

无缝插件集成

MAUI Hybridizer 充分利用 MAUI 广泛的 API 集，允许开发人员将这些现有实现用作混合应用程序中的插件。这不仅加速了开发，还确保应用程序基于经过验证的稳定技术构建。

主要特点

• 双向通信：从 JavaScript 无缝调用原生 C# 方法，并从 C# 调用 JavaScript 函数。
• 插件架构：轻松创建和集成自定义插件以扩展应用程序的功能。
• 事件处理：跨两层触发和处理应用程序生命周期事件，例如恢复和停止。

创建插件：分步指南

MAUI Hybridizer 的突出功能之一是能够创建自定义插件，使开发人员能够通过利用本机设备功能来扩展应用程序的功能。

第 1 步：创建 .NET MAUI 类库

首先，创建一个新的.NET MAUI 类库项目。确保您使用的是受支持的 .NET 版本（小于 9，因为 Roslyn 分析器可能尚未完全支持 .NET 9）。

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

步骤 2：添加 AutoGen NuGet 包

将Allowed.Maui.Hybridizer.AutoGen包添加到您的项目中：

dotnet add package Allowed.Maui.Hybridizer.AutoGen

第 3 步：实现 C# 插件

创建您的插件类，使用属性将其指定为插件，并将其方法指定为可从 JavaScript 调用。

using System.Text.Json.Serialization;
using Allowed.Maui.Hybridizer.Abstractions.Attributes;
using Allowed.Maui.Hybridizer.Abstractions.Plugins;

namespace MyCustomPlugin;

[HwvPlugin]
public class StoragePlugin
{
    [HwvMethod]
    public GetResponse Get([HwvPayload] GetRequest request)
    {
        return new GetResponse(Preferences.Default.Get(request.Key, string.Empty));
    }

    [HwvMethod]
    public void Set([HwvPayload] SetRequest request)
    {
        Preferences.Default.Set(request.Key, request.Value);
    }

    [HwvMethod]
    public void Remove([HwvPayload] RemoveRequest request)
    {
        Preferences.Default.Remove(request.Key);
    }

    public record GetRequest([property: JsonPropertyName("key")] string Key);

    public record GetResponse([property: JsonPropertyName("value")] string Value);

    public record SetRequest(
        [property: JsonPropertyName("key")] string Key,
        [property: JsonPropertyName("value")] string Value);

    public record RemoveRequest([property: JsonPropertyName("key")] string Key);
}

步骤 4：通过依赖注入注册插件

实现插件后，您需要将其注册到 MAUI 依赖注入容器，以便 Maui Hybridizer 能够识别它。

在您的 MauiProgram.cs 中，添加以下代码：

// Add the Hybridizer with plugin modules
builder.Services.AddHybridizer(
    Allowed.Maui.Hybridizer.Essentials.HwvPluginModule.Invoke, 
    MyCustomPlugin.HwvPluginModule.Invoke
);

// Add essentials plugins you need
builder.Services.RegisterAlertPlugin();
builder.Services.RegisterBatteryPlugin();
builder.Services.RegisterStoragePlugin();

// Add your custom plugin
builder.Services.AddTransient<customalertplugin>();
</customalertplugin>

注意：HwvPluginModule 是在构建插件时由Allowed.Maui.Hybridizer.AutoGen 包创建的自动生成的类。它包含注册插件服务的方法。

第5步：初始化桥接服务

此步骤设置通信通道，应在 JavaScript 应用程序中完成一次，通常是在应用程序加载后。

import { bridgeService } from "../hybridizer/BridgeService";

// Initialize the bridge service for communication
if (!platformService.isWeb())
    bridgeService.initialize();

第 6 步：创建 JavaScript 接口

在您的 JavaScript 应用程序中，创建一个接口来与本机插件进行通信。

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

解释

• 平台检查：确定应用程序是在网络上运行还是作为本机应用程序运行。
• 方法：作为原生应用运行时，使用bridgeService.invoke调用原生方法。
• 用法：在 JavaScript 代码中导入并使用 storagePlugin 来访问本机存储功能。

从 C# 调用 JavaScript：处理事件

MAUI Hybridizer 还有助于从 C# 层调用 JavaScript 函数，这对于处理恢复和停止等应用程序生命周期事件特别有用。

实施事件处理

在 App.xaml.cs 文件中，设置应用程序生命周期事件并使用 _jsCaller 调用 JavaScript 方法。

dotnet add package Allowed.Maui.Hybridizer.AutoGen

解释

• AppLifecycleService：处理应用程序生命周期事件的自定义服务。
• HwvJsCaller：注入以启用从 C# 调用 JavaScript 函数。
• 事件订阅：当应用程序恢复或停止时，会调用相应的 JavaScript 函数 Resumed 或 Stopped。

JavaScript 端

在您的 JavaScript 应用程序中，使用bridgeService.register 注册事件处理程序。

using System.Text.Json.Serialization;
using Allowed.Maui.Hybridizer.Abstractions.Attributes;
using Allowed.Maui.Hybridizer.Abstractions.Plugins;

namespace MyCustomPlugin;

[HwvPlugin]
public class StoragePlugin
{
    [HwvMethod]
    public GetResponse Get([HwvPayload] GetRequest request)
    {
        return new GetResponse(Preferences.Default.Get(request.Key, string.Empty));
    }

    [HwvMethod]
    public void Set([HwvPayload] SetRequest request)
    {
        Preferences.Default.Set(request.Key, request.Value);
    }

    [HwvMethod]
    public void Remove([HwvPayload] RemoveRequest request)
    {
        Preferences.Default.Remove(request.Key);
    }

    public record GetRequest([property: JsonPropertyName("key")] string Key);

    public record GetResponse([property: JsonPropertyName("value")] string Value);

    public record SetRequest(
        [property: JsonPropertyName("key")] string Key,
        [property: JsonPropertyName("value")] string Value);

    public record RemoveRequest([property: JsonPropertyName("key")] string Key);
}

完整示例

此实现的综合示例可以在 MAUI Hybridizer 存储库内的示例项目中找到。

结论

MAUI Hybridizer 建立在现有工具的优势之上，为混合移动应用程序开发提供强大、灵活的解决方案。通过简化插件开发并促进 JavaScript 和本机代码之间的无缝通信，它为开发人员提供了一个可访问且高效的工具来创建高质量的跨平台应用程序。

个人意见

作为一名熟悉混合移动应用程序开发复杂性的开发人员，我发现 MAUI Hybridizer 有效地利用了 MAUI 丰富的 API 遗产，同时为 JavaScript 集成提供了直观的界面。它通过提供一种替代方案来补充现有的解决方案，该替代方案可能更适合寻求与 .NET MAUI 更紧密集成和更简单的插件开发流程的开发人员。

现状及未来计划

MAUI Hybridizer 目前处于测试阶段，为开发人员提供了探索其特性和功能的机会。随着 .NET 9 的发布，该库计划退出 Beta 阶段，并附带 MAUI Hybridizer Essentials 包中的一组必备插件，这些插件将覆盖核心原生功能并进一步增强开发体验。

入门

要探索 Maui Hybridizer 并查看其实际情况，请访问 GitHub 存储库并查看示例项目。无论您是构建新应用程序还是希望增强现有应用程序，该库都为混合移动开发提供了一条充满希望的前进道路。

以上是缩小差距：MAUI 混合移动开发的详细内容。更多信息请关注PHP中文网其他相关文章！