在行動(dòng)應(yīng)用程式開(kāi)發(fā)的動(dòng)態(tài)世界中，尋找兼具效率、靈活性和穩(wěn)健性的正確工具是一項(xiàng)持續(xù)的任務(wù)。雖然程式設(shè)計(jì)中有許多可用的行動(dòng)框架，但當(dāng)專注於 JavaScript 框架和混合應(yīng)用程式時(shí)，選擇會(huì)變得有限。開(kāi)發(fā)人員經(jīng)常尋求能夠讓他們無(wú)縫利用現(xiàn)代 JavaScript 框架以及本機(jī)功能的解決方案。

進(jìn)入 MAUI Hybridizer，這是一個(gè)功能強(qiáng)大的庫(kù)，旨在將 JavaScript 應(yīng)用程式與 .NET MAUI 集成，使開(kāi)發(fā)人員能夠輕鬆創(chuàng)建動(dòng)態(tài)、跨平臺(tái)混合行動(dòng)應(yīng)用程式。

對(duì)增強(qiáng)型混合庫(kù)的需求

基於現(xiàn)有解決方案

使用 JavaScript 框架建立混合應(yīng)用程式有多種選擇。 Capacitor 和 NativeScript 等工具為混合行動(dòng)應(yīng)用程式開(kāi)發(fā)做出了重大貢獻(xiàn)。它們提供了有價(jià)值的功能並擁有自己的優(yōu)勢(shì)：

• Capacitor 提供廣泛的平臺(tái)支援和熟悉的基於 Web 的開(kāi)發(fā)方法。
• NativeScript 允許開(kāi)發(fā)人員使用 JavaScript、TypeScript 或 Angular 來(lái)建立本機(jī)應(yīng)用程序，從而提供對(duì)本機(jī) API 的直接存取。

但是，開(kāi)發(fā)者可能會(huì)遇到以下的挑戰(zhàn)：

• 外掛程式開(kāi)發(fā)複雜性：Capacitor 外掛程式通常需要了解 Java 和 Swift 等本地語(yǔ)言，這對(duì)於那些主要從事 Web 開(kāi)發(fā)的人來(lái)說(shuō)可能是一個(gè)障礙。
• 支援和維護(hù)：NativeScript 雖然功能強(qiáng)大，但可能會(huì)缺乏積極的支援和更新，這可能會(huì)給開(kāi)發(fā)和維護(hù)生產(chǎn)就緒應(yīng)用程式帶來(lái)挑戰(zhàn)。

這些考慮因素強(qiáng)調(diào)了一個(gè)庫(kù)的機(jī)會(huì)，它結(jié)合了現(xiàn)有解決方案的優(yōu)勢(shì)，同時(shí)解決了它們的局限性，專門(mén)為JavaScript 框架和混合應(yīng)用程序提供了更簡(jiǎn)化和更易於訪問(wèn)的開(kāi)發(fā)體驗(yàn)。

MAUI 混合器簡(jiǎn)介

利用毛伊島豐富的遺產(chǎn)

.NET 多平臺(tái)應(yīng)用程式UI (MAUI) 建立在Xamarin 奠定的堅(jiān)實(shí)基礎(chǔ)之上，提供了一個(gè)統(tǒng)一的框架，用於跨多個(gè)平臺(tái)（包括Android、iOS、macOS 和Windows）創(chuàng)建本機(jī)應(yīng)用程式.這種豐富的背景意味著 MAUI 已經(jīng)實(shí)現(xiàn)了大量 API，無(wú)需特定於平臺(tái)的程式碼即可存取本機(jī)設(shè)備功能。

圖書(shū)館背後的邏輯

MAUI Hybridizer 可作為 JavaScript 應(yīng)用程式和 .NET MAUI 框架之間的橋樑。它支援 JavaScript 和 C# 層之間的雙向通信，允許開(kāi)發(fā)人員從 JavaScript 呼叫本機(jī) API，反之亦然。這是透過(guò)載入 JavaScript 應(yīng)用程式並促進(jìn)使用訊息系統(tǒng)進(jìn)行通訊的混合 Web 視圖來(lái)實(shí)現(xiàn)的。

無(wú)縫插件集成

MAUI Hybridizer 充分利用 MAUI 廣泛的 API 集，允許開(kāi)發(fā)人員將這些現(xiàn)有實(shí)作用作混合應(yīng)用程式中的插件。這不僅加速了開(kāi)發(fā)，還確保應(yīng)用程式基於經(jīng)過(guò)驗(yàn)證的穩(wěn)定技術(shù)建置。

主要特點(diǎn)

• 雙向通訊：從 JavaScript 無(wú)縫呼叫原生 C# 方法，並從 C# 呼叫 JavaScript 函數(shù)。
• 外掛程式架構(gòu)：輕鬆建立和整合自訂外掛程式以擴(kuò)展應(yīng)用程式的功能。
• 事件處理：跨兩層觸發(fā)和處理應(yīng)用程式生命週期事件，例如恢復(fù)和停止。

建立外掛：逐步指南

MAUI Hybridizer 的突出功能之一是能夠創(chuàng)建自訂插件，使開(kāi)發(fā)人員能夠透過(guò)利用本機(jī)設(shè)備功能來(lái)擴(kuò)展應(yīng)用程式的功能。

