Wyświetlanie powiadomienia z języka JavaScript (powiązania JS)

W tym przewodniku pokazano, jak wyświetlić powiadomienie aplikacji Zestaw SDK do aplikacji systemu Windows bezpośrednio z kodu JavaScript głównego procesu Electron przy użyciu wygenerowanych powiązań JavaScript.

Wymagania wstępne

Przed rozpoczęciem tego przewodnika upewnij się, że:

• Ukończono konfigurację środowiska deweloperskiego.

Krok 1: Wyświetl powiadomienie z głównego procesu Electron

Zaimportuj wygenerowane powiązania za pomocą importu pakietu, skompiluj powiadomienie aplikacji i wyświetl je za pomocą #winapp/bindings domyślnego menedżera powiadomień:

Wymaga @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8. Starsze projekty mogą albo zaktualizować się przy użyciu npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings, aby winapp init podłączył mapę importów #winapp/bindings, albo zachować względną postać require('../.winapp/bindings/index.js') (ścieżka jest względna względem src/index.js; dostosuj ją, jeśli plik wejściowy znajduje się w innym miejscu).

// src/index.js (Electron main, CommonJS)
const {
  AppNotificationBuilder,
  AppNotificationManager,
} = require('#winapp/bindings');

function showNotification(title, message) {
  const notification = AppNotificationBuilder
    .create()
    .addText(title)
    .addText(message)
    .buildNotification();

  AppNotificationManager.default_.show(notification);
}

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

  // Test the Windows App SDK notification
  showNotification(
    'Hello from Electron!',
    'This notification is powered by the Windows App SDK!'
  );
};

Note

AppNotificationManager.default_ odwzorowuje właściwość Default Zestaw SDK do aplikacji systemu Windows. Wygenerowane wiązania dodają końcowe _, ponieważ default jest słowem kluczowym w języku JavaScript.

Krok 2. Uruchamianie

Zanim powiadomienia zaczną działać, upewnij się, że aplikacja jest uruchamiana z tożsamością:

npx winapp node add-electron-debug-identity

Note

To polecenie jest już częścią skryptu postinstall, dodanego w przewodniku konfiguracji, więc uruchamia się automatycznie po npm install. Uruchamiaj ją ręcznie za każdym razem, gdy zmodyfikujesz Package.appxmanifest, zaktualizuj zasoby aplikacji lub zainstaluj ponownie zależności.

Teraz uruchom aplikację:

npm start

Powiadomienie Zestaw SDK do aplikacji systemu Windows pojawia się, gdy główny proces wywołuje showNotification.

Dalsze kroki

Gratulacje! Możesz teraz wyświetlać powiadomienia Zestaw SDK do aplikacji systemu Windows z aplikacji Electron — bez natywnego dodatku, bez etapu kompilacji node-gyp. 🎉

Teraz możesz przystąpić do:

• Spakuj aplikację do dystrybucji — tworzy plik MSIX, który można wysłać ( @microsoft/dynwinrt środowisko uruchomieniowe znajduje się już w twoim pliku dependencies).

Możesz też zapoznać się z innymi przewodnikami:

• Wywołaj interfejsy API Windows z języka JavaScript — wybierz plik i odczytaj wymiary obrazu przy użyciu powiązań JS.
• Wywołaj Phi Silica w języku JavaScript — podsumowuj tekst za pomocą funkcji AI pakietu Zestaw SDK do aplikacji systemu Windows i powiązań JavaScript.
• Uruchom język WinML z poziomu języka JavaScript — użyj funkcji odnajdywania dostawcy Zestaw SDK do aplikacji systemu Windows ML za pomocą polecenia onnxruntime-node.
• Tworzenie natywnego dodatku języka C++ — natywnego odpowiednika dodatku języka C++ dla powiadomień.
• Wprowadzenie — wróć do głównego przewodnika.

Dodatkowe zasoby

• Dokumentacja interfejsu wiersza polecenia winapp — pełna dokumentacja interfejsu wiersza polecenia (init, restore, node generate-bindings).
• Przykładowa aplikacja Electron — kompletny, działający przykład, w tym wiązania JS.
• @microsoft/dynwinrt — środowisko uruchomieniowe obsługujące wygenerowane powiązania.
• @microsoft/dynwinrt-codegen — generator kodu.