前言

公元 2021 年 6 月 2 日，【 HarmonyOS2.0 】正式發佈，以 JavaScript 做爲 IoT 應用開發的架構語言，這是繼 SpaceX 上天以後 JavaScript 再一次成爲開發領域的熱點話題。今天我就來和你們分享下 HarmonyOS 以及 HarmonyOS 中的 JavaScript GUI 技術棧。css

摘要

鴻蒙 OS2.0 正式發佈，引來廣大網友的熱議。那麼鴻蒙 OS 是什麼？鴻蒙 OS 是否是安卓套殼？鴻蒙 OS 對咱們前端開發有什麼影響？鴻蒙 APP 應該如何開發？閱讀本文，將帶領你一步一步瞭解鴻蒙，回答這些問題，如今就讓咱們帶着這些問題去深刻了解鴻蒙吧。前端

一、什麼是 HarmonyOS

HarmonyOS 是一款「面向將來」、面向全場景（移動辦公、運動健康、社交通訊、媒體娛樂等）的分佈式操做系統。在傳統的單設備系統能力的基礎上，HarmonyOS 提出了基於同一套系統能力、適配多種終端形態的分佈式理念，可以支持手機、平板、智能穿戴、智慧屏、車機、PC、智能音箱、耳機、AR/VR 眼鏡等多種終端設備。git

HarmonyOS 經過 OpenHarmony 提供 IoT 相關係統的底層實現 + 手機側的 HarmoneyOS 實現 1 +8 + N 的全場景分佈式操做系統。小程序

鴻蒙系統的代碼地址：sass

gitee.com/openharmony前端框架

二、HarmonyOS 和安卓有什麼不一樣？

說到鴻蒙系統你們確定想知道 HarmonyOS 究竟是不是套殼的安卓系統？markdown

咱們從如下幾個方面分析：架構

使用場景
1. 鴻蒙 OS 是一款全場景的分佈式操做系統，而安卓系統主要是隻針對於手機研發的系統。
2. 安卓系統雖然也能夠做爲電視、平板等電子設備的操做系統，可是系統之間相互獨立，沒有辦法使不一樣平臺之間的設備相互通訊。
3. 鴻蒙 OS 從開發起的定位就是一款 IoT 系統，使用分佈式軟總線技術，使局域網內的設備之間能夠方便的通信、數據交互、調用遠程服務，設備之間彷彿融爲一體。
技術架構
1. 安卓架構

2. 鴻蒙架構
複製代碼

JIT:（Just In Time）即時編譯機制，當 App 運行時，會將用戶常用的功能編譯爲機器能直接執行的 010101 機器碼，暫時儲存起來，不用一句一句地去翻譯。框架

AOT : （Ahead of Time） App 在下載後安裝到手機上時同時把能編譯的代碼先編譯成機器聽得懂的 101010；剩下不太好翻譯的代碼，就在用戶使用時再叫醒解釋器來編譯。less

AOSP： "Android Open Source Project"的縮寫。中文意爲"Android 開放源代碼項目"。

經過對比咱們能夠發現，鴻蒙系統中雖然使用的名稱不一樣。可是和安卓的總體架構是比較相似的。以安卓層級橫向對比鴻蒙：

具體講講分佈式軟總線幾個工做模塊：

設備發現：採用了 CoAP 協議做爲設備發現協議，經過在一個局域網內發送廣播來發現設備。
數據傳輸：基於 Session 提供統一的數據傳輸功能。
設備認證與管理。

實際上整個分佈式軟總線就是一個私有的 RPC 協議。以此 RPC 協議爲基礎封裝了一系列經常使用的 API ，屏蔽了設備之間的繁瑣、多種多樣、差別很大的通信方式，提供了穩定、統1、可靠的近場通信協議。

RPC 遠程過程調用（Remote Procedure Call），RPC 是爲了解決 IPC （進程間通訊）所用的通信技術，早在 1981 年由 Nelson 提出並開始發展。 RPC 在分佈式系統中的系統環境建設和應用程序設計中有着普遍的應用。

編譯方式
1. 安卓系統爲了解決跨平臺、跨終端問題須要依賴虛擬機，將代碼經過虛擬機編譯成機器碼從而抹平平臺和硬件交互的差別。當前安卓採用解釋執行 + JIT + AOT 的綜合模式，在空間佔用+安裝速度+運行速度上已經達到了一個很好的平衡。
2. 鴻蒙系統則使用方舟編譯器解決跨平臺問題，方舟編譯器，能夠將高級語言（Java）直接變成機器碼，從而繞過了虛擬機。而且這個編譯過程並非在用戶的手機上完成的，而是在應用開發階段就完成了。
3. 到目前爲止，手機端的鴻蒙系統中直接安裝安卓 APP 依然使用的是安卓虛擬機。而使用鴻蒙 DevEco studio 開發的鴻蒙 APP，會經過方舟編譯器，編譯出部分機器碼，運行在支持方舟編譯器的鴻蒙系統時就能夠達到提高性能的效果。

在危險的邊緣試探——方舟編譯器環境支持的新浪新聞極速版 APP 分析