第 1 步：建立 .NET MAUI 類別庫(kù)

首先，建立一個(gè)新的.NET MAUI 類別庫(kù)專案。確保您使用的是支援的 .NET 版本（小於 9，因?yàn)?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 步：實(shí)作 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：透過(guò)依賴注入註冊(cè)插件

實(shí)作外掛程式後，您需要將其註冊(cè)到 MAUI 依賴注入容器，以便 Maui Hybridizer 能夠識(shí)別它。

在您的 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 是在建立外掛程式時(shí)由Allowed.Maui.Hybridizer.AutoGen 套件所建立的自動(dòng)產(chǎn)生的類別。它包含註冊(cè)插件服務(wù)的方法。

步驟5：初始化橋接服務(wù)

此步驟設(shè)定通訊通道，應(yīng)在 JavaScript 應(yīng)用程式中完成一次，通常是在應(yīng)用程式載入後。

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

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

第 6 步：建立 JavaScript 介面

在您的 JavaScript 應(yīng)用程式中，建立一個(gè)介面來(lái)與本機(jī)外掛程式進(jìn)行通訊。

dotnet new mauiclasslib -n MyCustomPlugin -f net8.0

解釋

• 平臺(tái)檢查：確定應(yīng)用程式是在網(wǎng)路上運(yùn)作還是作為本機(jī)應(yīng)用程式運(yùn)作。
• 方法：作為原生應(yīng)用程式運(yùn)行時(shí)，使用bridgeService.invoke呼叫原生方法。
• 用法：在 JavaScript 程式碼中匯入並使用 storagePlugin 來(lái)存取本機(jī)儲(chǔ)存功能。

從 C# 呼叫 JavaScript：處理事件

MAUI Hybridizer 也有助於從 C# 層呼叫 JavaScript 函數(shù)，這對(duì)於處理復(fù)原和停止等應(yīng)用程式生命週期事件特別有用。

實(shí)施事件處理

在 App.xaml.cs 檔案中，設(shè)定應(yīng)用程式生命週期事件並使用 _jsCaller 呼叫 JavaScript 方法。

dotnet add package Allowed.Maui.Hybridizer.AutoGen

解釋

• AppLifecycleService：處理應(yīng)用程式生命週期事件的自訂服務(wù)。
• HwvJsCaller：注入以啟用從 C# 呼叫 JavaScript 函數(shù)。
• 事件訂閱：當(dāng)應(yīng)用程式復(fù)原或停止時(shí)，會(huì)呼叫對(duì)應(yīng)的 JavaScript 函數(shù) Resumed 或 Stopped。

JavaScript 端

在您的 JavaScript 應(yīng)用程式中，使用bridgeService.register 註冊(cè)事件處理程序。

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);
}

完整範(fàn)例

此實(shí)作的綜合範(fàn)例可以在 MAUI Hybridizer 儲(chǔ)存庫(kù)內(nèi)的範(fàn)例專案中找到。

結(jié)論

MAUI Hybridizer 建立在現(xiàn)有工具的優(yōu)勢(shì)之上，為混合行動(dòng)應(yīng)用程式開(kāi)發(fā)提供強(qiáng)大、靈活的解決方案。透過(guò)簡(jiǎn)化外掛程式開(kāi)發(fā)並促進(jìn) JavaScript 和本機(jī)程式碼之間的無(wú)縫通信，它為開(kāi)發(fā)人員提供了一個(gè)可訪問(wèn)且高效的工具來(lái)創(chuàng)建高品質(zhì)的跨平臺(tái)應(yīng)用程式。

個(gè)人意見(jiàn)

作為一個(gè)熟悉混合行動(dòng)應(yīng)用程式開(kāi)發(fā)複雜性的開(kāi)發(fā)人員，我發(fā)現(xiàn) MAUI Hybridizer 有效地利用了 MAUI 豐富的 API 遺產(chǎn)，同時(shí)為 JavaScript 整合提供了直覺(jué)的介面。它透過(guò)提供一種替代方案來(lái)補(bǔ)充現(xiàn)有的解決方案，該替代方案可能更適合尋求與 .NET MAUI 更緊密整合和更簡(jiǎn)單的插件開(kāi)發(fā)流程的開(kāi)發(fā)人員。

現(xiàn)狀及未來(lái)計(jì)劃

MAUI Hybridizer 目前處?kù)稖y(cè)試階段，為開(kāi)發(fā)人員提供了探索其特性和功能的機(jī)會(huì)。隨著 .NET 9 的發(fā)布，該程式庫(kù)計(jì)劃退出 Beta 階段，並附帶 MAUI Hybridizer Essentials 套件中的一組必備插件，這些插件將覆蓋核心原生功能並進(jìn)一步增強(qiáng)開(kāi)發(fā)體驗(yàn)。

入門(mén)

要探索 Maui Hybridizer 並查看其實(shí)際情況，請(qǐng)?jiān)煸L GitHub 儲(chǔ)存庫(kù)並查看範(fàn)例專案。無(wú)論您是建立新應(yīng)用程式還是希望增強(qiáng)現(xiàn)有應(yīng)用程序，該程式庫(kù)都為混合行動(dòng)開(kāi)發(fā)提供了一條充滿希望??的前進(jìn)道路。

以上是縮小差距：MAUI 混合行動(dòng)開(kāi)發(fā)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！