Создание классических приложений для компьютеров с Windows Build desktop apps for Windows PCs

Эта статья содержит сведения, необходимые, чтобы приступить к созданию классических приложений для Windows или обновления существующих классических приложений для использования новейших возможностей Windows 10 This article provides the info you need to get started building desktop apps for Windows or updating existing desktop apps to adopt the latest experiences in Windows 10.

Платформы для классических приложений Platforms for desktop apps

Существуют четыре основные платформы для создания классических приложений для компьютеров с Windows. There are four main platforms for building desktop apps for Windows PCs. Каждая платформа предоставляет модель приложения, определяющую жизненный цикл приложения, полную инфраструктуру пользовательского интерфейса и набор элементов управления пользовательского интерфейса, которые позволяют создавать классические приложения, такие как Word, Excel и Photoshop, и получать доступ к исчерпывающему набору управляемых или собственных API-интерфейсов для использования функций Windows. Each platform provides an app model that defines the lifecycle of the app, a complete UI framework and set of UI controls that let you create desktop apps like Word, Excel, and Photoshop, and access to a comprehensive set of managed or native APIs for using Windows features.

Подробное сравнение этих платформ и дополнительные материалы по каждой платформе доступны в разделе Выбор платформы для приложения. For an in-depth comparison of these platforms along with additional resources for each platform, see Choose your app platform.

Передовая платформа для приложений и игр для, предназначенных для Windows 10. The leading-edge platform for Windows 10 apps and games. Вы можете создавать приложения UWP, которые используют только элементы управления и интерфейсы API универсальной платформы Windows (UWP), или использовать эти элементы управления и API в классических приложениях, созданных с помощью одной из других платформ. You can build UWP apps that exclusively use UWP controls and APIs, or you can use UWP controls and APIs in desktop apps that are built using one of the other platforms.

Предпочтительная платформа для собственных приложений для Windows, которым требуется прямой доступ к Windows и оборудованию. The platform of choice for native Windows apps that require direct access to Windows and hardware.

Общепризнанная платформа на основе .NET для преимущественно графических приложений для Windows, использующих модель пользовательского интерфейса XAML. The established .NET-based platform for graphically-rich managed Windows apps with a XAML UI model. Эти приложения могут быть нацелены на .NET Core 3 или полную платформу .NET Framework. These apps can target .NET Core 3 or the full .NET Framework.

Платформа на основе .NET, предназначенная для управляемых бизнес-приложений, использующих упрощенную модель пользовательского интерфейса. A .NET-based platform that is designed for managed line-of-business apps with a lightweight UI model. Эти приложения могут быть нацелены на .NET Core 3 или полную платформу .NET Framework. These apps can target .NET Core 3 or the full .NET Framework.

Стратегия развития Future roadmap

В будущем мы планируем улучшать платформы разработки приложений для Windows с помощью библиотеки пользовательского интерфейса Windows (WinUI) и Project Reunion. Looking forward, we are evolving the Windows app development platforms with the Windows UI Library (WinUI) and Project Reunion.

WinUI — это собственная среда взаимодействия с пользователем для приложений Windows 10. WinUI is a native user experience (UX) framework for Windows 10 apps. Библиотека WinUI разрабатывалась как набор средств. Она предоставляла новые и обновленные версии элементов управления WinRT для приложений UWP, предназначенных для более ранних версий Windows 10. WinUI started as a toolkit that provides new and updated versions of WinRT controls for UWP apps that target down-level versions of Windows 10. Область действия WinUI расширилась, и WinUI 3 представляет собой современную нативную платформу пользовательского интерфейса для приложений Windows 10 в UWP, .NET и Win32. As of WinUI 3, WinUI is growing in scope to become the premier native user interface (UI) framework for Windows 10 apps across UWP, .NET, and Win32 app platforms.

Project Reunion — это кодовое название для широкого спектра новых компонентов и инструментов для разработчиков. Это новый этап развития платформы для разработки приложений Windows. Project Reunion is the code name for a broad set of new developer components and tools that represents the next evolution in the Windows app development platform. Project Reunion включает единый набор API и инструментов, которые могут согласованно использоваться любыми приложениями в различных целевых версиях ОС Windows 10. Project Reunion provides a unified set of APIs and tools that can be used in a consistent way by any app on a broad set of target Windows 10 OS versions. Project Reunion дополняет имеющиеся платформы и среды приложений Windows, такие как UWP, нативная среда Win32 и .NET, общим набором API и инструментов, которые упрощают работу разработчиков. Project Reunion complements existing Windows app platforms and frameworks such as UWP and native Win32, and .NET with a common set of APIs and tools that developers can rely on across these platforms.

