предисловие

2 июня 2021 года была официально выпущена [HarmonyOS 2.0], использующая JavaScript в качестве языка архитектуры для разработки приложений IoT.Этот JavaScript снова стал горячей темой в области разработки после SpaceX. Сегодня я расскажу вам о HarmonyOS и технологическом стеке JavaScript GUI в HarmonyOS.

Резюме

Официальный выпуск Hongmeng OS 2.0 привлекла горячее обсуждение среди нетериев. Так что такое ОС Hongmeng? Hongmeng OS Android Shell? Какое влияние Hongmeng OS имеет на нашем предельном развитии? Как должно быть разработано приложение Hongmeng? Чтение этой статьи приведет вас к тому, чтобы понять Hongmeng шаг за шагом и ответить на эти вопросы. Теперь позвольте нам понять эти вопросы, чтобы понять Гончэн в глубине.

1. Что такое HarmonyOS

HarmonyOS — это «ориентированная на будущее» распределенная операционная система для всех сценариев (мобильный офис, спортивное здоровье, социальная коммуникация, медиа-развлечения и т. д.). На основе традиционных возможностей системы с одним устройством HarmonyOS предлагает распределенную концепцию, основанную на том же наборе системных возможностей и адаптируемой к различным формам терминалов, которые могут поддерживать мобильные телефоны, планшеты, интеллектуальные носимые устройства, интеллектуальные экраны, автомобильные машины. , ПК и умные колонки, гарнитуры, очки AR/VR и другое оконечное оборудование.

HarmonyOS обеспечивает базовую реализацию систем, связанных с IoT, через OpenHarmony + HarmoneyOS на стороне мобильного телефона реализует полноценную распределенную операционную систему 1 + 8 + N.

Кодовый адрес системы Hongmeng:

gitee.com/openharmony

2. В чем разница между HarmonyOS и Android?

Говоря о системе Hongmeng, каждый должен знать, является ли HarmonyOS системой Android с оболочкой?

Мы анализируем со следующих аспектов:

сцены, которые будут использоваться
1. Hongmeng OS — этоПолнофункциональная распределенная операционная система, а система Android в основном разработана только для мобильных телефонов.
2. Хотя систему Android также можно использовать в качестве операционной системы для электронных устройств, таких как телевизоры и планшеты, эти системы независимы друг от друга, и устройства на разных платформах не могут взаимодействовать друг с другом.
3. ОС Hongmeng позиционируется как система IoT с момента ее разработки.Распределенная мягкая шинаЭта технология обеспечивает удобную связь, обмен данными и удаленные сервисные вызовы между устройствами в локальной сети, и кажется, что эти устройства интегрированы.
Технологическая архитектура
1. Android-архитектура

2. 鸿蒙架构

JIT: (Just In Time) механизм компиляции точно в срок.Когда приложение работает, оно компилирует функции, часто используемые пользователями, в машинный код 010101, который может быть непосредственно выполнен машиной, и временно сохраняет его без перевода предложения. по приговору.

AOT: (Заблаговременно) Когда приложение загружается и устанавливается на телефон, оно компилирует код, который может быть скомпилирован в 101010, понятный машине; остальной код, который нелегко перевести, проснется и объяснит когда пользователь использует его компилятор для компиляции.

AOSP: Аббревиатура от «Проект Android с открытым исходным кодом». Это означает «Проект с открытым исходным кодом Android» на китайском языке.

Путем сравнения мы можем обнаружить, что хотя имена, используемые в системе Хунмэн, различны. Но общая архитектура Android относительно похожа. Горизонтальное сравнение Hongmeng на уровне Android:

В частности, описаны несколько рабочих модулей распределенной софт-шины:

Обнаружение устройства: принятоCoAPПротокол действует как протокол обнаружения устройств для обнаружения устройств путем отправки широковещательных сообщений в локальной сети.
Передача данных: обеспечивает унифицированную функцию передачи данных на основе сеанса.
Аутентификация и управление устройством.

