JS UI Framework

• Обзор
• Структура директорий
• Когда использовать
• Доступные компоненты
• Задействованные репозитории

Обзор

Фреймворк UI на JavaScript для OpenHarmony предоставляет базовые, контейнерные и канвасные UI-компоненты, а также стандартные возможности анимации CSS. Он поддерживает программную парадигму, схожую с веб-разработкой.

• Парадигма, схожая с веб-разработкой

  Фреймворк UI на JavaScript поддерживает языки, аналогичные языкам веб-разработки, таким как HTML и CSS. Вы можете использовать их для описания макета страницы и стилей, а также использовать JavaScript (соответствующий спецификациям ECMAScript) для поведения страницы. Эта парадигма позволяет избежать кода для переключения состояний UI. Информация о конфигурации представлений становится более понятной.

Рисунок 1 Архитектура фреймворка

Фреймворк UI на JavaScript состоит из слоев приложения, фреймворка, движка и портирования.

• Приложение

  Включает приложения с возможностями функциональных способностей (FA), разработанные с использованием фреймворка UI на JavaScript. Приложение FA в этом документе относится к приложению с FA, разработанному с помощью JavaScript.- Фреймворк

  Парсит UI-страницы и предоставляет Model-View-ViewModel (MVVM), маршрутизацию страниц, пользовательские компоненты и многое другое для фронтенд-разработки.

• Движок

  Выполняет парсинг анимации, создание объекта модели документов (DOM), вычисление макета, сборку команд рендеринга и отрисовку, а также управление событиями.

• Слой портирования

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

Структура директорий

Исходный код фреймворка хранится в /foundation/arkui/ace_engine. Ниже показана структура директорий:

/foundation/arkui/ace_engine
├── adapter                       # Код адаптации для платформы
│   ├── common
│   └── ohos
├── frameworks                    # Код фреймворка
│   ├── base                      # Базовые библиотеки
│   ├── bridge                    # Уровень моста между клиентскими и серверными компонентами
│   └── core                      # Основные компоненты

Когда использовать

Фреймворк JS UI предоставляет различные UI-компоненты с богатыми функциональностями и стилистическими определениями. Вы можете использовать и переиспользовать любой компонент в любом месте по мере необходимости. Вы можете создавать новые компоненты, объединяя существующие, чтобы упростить разработку.## Доступные компоненты

Поскольку текст очень короткий и не содержит никаких элементов, требующих перевода, основной текст остается без изменений.Таблица 1 Компоненты, предоставляемые фреймворком

Канвас

Сетка

контейнер сетки, строка сетки, колонка сетки

Участвующие репозиторииJS UI framework

arkui_ace_engine

ace_engine_lite

arkui_napi