Дополнительные сведения см. в статье Project Reunion. For more information, see Project Reunion.

Обновление существующих классических приложений для Windows 10 Update existing desktop apps for Windows 10

Если у вас есть классические приложения WPF, Windows Forms или собственные классические приложения Win32, в Windows 10 и универсальной платформе Windows (UWP) предлагается много возможностей для реализации современных функций в имеющихся приложениях. If you have an existing WPF, Windows Forms, or native Win32 desktop app, Windows 10 and the Universal Windows Platform (UWP) offer many features you can use to deliver a modern experience in your app. Большинство этих функций доступны в виде модульных компонентов, которые можно внедрить в приложение в своем собственном темпе, не переписывая код приложения для другой платформы. Most of these features are available as modular components that you can adopt in your app at your own pace without having to rewrite your app for a different platform.

Ниже приведено лишь несколько функций, позволяющих улучшить существующие классические приложения. Here are just a few of the features available to enhance your existing desktop apps:

• Используйте MSIX для упаковки и развертывания классических приложений. Use MSIX to package and deploy your desktop apps. MSIX — это современный формат пакета приложения для Windows, позволяющий упаковывать любые приложения для Windows. MSIX is a modern Windows app package format that provides a universal packaging experience for all Windows apps. Этот безопасный и надежный формат упаковки сочетает в себе преимущества технологий установки с использованием MSI-файлов, APPX-файлов, App-V и ClickOnce. MSIX brings together the best aspects of MSI, .appx, App-V and ClickOnce installation technologies and is built to be safe, secure, and reliable.
• Интегрируйте возможности Windows 10 в свое классическое приложение с помощью расширений пакетов. Integrate your desktop app with Windows 10 experiences by using package extensions. Например, закрепите свое приложение в меню «Пуск», предоставьте к нему общий доступ или отправляйте всплывающие уведомления из приложения. For example, point Start tiles to your app, make your app a share target, or send toast notifications from your app.
• Используйте острова XAML для размещения элементов управления XAML UWP в своем классическом приложении. Use XAML Islands to host UWP XAML controls in your desktop app. Многие последние функции пользовательского интерфейса Windows 10 доступны только для элементов управления XAML UWP. Many of the latest Windows 10 UI features are only available to UWP XAML controls.

Дополнительные сведения доступны в приведенных ниже статьях. For more information, see these articles.

Платформа Platform	Описание Description	Документация и ресурсы Docs and resources
Универсальная платформа Windows (UWP) Universal Windows Platform (UWP)

Статья Article	Описание Description
Модернизация классических приложений Modernize desktop apps	Описываются последние возможности разработки для Windows 10 и UWP, которые можно использовать в любом классическом приложении, включая приложения WPF, Windows Forms и приложения Win32 на C++. Describes the latest Windows 10 and UWP development features you can use in any desktop app, including WPF, Windows Forms, and C++ Win32 apps.
Руководство. Модернизация приложения WPF Tutorial: Modernize a WPF app	Следуйте пошаговым инструкциям, чтобы модернизировать существующий пример бизнес-приложения WPF, добавив элементы управления рукописным вводом и календарем UWP в приложение и упаковав его в пакет MSIX. Follow step-by-step instructions to modernize an existing WPF line-of-business sample app by adding UWP Ink and calendar controls to the app and packaging it in an MSIX package.

Создание классических приложений Create new desktop apps

Ниже приведены некоторые ресурсы, которые помогут вам приступить к созданию классического приложения для Windows. If you are creating a new desktop app for Windows, here are some resources to help get you started.

Как быстро создать десктопное приложение на HTML, CSS и JavaScript

Можно ли использовать HTML, CSS и JavaScript для создания десктопных приложений?

В этой статье мы сосредоточимся в основном на том, как Electron можно использовать для создания десктопных приложений с использованием веб-технологий.

Electron

Electron может быть использован для создания десктопных приложений, также эти приложения будут мультиплатформенными — Windows, Mac, Linux и другие.

Electron объединяет Chromium и Node.js в одну среду исполнения. Это позволяет нам запускать код HTML, CSS и JavaScript в виде десктопного приложения.

Electron Forge

Если Electron используется напрямую, то перед сборкой приложения потребуется определённая ручная настройка. Также, если вы хотите использовать Angular, React, Vue или любой другой фреймворк или библиотеку, вам нужна будет ручная настройка.

Electron Forge значительно упрощает все вышеперечисленное.

Он предоставляет шаблонные приложения с Angular, React, Vue и другими фреймворками, что позволяет избежать дополнительных танцев с бубном.

