Начало работы. Добавление API Windows в ваше приложение Electron

В этом руководстве описано, как добавить собственные возможности Windows в приложение Electron с помощью интерфейса командной строки разработки приложение для Windows. Вы узнаете, как вызывать современные API Windows из вашего приложения Electron, тестировать приложения с учетом их идентичности и упаковывать их для распространения.

Что вы будете создавать

В конце этого руководства у вас будет приложение Electron, которое:

• ✅ вызывает современные API Windows (Windows SDK и Windows App SDK)
• ✅Использует возможности Windows ИИ из JavaScript (Phi Silica или WinML)
• ✅ При необходимости использует нативное дополнение, когда API требует нативного кода
• ✅ Выполняется с идентификатором приложения для тестирования защищенных API
• ✅ Пакеты в виде подписанного MSIX для распространения

Необходимые условия

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

• Windows 11 (Copilot+ PC при использовании Phi Silica)
• Node.js - winget install OpenJS.NodeJS --source winget
• .NET SDK версии 10 - winget install Microsoft.DotNet.SDK.10 --source winget
• Visual Studio с нативной рабочей нагрузкой для настольных ПК - winget install --id Microsoft.VisualStudio.Community --source winget --override "--add Microsoft.VisualStudio.Workload.NativeDesktop --includeRecommended --passive --wait"

Процесс

Выполните следующие руководства, чтобы настроить приложение Electron, вызвать современные API-интерфейсы Windows и упаковать его для распространения:

1. Настройка среды разработки

Во-первых, вы настроите среду разработки с помощью необходимых средств и пакетов SDK. Сюда входит следующее:

• Создание или настройка приложения Electron
• Установка интерфейса командной строки winapp
• Инициализация пакетов SDK Windows и необходимых ресурсов
• Настройка конвейера сборки

Начните настройку →

2. Вызов API Windows из JavaScript

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

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

3. Необязательно: Создание нативного дополнения

Пропустите этот шаг, если созданные привязки JS охватывают необходимый API Windows App SDK. Создавайте нативное расширение только тогда, когда вам нужна граница с нативным кодом, например для Win32, чистого COM, нативных библиотек C/C++ или управляемых сборок .NET.

Вариант A. Создание надстройки уведомления C++

Узнайте, как создать надстройку C++, которая вызывает API уведомлений Windows App SDK. Это отличная отправная точка для понимания собственных аддонов перед тем как погрузиться в более сложные сценарии.

Создание надстройки уведомления C++ →

Вариант B: Создание надстройки Phi Silica

Узнайте, как создать надстройку C#, которая использует модель ИИ Phi Silica для сводки текста на устройстве. Phi Silica — это небольшая языковая модель, которая выполняется локально на Windows 11 устройствах с NPU.

Создать дополнение Phi Silica →

Вариант C. Создание надстройки WinML

Узнайте, как создать надстройку C#, которая использует Windows Машинное обучение (WinML) для запуска пользовательских моделей ONNX для классификации изображений, обнаружения объектов и т. д.

Создать надстройку WinML →

4. Упаковка для распространения

Наконец, вы упаковите приложение в виде MSIX для распространения. Сюда входит следующее:

• Создание приложения для рабочей среды
• Создание и подписание пакета MSIX
• Тестирование установленного пакета
• Общие сведения о вариантах распространения

Упаковка приложения →

Быстрая навигация

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

• Документация по интерфейсу командной строки winapp — полный справочник по CLI
• Пример приложения Electron — полный рабочий пример
• Коллекция разработчиков ИИ — пример коллекции всех API-интерфейсов ИИ
• Windows App SDK Примеры — коллекция примеров Windows App SDK
• node-api-dotnet — библиотека взаимодействия JavaScript на C# ↔

Получение справки

• Обнаружена ошибка?Файл проблемы