C++ natív bővítmény létrehozása értesítésekkel

Ez az útmutató bemutatja, hogyan hozhat létre natív C++ bővítményt, amely meghívja a Windows App SDK értesítési API-kat az Electron-alkalmazásban. Ez nagyszerű kiindulópont a natív bővítmények megértéséhez, mielőtt összetettebb forgatókönyvekbe kezdene.

Előfeltételek

Az útmutató megkezdése előtt győződjön meg arról, hogy a következőt tette:

1. lépés: C++ natív bővítmény létrehozása

Hozzunk létre egy natív bővítményt a C++ és a node-addon-api használatával. Ez közvetlen hozzáférést biztosít Windows API-khoz maximális teljesítménnyel.

npx winapp node create-addon

Megjegyzés:

Ez a parancs Python vagy szükséges Visual Studio eszközök telepítésére kérheti, ha még nincs telepítve.

Ezzel létrehoz egy nativeWindowsAddon/ mappát a következőkkel:

  • nativeWindowsAddon.cc - A Windows API-kat meghívó C++ kód
  • binding.gyp – Buildkonfiguráció a node-gyp számára

A parancs emellett telepíti a szükséges fejlesztői függőségeket (nan, node-addon-api, ) node-gypés hozzáad egy build-nativeWindowsAddon szkriptet a következőhöz package.json:

{
  "scripts": {
    "build-nativeWindowsAddon": "node-gyp clean configure build --directory=nativeWindowsAddon"
  }
}

A létrehozott sablon tartalmaz egy minta ShowNotification függvényt, amely a Windows SDK értesítési API-kat használja. A bővítmény létrehozásával ellenőrizzük, hogy minden megfelelően van-e beállítva:

# Build the C++ addon
npm run build-nativeWindowsAddon

Megjegyzés:

C#-bővítményt is létrehozhat a következővel npx winapp node create-addon --template cs: . A C#-bővítmények node-api-dotnetet használnak. További lehetőségekért tekintse meg a bővítmények létrehozásának egyéb útmutatóit vagy a teljes parancsdokumentációt .

2. lépés: A létrehozott bővítmény tesztelése

Ellenőrizzük, hogy a létrehozott bővítmény működik-e a fő folyamatból való meghívással. Megnyitás src/index.js:

  1. Adja hozzá a bővítmény importálását a többi require utasításhoz az elején:
const nativeWindowsAddon = require('../nativeWindowsAddon/build/Release/nativeWindowsAddon.node');
  1. Hívja meg az értesítési függvényt a createWindow() függvény végén:
const createWindow = () => {
  // ... existing window creation code ...

  // Test the Windows SDK notification
  nativeWindowsAddon.showNotification(
    'Hello from Electron!',
    'This notification uses the Windows SDK.'
  );
};

Mielőtt az értesítési API működni fog, gondoskodnia kell arról, hogy az alkalmazás identitással fusson. Indítás:

npx winapp node add-electron-debug-identity

Megjegyzés:

Ez a parancs már része a(z) postinstall telepítési útmutatóban hozzáadott szkriptnek, ezért automatikusan fut ezután: npm install. Azonban manuálisan kell futtatnia, amikor módosítja a Package.appxmanifest-t, frissíti az alkalmazás erőforrásait, vagy újratelepíti a függőségeket.

Most futtassa az alkalmazást:

npm start

Megjelenik egy értesítés! 🎉 A létrehozott bővítmény azonnal használható.

⚠️ Ismert probléma: Az alkalmazás összeomlik vagy üres ablak (kattintson a kibontásához)

Van egy ismert Windows hiba a ritkán csomagolt Electron-alkalmazásokkal, amely miatt az alkalmazás összeomlik az indításkor, vagy nem rendereli a webes tartalmat. A problémát kijavítottuk Windows, de még nem propagáltuk az összes eszközre.

Kerülő megoldásért tekintse meg a fejlesztési környezet beállítását .

3. lépés: Frissítés Windows App SDK értesítésekre

Most, hogy megerősítettük a bővítmény működését, frissítsük a modern Windows App SDK értesítési API-k (Microsoft.Windows.AppNotifications) használatára, amelyek jobb fejlesztői élményt és további funkciókat biztosítanak. Már beállítottuk a Windows App SDK, amikor futtattuk az init parancsot a beállítási lépésekből.

Nyissa meg nativeWindowsAddon/nativeWindowsAddon.cc és cserélje le a teljes tartalmat erre a kódra:

#include <napi.h>
#include <windows.h>

#include <winrt/Windows.Foundation.h>
#include <winrt/Microsoft.Windows.AppNotifications.h>
#include <winrt/Microsoft.Windows.AppNotifications.Builder.h>

using namespace winrt;
using namespace Microsoft::Windows::AppNotifications;
using namespace Microsoft::Windows::AppNotifications::Builder;

// Function to display a Windows App SDK notification
void ShowNotification(const Napi::CallbackInfo& info) {
    Napi::Env env = info.Env();

    try {
        // Get arguments from JavaScript (title and message)
        if (info.Length() < 2 || !info[0].IsString() || !info[1].IsString()) {
            Napi::TypeError::New(env, "Expected two string arguments: title and message").ThrowAsJavaScriptException();
            return;
        }

        std::string title = info[0].As<Napi::String>();
        std::string message = info[1].As<Napi::String>();

        // Convert to wide strings
        std::wstring wTitle(title.begin(), title.end());
        std::wstring wMessage(message.begin(), message.end());

        // Use AppNotificationBuilder for a cleaner API
        AppNotificationBuilder builder;
        builder.AddText(wTitle);
        builder.AddText(wMessage);
        
        AppNotification notification = builder.BuildNotification();
        AppNotificationManager::Default().Show(notification);

    } catch (const winrt::hresult_error& ex) {
        Napi::Error::New(env, winrt::to_string(ex.message())).ThrowAsJavaScriptException();
    } catch (const std::exception& ex) {
        // Handle exceptions and throw back to JavaScript
        Napi::Error::New(env, ex.what()).ThrowAsJavaScriptException();
    } catch (...) {
        Napi::Error::New(env, "Unknown error occurred").ThrowAsJavaScriptException();
    }
}

// Initialize the module
Napi::Object Init(Napi::Env env, Napi::Object exports) {
    exports.Set(Napi::String::New(env, "showNotification"), Napi::Function::New(env, ShowNotification));
    return exports;
}

NODE_API_MODULE(addon, Init)

Itt a legfontosabb változások a régebbi Windows.UI.Notifications névtérről a modern Microsoft.Windows.AppNotifications API-kra való váltás, valamint az AppNotificationBuilder használata értesítések létrehozására az XML-sztringek manuális létrehozása helyett. Ez egy tisztább, karbantarthatóabb API-t biztosít, amely összhangban van a Windows App SDK mintákkal.

4. lépés: Újraépítés és tesztelés

Most építse újra a bővítményt a frissített kóddal:

npm run build-nativeWindowsAddon

Frissítse az üzenetet, src/index.js hogy tükrözze a változást:

nativeWindowsAddon.showNotification(
  'Hello from Electron!',
  'This notification is powered by the Windows App SDK!'
);

Futtassa újra az alkalmazást:

npm start

A frissített értesítés a modern Windows App SDK API-k használatával jelenik meg!

Következő lépések

Gratulálok! Sikeresen létrehozott egy natív C++ bővítményt, amely meghívja Windows App SDK API-kat! 🎉

Most készen áll a következőre:

Vagy fedezze fel a többi útmutatót:

További források

  • Last updated on