Een systeemeigen C++-invoegtoepassing maken met meldingen

Deze handleiding laat zien hoe u een systeemeigen C++-invoegtoepassing maakt waarmee de Windows App SDK meldings-API's in uw Electron-app worden aangeroepen. Dit is een goed uitgangspunt voor het begrijpen van systeemeigen invoegtoepassingen voordat u dieper ingaat op complexere scenario's.

Vereiste voorwaarden

Voordat u aan deze handleiding begint, moet u het volgende doen:

• De installatie van de ontwikkelomgeving is voltooid

Stap 1: Een systeemeigen C++-invoegtoepassing maken

We gaan een systeemeigen invoegtoepassing maken met behulp van C++ en node-addon-api. Dit biedt directe toegang tot Windows API's met maximale prestaties.

npx winapp node create-addon

Hiermee maakt u een nativeWindowsAddon/ map met:

• nativeWindowsAddon.cc - Uw C++-code die Windows-API's aanroept
• binding.gyp - Configuratie bouwen voor node-gyp

De opdracht installeert ook vereiste dev-afhankelijkheden (nan, node-addon-api, node-gyp) en voegt een build-nativeWindowsAddon script toe aan uw package.json:

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

De gegenereerde sjabloon bevat een voorbeeld-ShowNotification-functie die gebruikmaakt van de Windows SDK-meldings-API's. Laten we controleren of alles correct is ingesteld door de invoegtoepassing te bouwen:

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

Stap 2: de gegenereerde invoegtoepassing testen

Laten we controleren of de gegenereerde invoegtoepassing werkt door deze aan te roepen vanuit het hoofdproces. Open src/index.js:

1. Voeg de import van de invoegtoepassing toe met uw andere require instructies bovenaan:

const nativeWindowsAddon = require('../nativeWindowsAddon/build/Release/nativeWindowsAddon.node');

2. Roep de meldingsfunctie aan het einde van de createWindow() functie aan:

const createWindow = () => {
  // ... existing window creation code ...

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

Voordat de meldings-API werkt, moet u ervoor zorgen dat uw app wordt uitgevoerd met identiteit. Rennen:

npx winapp node add-electron-debug-identity

Voer nu uw app uit:

npm start

Je zou een melding moeten zien verschijnen! 🎉 De gegenereerde invoegtoepassing werkt direct klaar voor gebruik.

Stap 3: upgraden naar Windows App SDK meldingen

Nu we hebben bevestigd dat de addon werkt, gaan we deze upgraden om de moderne Windows App SDK notification API's (Microsoft.Windows.AppNotifications) te gebruiken, die een betere ontwikkelaarservaring en meer functies bieden. We hebben de Windows App SDK al ingesteld toen we de init-opdracht uit de installatiestappen hebben uitgevoerd.

Open nativeWindowsAddon/nativeWindowsAddon.cc en vervang de volledige inhoud door deze code:

#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 belangrijkste wijzigingen hier zijn het overschakelen van de oudere Windows.UI.Notifications naamruimte naar de moderne Microsoft.Windows.AppNotifications API's en het gebruik van AppNotificationBuilder om meldingen te maken in plaats van handmatig XML-tekenreeksen te maken. Dit biedt een schonere, beter onderhoudbare API die consistent is met de Windows App SDK patronen.

Stap 4: Herbouwen en testen

Bouw de invoegtoepassing nu opnieuw met de bijgewerkte code:

npm run build-nativeWindowsAddon

Werk het bericht in src/index.js bij om de wijziging weer te geven.

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

Voer uw app opnieuw uit:

npm start

U ziet de bijgewerkte melding met behulp van de moderne Windows App SDK API's.

Volgende stappen

Gefeliciteerd! U hebt een systeemeigen C++-invoegtoepassing gemaakt die Windows App SDK API's aanroept. 🎉

U kunt nu het volgende doen:

• Uw app voor distributie verpakken - Maak een MSIX-pakket dat u kunt distribueren

Of bekijk andere handleidingen:

• Een Phi Silicium Add-on Maken - Leer hoe je Windows AI API’s kunt gebruiken in een C#-add-on
• Een WinML-invoegtoepassing maken - Meer informatie over het gebruik van Windows Machine Learning in een C#-invoegtoepassing
• Overzicht Aan de slag - Ga terug naar de hoofdhandleiding

Aanvullende informatiebronnen

• documentatie voor winapp CLI - Volledige CLI-verwijzing
• Voorbeeld Electron App - Volledig werkvoorbeeld met C++-invoegtoepassing
• node-addon-api - C++ ↔ JavaScript interoperabiliteitsbibliotheek
• Windows App SDK Samples - Verzameling van Windows App SDK voorbeelden