По сути, вся распределенная софт-шина — это частный протокол RPC. На основе этого протокола RPC инкапсулирован ряд часто используемых API-интерфейсов, которые защищают громоздкие, разнообразные и очень разные методы связи между устройствами и обеспечивают стабильный, унифицированный и надежный протокол связи ближнего радиуса действия.

Удаленный вызов процедур RPC (Remote procedure Call), RPC — коммуникационная технология, используемая для решения IPC (межпроцессного взаимодействия), была предложена и разработана Нельсоном еще в 1981 году. RPC широко используется при построении системной среды и разработке прикладных программ в распределенных системах.

Метод компиляции
1. Для решения кросс-платформенных и кросс-терминальных проблем система Android должна полагаться на виртуальную машину, код компилируется в машинный код через виртуальную машину, чтобы сгладить разницу между платформой и взаимодействием с оборудованием. В настоящее время Android использует комплексный режим выполнения интерпретации + JIT + AOT, который обеспечивает хороший баланс с точки зрения занимаемого места + скорости установки + скорости работы.
2. Система Hongmeng использует компилятор Ark для решения межплатформенных проблем.Компилятор Ark можетЯзык высокого уровня (Java) превращается непосредственно в машинный код, минуя виртуальную машину.. И этот процесс компиляции завершается не на мобильном телефоне пользователя, а на этапе разработки приложения.
3. До сих пор виртуальная машина Android по-прежнему используется для прямой установки приложения Android в системе Hongmeng на мобильный телефон. Приложение Hongmeng, разработанное студией Hongmeng DevEco, будет компилировать часть машинного кода с помощью компилятора Ark.При работе в системе Hongmeng, которая поддерживает компилятор Ark, производительность может быть улучшена.

Исследование Dangerous Edge — анализ приложения Sina News Express, поддерживаемого средой компилятора Ark

разработка приложения
1. Для системы Android разработка приложений для разных платформ требует разных кодов, и система Hongmeng опирается наIDE для мультитерминальной разработки, чтобы мультиплатформенные приложения могли использовать один и тот же набор кодов.
2. Android поддерживает только использование языка JAVA для разработки, в то время как Hongmeng предоставляет API-интерфейсы, поддерживающие несколько языков разработки, чтобы разработчики могли разрабатывать приложения. Поддерживаемые языки разработки включаютJava, XML (расширяемый язык разметки), C/C++, JS (JavaScript), CSS (каскадные таблицы стилей) и HML (язык разметки HarmonyOS).

Редактор онлайн-опыта:

площадка.гармония OS.com/#/talent/online…

Суммировать

С точки зрения системы в целом

Существует большая разница между системой Hongmeng и Android: Hongmeng — это не только система мобильного телефона, но и операционная система IoT. Спрашивать, является ли Hongmeng Android с оболочкой, все равно что спрашивать, является ли фруктовый салат яблоком.

Из мобильной операционной системы

Текущая версия Hongmeng OS2.0 в значительной степени основана на вторичной разработке AOSP и предоставляет среду разработки приложений с возможностью в качестве ядра, так что она может скрывать различия разных операционных систем, чтобы разработанный код можно было использовать в различных приложениях. операционные системы. И используйте компилятор Ark для предварительной компиляции машинного кода, чтобы приложение работало более плавно и улучшало производительность в системе мобильного телефона, которая поддерживает компилятор Ark.

(Источник изображения:Кто-нибудь изучал Hongmeng OS 2.0 на Huawei P40?По сути это новенькая самостоятельная операционная система или оболочка Android?)

3. Каковы последствия для разработчиков приложений?

Во-первых, для разработчиков iOS это почти не имеет значения.

Для разработчиков Android, если они делают только мобильные приложения без учета совместимости с несколькими терминалами, они могут продолжать использовать разработку для Android, но если они хотят использовать систему Hongmeng для разработки приложений, совместимых с несколькими терминалами, им необходимо перенести существующие проекты, и Стоимость миграции Не особенно высока. Поскольку Hongmeng поддерживает использование JAVA для разработки приложений, он очень удобен для разработчиков Android.

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

