縮小差距：MAUI 混合行動開發-js教程-PHP中文網

Bridging the Gap: MAUI Hybrid Mobile Development

在行動應用程式開發的動態世界中，尋找兼具效率、靈活性和穩健性的正確工具是一項持續的任務。雖然程式設計中有許多可用的行動框架，但當專注於 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>();

登入後複製

注意：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 更緊密整合和更簡單的插件開發流程的開發人員。