APP 開發
1. 對於安卓系統來講，開發不一樣的平臺的 APP 須要不一樣代碼，而鴻蒙系統藉助於多終端開發 IDE，作到多平臺的 APP 使用同一套代碼便可。
2. 安卓只支持使用 JAVA 語言來開發，而鴻蒙提供了支持多種開發語言的 API ，供開發者進行應用開發。支持的開發語言包括 Java、XML（Extensible Markup Language）、C/C++ 、 JS（JavaScript）、CSS（Cascading Style Sheets）和 HML（HarmonyOS Markup Language）。

在線體驗編輯器：

playground.harmonyos.com/#/cn/online…

總結

從系統總體來看

鴻蒙系統和安卓有很大的區別，鴻蒙不光是一個手機系統，而是一個 IoT 操做系統。而問鴻蒙是否是套殼的安卓，就比如問水果沙拉是否是蘋果同樣。

從手機操做系統來看

當前的鴻蒙 OS2.0 很大程度上只是基於 AOSP 的二次開發，並提供了一個以 Ability 爲核心的應用開發框架，使其能夠屏蔽不一樣操做系統的差別，使開發的代碼能夠在不一樣操做系統中運行。而且使用方舟編譯器，提早編譯機器碼，使得 APP 在支持方舟編譯器的手機系統中，運行更加流程，提高性能。

（圖片來源：有大神研究過華爲 P40 上的鴻蒙 OS 2.0 嗎?事實它究竟是個全新的自主操做系統仍是個套殼安卓? - 知乎）

三、對於應用開發者有什麼影響

首先對於 IOS 開發者來講，幾乎沒有什麼影響。

對於安卓開發者來講，若是隻是作手機端 APP 不考慮多端兼容的話，還能夠繼續使用安卓開發，可是想要使用鴻蒙系統去開發多端兼容的 APP，則須要將現有項目進行遷移，遷移成本不算特別高。由於鴻蒙支持使用 JAVA 開發應用，對於安卓開發者來講十分友好。

對於前端開發者來講，實際影響也不大，並且前端開發者也能夠只用本身熟悉的 HML+CSS+JavaScript 的開發模式開發原生應用。

3.1 對於安卓開發的遷移成本

總體項目須要從 Android studio 遷移到 DevEco studio 中，須要在 DevEco studio 中從新搭建項目。由於底層編譯邏輯不一樣。
API 的更換從安卓切換到鴻蒙的 API。
三方庫的更換須要選擇鴻蒙中具備安卓上類似功能的三方庫。
打包方式的修改須要按照鴻蒙框架的打包格式從新打包上架鴻蒙的應用市場。

3.2 對於前端開發者有什麼影響

鴻蒙系統對前端開發人員十分友好，經過 HML+CSS+JavaScript 的開發方式，能夠快速的實現一個鴻蒙原生 APP。

做爲前端同窗，咱們一般會有 H五、React Native、小程序等幾種類型項目的開發，那麼鴻蒙系統的發佈對咱們有什麼影響呢？

Flutter 實踐：參見附錄。

四、如何實現一個 JS UI 架構的原生鴻蒙 APP

鴻蒙 APP 組成

在咱們開始實現小功能以前，首先咱們要先了解一個鴻蒙 APP 的組成。

Eg:

JS 應用開發框架

JS 應用開發框架包括 JS 數據綁定框架（JS Data binding）、JS 運行時（JS runtime）和 JS 框架（JS framework）。

JS Data binding
1. JS 數據綁定框架使用 JavaScript 語言提供一套基礎的數據綁定能力。
JS runtime
1. JS 運行時用以支持 JS 代碼的解析和執行。
JS framework
1. JS 框架部分使用 C++ 語言提供 JS API 和組件的框架機制。

JS UI 架構

接着咱們瞭解整個 JS UI 的總體架構：

Application
- 應用層表示開發者使用 JS UI 框架開發的 FA 應用。
Framework
- 前端框架層主要完成前端頁面解析，以及提供 MVVM（Model-View-ViewModel）開發模式、頁面路由機制和自定義組件等能力。
- 逐行分析鴻蒙系統的 JavaScript 框架。
Engine
- 引擎層主要提供動畫解析、DOM（Document Object Model）樹構建、佈局計算、渲染命令構建與繪製、事件管理等能力。
Porting Layer
- 適配層主要完成對平臺層進行抽象，提供抽象接口，能夠對接到系統平臺。好比：事件對接、渲染管線對接和系統生命週期對接等。

接着，咱們須要瞭解鴻蒙 APP 使用 HML + CSS + JavaScript 的語法。

HML 語法

文檔：JS API 參考-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 語法

文檔：JS API 參考-CSS 語法參考

5.1 尺寸單位:

邏輯像素 px（文檔中以< length >表示）：

默認屏幕具備的邏輯寬度爲 720px ，實際顯示時會將頁面佈局縮放至屏幕實際寬度，如 100px 在實際寬度爲 1440 物理像素的屏幕上，實際渲染爲 200 物理像素（從 720px 向 1440 物理像素，全部尺寸放大 2 倍）。
額外配置 autoDesignWidth 爲 true 時，邏輯像素 px 將按照屏幕密度進行縮放，如 100px 在屏幕密度爲 3 的設備上，實際渲染爲 300 物理像素。應用須要適配多種設備時，建議採用此方法。

百分比（文檔中以< percentage >表示）：

表示該組件佔父組件尺寸的百分比，如組件的 width 設置爲 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 語法

文檔：JS API 參考-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,
      })
  }
}
複製代碼