Показать уведомление из JavaScript (привязки JavaScript)

В этом руководстве показано, как отображать уведомление приложения Windows App SDK непосредственно из JavaScript-кода основного процесса Electron с помощью сгенерированных JS-привязок.

Prerequisites

Перед началом работы с этим руководством убедитесь, что вы:

• Завершил настройку среды разработки.

Шаг 1. Отображение уведомления из основного процесса Electron

Импортируйте созданные привязки с помощью #winapp/bindings импорта пакета, создайте уведомление приложения и отобразите его с помощью диспетчера уведомлений по умолчанию:

Требуется @microsoft/dynwinrt-codegen ≥ 0.1.0-preview.8. Старые проекты можно либо обновить с помощью npm i -D @microsoft/dynwinrt-codegen@latest && npx winapp init --add-js-bindings, чтобы winapp init настроил карту импортов #winapp/bindings, либо сохранить относительную форму require('../.winapp/bindings/index.js') (путь задаётся относительно src/index.js; измените его, если ваш входной файл находится в другом месте).

// 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_сопоставляет свойство Windows App SDKDefault. Созданные привязки добавляют конечную строку _ , так как default это ключевое слово JavaScript.

Шаг 2. Запуск

Прежде чем уведомления будут работать, убедитесь, что приложение работает с удостоверением:

npx winapp node add-electron-debug-identity

Note

Эта команда уже является частью скрипта postinstall , добавленного в руководстве по настройке, поэтому она выполняется автоматически после npm install. Запускайте его вручную каждый раз, когда вы изменяете Package.appxmanifest, обновляете ресурсы приложения или переустанавливаете зависимости.

Теперь запустите приложение:

npm start

Уведомление Windows App SDK появляется, когда главный процесс вызывает showNotification.

Дальнейшие шаги

Поздравляем! Теперь ваше приложение Electron может показывать уведомления Windows App SDK — без нативного аддона и без этапа сборки node-gyp. 🎉

Теперь вы готовы:

• Упакуйте приложение для распространения — создайте MSIX-пакет, готовый к распространению (@microsoft/dynwinrt среда выполнения уже включена в ваш dependencies).

Или ознакомьтесь с другими руководствами:

• Вызывать API Windows из JavaScript — выберите файл и считайте размеры изображения с помощью JS-привязок.
• Вызов Phi Silica из JavaScript — суммируйте текст с помощью ИИ в Windows App SDK через привязки JavaScript.
• Запуск WinML из JavaScript — используйте обнаружение ML-поставщиков в Windows App SDK с помощью onnxruntime-node.
• Создание нативного дополнения C++ — нативный аналог на C++ для уведомлений.
• Общие сведения о начале работы — вернитесь к основному руководству.

Дополнительные ресурсы

• Документация по интерфейсу командной строки winapp — полный справочник по CLI (init, restore, node generate-bindings).
• Пример приложения Electron — полный рабочий пример, включая привязки JS.
• @microsoft/dynwinrt — среда выполнения, которая управляет созданными привязками.
• @microsoft/dynwinrt-codegen — генератор кода.