Visa ett meddelande från JavaScript (JS-bindningar)

Den här guiden visar hur du visar en Windows App SDK appavisering direkt från Electron Main Process JavaScript med hjälp av genererade JS-bindningar.

Förutsättningar

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

• Installationen av utvecklingsmiljön har slutförts.

Steg 1: Visa en avisering från Electrons huvudprocess

Importera de genererade bindningarna via paketimporten #winapp/bindings , skapa en appavisering och visa den med standardmeddelandehanteraren:

Kräver @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8. Äldre projekt kan antingen uppgradera med npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings för att låta winapp init koppla in importkartan för #winapp/bindings, eller behålla den relativa formen require('../.winapp/bindings/index.js') (sökvägen är relativ till src/index.js; justera den om din ingångsfil finns någon annanstans).

// 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_ mappar egenskapen Default i Windows App SDK. De genererade bindningarna lägger till avslutande _ eftersom default det är ett JavaScript-nyckelord.

Steg 2: Kör det

Innan aviseringarna fungerar kontrollerar du att appen körs med identitet:

npx winapp node add-electron-debug-identity

Note

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

Starta nu appen:

npm start

Meddelandet Windows App SDK visas när huvudprocessen anropar showNotification.

Nästa steg

Grattis! Nu visar du Windows App SDK meddelanden från din Electron-app – inget internt tillägg, inget node-gyp byggsteg. 🎉

Nu är du redo att:

• Paketera din app för distribution — skapa en MSIX som du kan distribuera (körmiljön @microsoft/dynwinrt finns redan i din dependencies).

Eller utforska andra guider:

• Anropa Windows API:er från JavaScript – välj en fil och läs dess bilddimensioner med hjälp av JS-bindningar.
• Anropa Phi Silica från JavaScript – sammanfatta text med Windows App SDK AI via JS-bindningar.
• Kör WinML från JavaScript – använd Windows App SDK ML-provideridentifiering med onnxruntime-node.
• Skapa ett C++-internt tillägg – inbyggd C++-tilläggsmotsvarighet för meddelanden.
• Översikt över komma igång – gå tillbaka till huvudguiden.

Ytterligare resurser

• winapp CLI-dokumentation – fullständig CLI-referens (init, restore, node generate-bindings).
• Exempel på Electron App – fullständigt fungerande exempel, inklusive JS-bindningar.
• @microsoft/dynwinrt – den körning som driver de genererade bindningarna.
• @microsoft/dynwinrt-codegen – kodgeneratorn.