3.1 Стоимость миграции для Android-разработки

Весь проект необходимо перенести из студии Android в студию DevEco, а проект необходимо перестроить в студии DevEco. Потому что базовая логика компиляции отличается.
Замена API Переключено с Android на Hongmeng API.
Для замены сторонней библиотеки нужно выбрать стороннюю библиотеку с аналогичными функциями на Android в Hongmeng.
Модификацию метода упаковки необходимо переупаковать и разместить на рынке приложений Hongmeng в соответствии с форматом упаковки Hongmeng Framework.

3.2 Каковы последствия для фронтенд-разработчиков

Система HarmonyOS очень удобна для разработчиков интерфейса.Благодаря методу разработки HML+CSS+JavaScript можно быстро внедрить родное приложение HarmonyOS.

Будучи фронтенд-студентами, мы обычно разрабатываем несколько типов проектов, таких как H5, React Native и небольшие программы.Так как же выпуск системы Hongmeng повлияет на нас?

Флаттер на практике: см. приложение.

4. Как реализовать собственное приложение Hongmeng с архитектурой JS UI

Состав приложения Hongmeng

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

Eg:

Фреймворк для разработки JS-приложений

Среда разработки JS-приложений включает в себя структуру привязки данных JS (привязка данных JS), среду выполнения JS (среда выполнения JS) и структуру JS (инфраструктура JS).

JS Data binding
1. Платформа привязки данных JS предоставляет базовый набор возможностей привязки данных с использованием языка JavaScript.
JS runtime
1. Среда выполнения JS используется для поддержки синтаксического анализа и выполнения кода JS.
JS framework
1. Часть инфраструктуры JS использует язык C++ для обеспечения механизма структуры JS API и компонентов.

JS-архитектура пользовательского интерфейса

Затем мы понимаем общую архитектуру всего пользовательского интерфейса JS:

Application
- Уровень приложения представляет собой приложение FA, разработанное разработчиком с использованием фреймворка пользовательского интерфейса JS.
Framework
- Интерфейсный уровень инфраструктуры в основном завершает анализ внешнего интерфейса и предоставляет режим разработки MVVM (Model-View-ViewModel), механизм маршрутизации страниц и пользовательские компоненты.
- Построчный анализ JavaScript-фреймворка системы Hongmeng.
Engine
- Уровень движка в основном обеспечивает синтаксический анализ анимации, построение дерева DOM (объектная модель документа), расчет макета, построение и рисование команд рендеринга, управление событиями и другие возможности.
Porting Layer
- Уровень адаптации в основном завершает абстракцию уровня платформы и предоставляет абстрактный интерфейс, который можно подключить к системной платформе. Например: стыковка событий, стыковка конвейера рендеринга и стыковка жизненного цикла системы и т. д.

Далее нам нужно понять синтаксис приложения Hongmeng с использованием HTML + CSS + JavaScript.

Синтаксис HML

Документация:Справочник по API JS — Справочник по синтаксису HML

<!-- 数据绑定 -->
<div class="container">
    <text class="title {{className}}">
        hello {{word}}
    </text>
</div>

<!-- 绑定事件 -->
<div>
  <!-- 通过'@'绑定事件 -->
  <div @click="clickfunc('哈哈')"></div>
  <!-- 通过'on'绑定事件  -->
  <div onclick="clickfunc"></div>
  <!-- 使用事件冒泡模式绑定事件回调函数。5+ -->
  <div on:touchstart.bubble="touchstartfunc"></div>
  <!-- 使用事件捕获模式绑定事件回调函数。5+ -->
  <div on:touchstart.capture="touchstartfunc"></div>
  <!-- on:{event}等价于on:{event}.bubble。5+ -->
  <div on:touchstart="touchstartfunc"></div>
  <!-- 绑定事件回调函数，但阻止事件向上传递。5+ -->
  <div grab:touchstart.bubble="touchstartfunc"></div>
  <!-- 绑定事件回调函数，但阻止事件向下传递。5+ -->
  <div grab:touchstart.capture="touchstartfunc"></div>
  <!-- grab:{event}等价于grab:{event}.bubble。5+ -->
  <div grab:touchstart="touchstartfunc"></div>
