Skapa ett C++-internt tillägg med meddelanden

Den här guiden visar hur du skapar ett inbyggt C++-tillägg som anropar API:erna för Windows App SDK-meddelanden i din Electron-app. Detta är en bra utgångspunkt för att förstå interna tillägg innan du dyker in i mer komplexa scenarier.

Förutsättningar

Kontrollera att du har gjort så här innan du startar den här guiden:

Steg 1: Skapa ett C++-internt tillägg

Nu ska vi skapa ett internt tillägg med C++ och node-addon-api. Detta ger direkt åtkomst till Windows API:er med maximal prestanda.

npx winapp node create-addon

Note

Det här kommandot kan uppmana dig att installera Python eller nödvändiga Visual Studio verktyg om du inte redan har installerat dem.

Då skapas en nativeWindowsAddon/ mapp med:

  • nativeWindowsAddon.cc – Din C++-kod som anropar Windows-API:er
  • binding.gyp – Skapa konfiguration för node-gyp

Kommandot installerar även nödvändiga dev-beroenden (nan, node-addon-api, node-gyp) och lägger till ett build-nativeWindowsAddon-skript till din package.json.

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

Den genererade mallen innehåller en exempelfunktion ShowNotification som använder api:erna för Windows SDK-meddelanden. Nu ska vi kontrollera att allt har konfigurerats korrekt genom att skapa tillägget:

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

Note

Du kan också skapa ett C#-tillägg med .npx winapp node create-addon --template cs C#-tillägg använder node-api-dotnet. Se de andra guiderna för att skapa tillägg eller den fullständiga kommandodokumentationen för fler alternativ.

Steg 2: Testa det genererade tillägget

Nu ska vi kontrollera att det genererade tillägget fungerar genom att anropa det från huvudprocessen. Öppna src/index.js:

  1. Lägg till tilläggsimporten med dina andra require instruktioner överst:
const nativeWindowsAddon = require('../nativeWindowsAddon/build/Release/nativeWindowsAddon.node');
  1. Anropa meddelandefunktionen i slutet av createWindow() funktionen:
const createWindow = () => {
  // ... existing window creation code ...

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

Innan aviserings-API:et fungerar måste du se till att appen körs med identitet. Run:

npx winapp node add-electron-debug-identity

Note

Det här kommandot är redan en del av skriptet postinstall som vi lade till i installationsguiden, så det körs automatiskt efter npm install. Du måste dock köra den manuellt när du ändrar Package.appxmanifest, uppdaterar apptillgångar eller installerar om beroenden.

Kör nu appen:

npm start

Du bör se ett meddelande visas! 🎉 Det genererade tillägget fungerar direkt.

⚠️ Känt problem: App kraschar eller tomt fönster (klicka för att expandera)

Det finns en känd Windows bugg med gles paketering av Elektronprogram som gör att appen kraschar vid start eller inte renderar webbinnehåll. Problemet har åtgärdats i Windows men har ännu inte spridits till alla enheter.

Se konfigurationen av utvecklingsmiljön för en lösning.

Steg 3: Uppgradera till Windows App SDK-meddelanden

Nu när vi har bekräftat att tillägget fungerar ska vi uppgradera det till att använda de moderna Windows App SDK meddelande-API:erna (Microsoft.Windows.AppNotifications), som ger en bättre utvecklarupplevelse och fler funktioner. Vi har redan konfigurerat Windows App SDK när vi körde init-kommandot från installationsstegen.

Öppna nativeWindowsAddon/nativeWindowsAddon.cc och ersätt hela innehållet med den här koden:

#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)

De viktigaste ändringarna här växlar från det äldre Windows.UI.Notifications namnområdet till de moderna API:erna Microsoft.Windows.AppNotifications och använder AppNotificationBuilder för att skapa meddelanden i stället för att skapa XML-strängar manuellt. Detta ger ett renare, mer underhållsbart API som är förenligt med Windows App SDK mönster.

Steg 4: Återskapa och testa

Återskapa nu tillägget med den uppdaterade koden:

npm run build-nativeWindowsAddon

Uppdatera meddelandet i src/index.js så att det återspeglar ändringen:

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

Kör appen igen:

npm start

Du ser det uppdaterade meddelandet med hjälp av moderna Windows App SDK API:er!

Nästa steg

Grattis! Du har skapat ett internt C++-tillägg som anropar Windows App SDK API:er! 🎉

Nu är du redo att:

Eller utforska andra guider:

Ytterligare resurser

  • Last updated on