Creazione di un componente aggiuntivo di notifica C++ per Electron

Questa guida illustra come creare un componente aggiuntivo nativo C++ che usa le API di notifica Windows App SDK nell'app Electron. Questo è un ottimo punto di partenza per comprendere i componenti aggiuntivi nativi prima di approfondire scenari più complessi.

Prerequisiti

• Completata la configurazione dell'ambiente di sviluppo
• Windows 11

Passaggio 1: Creare un componente aggiuntivo nativo C++

Usare l'interfaccia della riga di comando di winapp per generare un modello di componente aggiuntivo C++:

npx winapp node create-addon --template cpp --name nativeWindowsAddon

Verrà creata una nativeWindowsAddon/ cartella con:

• addon.cc - Codice C++ che chiamerà le API Di Windows
• binding.gyp - Configurazione di build per la compilazione nativa

Il comando aggiunge anche uno script build-addon all'oggetto package.json.

Compilare il componente aggiuntivo:

npm run build-addon

Passaggio 2: Aggiungere il codice di notifica

Aprire nativeWindowsAddon/addon.cc e aggiornarlo per usare le API di notifica Windows App SDK. Il modello generato comprende le intestazioni necessarie dei pacchetti Windows SDK e Windows App SDK.

Aggiungere include per l'API di notifica:

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

Aggiungere una funzione che mostra una notifica di Windows:

Napi::Value ShowNotification(const Napi::CallbackInfo& info) {
    Napi::Env env = info.Env();

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

        winrt::Microsoft::Windows::AppNotifications::Builder::AppNotificationBuilder builder;
        builder.AddText(winrt::to_hstring(title));
        builder.AddText(winrt::to_hstring(message));

        auto notification = builder.BuildNotification();
        winrt::Microsoft::Windows::AppNotifications::AppNotificationManager::Default().Show(notification);

        return Napi::Boolean::New(env, true);
    } catch (const winrt::hresult_error& e) {
        Napi::Error::New(env, winrt::to_string(e.message())).ThrowAsJavaScriptException();
        return env.Null();
    }
}

Registrare la funzione nel Init metodo :

exports.Set("showNotification", Napi::Function::New(env, ShowNotification));

Passaggio 3: Compilare il componente aggiuntivo

npm run build-addon

Passaggio 4: Testare la notifica

Aprire src/index.js e caricare il componente aggiuntivo:

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

Aggiungere una chiamata di test:

addon.showNotification('Hello from Electron!', 'This notification uses the Windows App SDK.');

Eseguire l'app:

npm start

Verrà visualizzata una notifica di Windows.

Passaggio 5: Aggiornare l'identità di debug

Ogni volta che si modifica appxmanifest.xml, eseguire:

npx winapp node add-electron-debug-identity

Passaggi successivi

• Creazione di un componente aggiuntivo Phi Silica - Usare le API di intelligenza artificiale sul dispositivo
• Creare un componente aggiuntivo WinML - Eseguire modelli di machine learning
• Creazione di pacchetti per la distribuzione - Creare un pacchetto MSIX firmato

Argomenti correlati

• Configurazione di Electron per lo sviluppo di API Windows
• Riferimento alla CLI di winapp
• API di notifica Windows App SDK