</div>


<!-- 列表渲染 -->
<list class="tag-list">
    <list-item for="{{(index, item) in taskList}}" class="todo-list-item" focusable="false" tid="id" >
        <todo-list-item item="{{item}}" index="{{index}}" @item-change='handleClick'></todo-list-item>
    </list-item>
</list>

<!-- 条件渲染 -->
<div class="container">
  <text if="{{show}}"> Hello-One </text>
  <text elif="{{display}}"> Hello-Two </text>
  <text else> Hello-World </text>
</div>

<!-- 模板引用 -->
<!-- template.hml -->
<div class="item">
  <text>Name: {{name}}</text>
  <text>Age: {{age}}</text>
</div>
<!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element>
<div>
  <comp name="Tony" age="18" @customer-click='handleClick'></comp>
</div>

Синтаксис CSS

Документация:Справочник по API JS — Справочник по синтаксису CSS

5.1 Размеры:

Логические пиксели px (представленные как в документации):

Экран по умолчанию имеет логическую ширину 720 пикселей, и фактический дисплей будет масштабировать макет страницы в соответствии с фактической шириной экрана, например 100 пикселей.На экране с фактической шириной 1440 физических пикселей фактическая визуализация составляет 200 физических пикселей. (от 720 пикселей до 1440 физических пикселей, все в 2 раза больше).
Когда дополнительная конфигурация autoDesignWidth имеет значение true, логические пиксели в пикселях будут масштабироваться в соответствии с плотностью экрана, например, 100 пикселей на устройстве с плотностью экрана 3, фактическая визуализация составляет 300 физических пикселей. Этот метод рекомендуется, когда приложению необходимо адаптироваться к нескольким устройствам.

Процент (обозначается в документации):

Указывает, что компонент составляет процент от размера родительского компонента.Например, если ширина компонента установлена на 50%, это означает, что его ширина составляет 50% от родительского компонента.

5.2 Селекторы

5.3 Синтаксис

/* 支持样式导入 */
@import '../../common/style.css';
.container {
  justify-content: center;
}

/* 支持伪类（:disabled :focus, :active, :waiting, :checked） */
.button:active {
  background-color: #888888;/*按钮被激活时，背景颜色变为#888888 */
}

/* 支持less sass scss */
@colorBackground: #000000;
.container {
  background-color: @colorBackground; /* 使用当前less文件中定义的变量 */
}

JS-синтаксис

Документация:Справочник по API JS — Справочник по синтаксису JS

6.1 Поддержка синтаксиса ES6

// 模块导入
import router from '@system.router';
import utils from '../../common/utils.js';

export default {
  data: {
    keyMap: {
      OS: 'HarmonyOS',
      Version: '2.0',
    },
  },
  handleClick(e){
      console.log(e.target)
  },
  getAppVersion() {
    this.$set('keyMap.Version', '3.0');
    console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0

    this.$delete('keyMap');
    console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined
  }
}

// 模板组件

export default {
  data: {
    title:'',
  },
  props: {
      name:{
          default: '哈哈怪'
      }
  }
  handleClick(index, e){
      this.$emit('customerClick',{
          index,
          e,
      })
  }
}

6.2 Жизненный цикл

Реализовать TODOList

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

"Отсканируйте QR-код, чтобы получить видео"

5. Резюме

Перекрестный опыт системы Hongmeng на нескольких платформах очень хорош, но ОС на мобильном телефоне по-прежнему основана на AOSP, и Huawei все еще нужно много работать.
Используя редактор DevEco Studio, вы можете быстро создать мультиплатформенное приложение, Лично мне кажется, что документация немного запутана.
Он относительно удобен для разработки интерфейса и Android и использует почти знакомый синтаксис для реализации приложения Hongmeng.
Виртуальная машина не поддерживает горячие обновления и требует постоянного перезапуска приложения.
Разработка с помощью TS в настоящее время не поддерживается.