Также он обеспечивает простоту сборки и упаковки приложения. В нём есть множество других функций, которые можно найти в документации.

Предварительная подготовка

Убедитесь, что у вас установлен Node.js. Если нет, то его можно скачать отсюда. Установите Electron Forge глобально, используя следующую команду:

Начнём с приложения

Используйте следующую команду для создания вашего приложения:

simple-desktop-app-electronicjs — это название приложения.

Потребуется некоторое время, чтобы команда, указанная выше, отработала. После завершения предыдущего процесса запустите приложение с помощью следующих команд:

Это должно открыть окно как на скрине ниже:

Разберёмся в структуре и коде

Приложение имеет определенную структуру папок. Здесь я перечислю некоторые важные моменты в этой структуре папок.

package.json

Содержит информацию о приложении, которое вы создаете, все зависимости, необходимые для приложения, и несколько скриптов. Некоторые из скриптов уже предварительно настроены, но вы также можете добавлять новые.

Путь config.forge содержит все конфигурации конкретно для Electron. Например, make-target используется для указания целевых файлов для различных платформ, таких как Windows, Mac или Linux.

Также в package.json есть «main»: «src/index.js» , который указывает, что src/index.js является входной точкой приложения.

src/index.js

Согласно package.json , index.js является основным скриптом. Процесс, который запускает основной скрипт, называется главным процессом. Таким образом, основной процесс запускает скрипт index.js .

Основной процесс нужен для отображения элементов интерфейса. Это делается путем создания страниц. Каждая созданная страница выполняется в процессе, называемом процессом отрисовки.

Главный процесс и процесс отрисовки

Основное предназначение главного процесса — создание страниц с помощью экземпляра BrowserWindow . Экземпляр BrowserWindow использует процесс отрисовки для запуска каждой страницы.

Любое приложение может иметь только один главный процесс, но много процессов визуализации.

Также возможно взаимодействие между главным процессом и процессом отрисовки. Однако, я не буду останавливаться на этом в текущей статье.

abcd.html показан в качестве второй веб-страницы в приведенной выше архитектуре. Но в нашем коде у нас не будет второй веб-страницы.

src/index.html

index.js загружает файл index.html в новый экземпляр BrowserWindow .

Это означает, что index.js создает новое окно GUI и загружает его со страницей index.html . Страница index.html запускается в своем собственном процессе отрисовки.

Код в index.js с пояснениями

Большая часть кода, созданного в index.js , содержит хорошие комментарии, объясняющие, что происходит. Здесь я упомяну несколько ключевых моментов, которые следует отметить в index.js :

Приведенный выше фрагмент кода просто создает экземпляр BrowserWindow и загружает index.html в BrowserWindow . Вы увидите, что app часто используется в коде. Например, возьмите приведенный ниже фрагмент:

app используется для управления жизненным циклом событий приложения. Приведенный выше фрагмент кода говорит, что, когда приложение будет готово, нужно загрузить первое окно.

Точно так же app может использоваться для выполнения других действий с различными событиями. Например, его можно использовать для выполнения некоторых действий непосредственно перед закрытием приложения и так далее.

Создадим десктопное приложение конвертера температур

Давайте воспользуемся тем же приложением, которое мы создали ранее, и немного изменим его, чтобы создать приложение конвертера температуры.

Сначала давайте установим Bootstrap с помощью следующей команды:

Скопируйте следующий код в src/index.html:

Приведенный выше код выполняет следующие действия:

1. Создаёт поле ввода текста с id=»celcius» . Всякий раз, когда в это поле что-то вводится, вызывается функция celciusToFahrenheit() .
2. Создаёт поле ввода текста с id=»fahrenheit» . Всякий раз, когда в это поле что-то вводится, вызывается функция fahrenheitToCelcius() .
3. Когда в поле ввода «По Цельсию» вводится значение, в поле «По Фаренгейту» показывается та же температура, но в Фаренгейтах.
4. Когда в поле ввода «По Фаренгейту» вводится значение, в поле «По Цельсию» показывается та же температура, но в Цельсиях.

2 функции, которые выполняют преобразование температуры, будут храниться в renderer.js .

Создайте файл с именем renderer.js внутри src . Скопируйте в него следующий код:

Функция celciusToFahrenheit() считывает значение в текстовом поле «По Цельсию», преобразует его в градусы Фаренгейта и записывает новую температуру в текстовое поле «По Фаренгейту».

Функция fahrenheitToCelcius() делает ровно наоборот.

Запускаем приложение

Запустите приложение, используя следующую команду:

Должно открыться следующее окно. Попробуйте ввести разные значения в инпуты.