前言

公元 2021 年 6 月 2 日，【 HarmonyOS2.0 】正式發(fā)布，以 JavaScript 作為 IoT 應(yīng)用開發(fā)的架構(gòu)語(yǔ)言，這是繼 SpaceX 上天之后 JavaScript 再一次成為開發(fā)領(lǐng)域的熱點(diǎn)話題。今天我就來和大家分享下 HarmonyOS 以及 HarmonyOS 中的 JavaScript GUI 技術(shù)棧。

摘要

鴻蒙 OS2.0 正式發(fā)布，引來廣大網(wǎng)友的熱議。那么鴻蒙 OS 是什么？鴻蒙 OS 是不是安卓套殼？鴻蒙 OS 對(duì)我們前端開發(fā)有什么影響？鴻蒙 APP 應(yīng)該如何開發(fā)？閱讀本文，將帶領(lǐng)你一步一步了解鴻蒙，回答這些問題，現(xiàn)在就讓我們帶著這些問題去深入了解鴻蒙吧。

1、什么是 HarmonyOS

HarmonyOS 是一款“面向未來”、面向全場(chǎng)景（移動(dòng)辦公、運(yùn)動(dòng)健康、社交通信、媒體娛樂等）的分布式操作系統(tǒng)。在傳統(tǒng)的單設(shè)備系統(tǒng)能力的基礎(chǔ)上，HarmonyOS 提出了基于同一套系統(tǒng)能力、適配多種終端形態(tài)的分布式理念，能夠支持手機(jī)、平板、智能穿戴、智慧屏、車機(jī)、PC、智能音箱、耳機(jī)、AR/VR 眼鏡等多種終端設(shè)備。

HarmonyOS 通過 OpenHarmony 提供 IoT 相關(guān)系統(tǒng)的底層實(shí)現(xiàn) + 手機(jī)側(cè)的 HarmoneyOS 實(shí)現(xiàn) 1 +8 + N 的全場(chǎng)景分布式操作系統(tǒng)。

鴻蒙系統(tǒng)的代碼地址：https://gitee.com/openharmony

2、HarmonyOS 和安卓有什么不同？

說到鴻蒙系統(tǒng)大家肯定想知道 HarmonyOS 到底是不是套殼的安卓系統(tǒng)？

我們從以下幾個(gè)方面分析：

1. 使用場(chǎng)景

1. 鴻蒙 OS 是一款全場(chǎng)景的分布式操作系統(tǒng)，而安卓系統(tǒng)主要是只針對(duì)于手機(jī)研發(fā)的系統(tǒng)。
2. 安卓系統(tǒng)雖然也可以作為電視、平板等電子設(shè)備的操作系統(tǒng)，但是系統(tǒng)之間相互獨(dú)立，沒有辦法使不同平臺(tái)之間的設(shè)備相互通信。
3. 鴻蒙 OS 從開發(fā)起的定位就是一款 IoT 系統(tǒng)，使用分布式軟總線技術(shù)，使局域網(wǎng)內(nèi)的設(shè)備之間可以方便的通訊、數(shù)據(jù)交互、調(diào)用遠(yuǎn)程服務(wù)，設(shè)備之間仿佛融為一體。

2. 技術(shù)架構(gòu)

1. 安卓架構(gòu)

   

2. 鴻蒙架構(gòu)

JIT:（Just In Time）即時(shí)編譯機(jī)制，當(dāng) App 運(yùn)行時(shí)，會(huì)將用戶經(jīng)常使用的功能編譯為機(jī)器能直接執(zhí)行的 010101 機(jī)器碼，暫時(shí)儲(chǔ)存起來，不用一句一句地去翻譯。

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

AOSP："Android Open Source Project"的縮寫。中文意為"Android 開放源代碼項(xiàng)目"。

通過對(duì)比我們可以發(fā)現(xiàn)，鴻蒙系統(tǒng)中雖然使用的名稱不同。但是和安卓的整體架構(gòu)是比較類似的。以安卓層級(jí)橫向?qū)Ρ萨櫭桑?/p>

具體講講分布式軟總線幾個(gè)工作模塊：

• 設(shè)備發(fā)現(xiàn)：采用了 CoAP^[1] 協(xié)議作為設(shè)備發(fā)現(xiàn)協(xié)議，通過在一個(gè)局域網(wǎng)內(nèi)發(fā)送廣播來發(fā)現(xiàn)設(shè)備。
• 數(shù)據(jù)傳輸：基于 Session 提供統(tǒng)一的數(shù)據(jù)傳輸功能。
• 設(shè)備認(rèn)證與管理。

實(shí)際上整個(gè)分布式軟總線就是一個(gè)私有的 RPC 協(xié)議。以此 RPC 協(xié)議為基礎(chǔ)封裝了一系列常用的 API ，屏蔽了設(shè)備之間的繁瑣、多種多樣、差異很大的通訊方式，提供了穩(wěn)定、統(tǒng)一、可靠的近場(chǎng)通訊協(xié)議。

RPC 遠(yuǎn)程過程調(diào)用（Remote Procedure Call），RPC 是為了解決 IPC （進(jìn)程間通信）所用的通訊技術(shù)，早在 1981 年由 Nelson 提出并開始發(fā)展。RPC 在分布式系統(tǒng)中的系統(tǒng)環(huán)境建設(shè)和應(yīng)用程序設(shè)計(jì)中有著廣泛的應(yīng)用。

3. 編譯方式

1. 安卓系統(tǒng)為了解決跨平臺(tái)、跨終端問題需要依賴虛擬機(jī)，將代碼通過虛擬機(jī)編譯成機(jī)器碼從而抹平平臺(tái)和硬件交互的差異。當(dāng)前安卓采用解釋執(zhí)行 + JIT + AOT 的綜合模式，在空間占用+安裝速度+運(yùn)行速度上已經(jīng)達(dá)到了一個(gè)很好的平衡。
2. 鴻蒙系統(tǒng)則使用方舟編譯器解決跨平臺(tái)問題，方舟編譯器，可以將高級(jí)語(yǔ)言（Java）直接變成機(jī)器碼，從而繞過了虛擬機(jī)。并且這個(gè)編譯過程并不是在用戶的手機(jī)上完成的，而是在應(yīng)用開發(fā)階段就完成了。
3. 到目前為止，手機(jī)端的鴻蒙系統(tǒng)中直接安裝安卓 APP 依然使用的是安卓虛擬機(jī)。而使用鴻蒙 DevEco studio 開發(fā)的鴻蒙 APP，會(huì)通過方舟編譯器，編譯出部分機(jī)器碼，運(yùn)行在支持方舟編譯器的鴻蒙系統(tǒng)時(shí)就可以達(dá)到提升性能的效果。

在危險(xiǎn)的邊緣試探——方舟編譯器環(huán)境支持的新浪新聞極速版 APP 分析^[2]

4. APP 開發(fā)

1. 對(duì)于安卓系統(tǒng)來說，開發(fā)不同的平臺(tái)的 APP 需要不同代碼，而鴻蒙系統(tǒng)借助于多終端開發(fā) IDE，做到多平臺(tái)的 APP 使用同一套代碼即可。
2. 安卓只支持使用 JAVA 語(yǔ)言來開發(fā)，而鴻蒙提供了支持多種開發(fā)語(yǔ)言的 API ，供開發(fā)者進(jìn)行應(yīng)用開發(fā)。支持的開發(fā)語(yǔ)言包括 Java、XML（Extensible Markup Language）、C/C++ 、 JS（JavaScript）、CSS（Cascading Style Sheets）和 HML（HarmonyOS Markup Language）。

在線體驗(yàn)編輯器：

https://playground.harmonyos.com/#/cn/onlineDemo

總結(jié)

從系統(tǒng)整體來看

鴻蒙系統(tǒng)和安卓有很大的區(qū)別，鴻蒙不光是一個(gè)手機(jī)系統(tǒng)，而是一個(gè) IoT 操作系統(tǒng)。而問鴻蒙是不是套殼的安卓，就好比問水果沙拉是不是蘋果一樣。

從手機(jī)操作系統(tǒng)來看

當(dāng)前的鴻蒙 OS2.0 很大程度上只是基于 AOSP 的二次開發(fā)，并提供了一個(gè)以 Ability 為核心的應(yīng)用開發(fā)框架，使其可以屏蔽不同操作系統(tǒng)的差異，使開發(fā)的代碼可以在不同操作系統(tǒng)中運(yùn)行。并且使用方舟編譯器，提前編譯機(jī)器碼，使得 APP 在支持方舟編譯器的手機(jī)系統(tǒng)中，運(yùn)行更加流程，提升性能。

（圖片來源：有大神研究過華為 P40 上的鴻蒙 OS 2.0 嗎\?事實(shí)它到底是個(gè)全新的自主操作系統(tǒng)還是個(gè)套殼安卓\? - 知乎^[3]）

3、對(duì)于應(yīng)用開發(fā)者有什么影響

首先對(duì)于 IOS 開發(fā)者來說，幾乎沒有什么影響。

對(duì)于安卓開發(fā)者來說，如果只是做手機(jī)端 APP 不考慮多端兼容的話，還可以繼續(xù)使用安卓開發(fā)，但是想要使用鴻蒙系統(tǒng)去開發(fā)多端兼容的 APP，則需要將現(xiàn)有項(xiàng)目進(jìn)行遷移，遷移成本不算特別高。因?yàn)轼櫭芍С质褂?JAVA 開發(fā)應(yīng)用，對(duì)于安卓開發(fā)者來說十分友好。

對(duì)于前端開發(fā)者來說，實(shí)際影響也不大，而且前端開發(fā)者也可以只用自己熟悉的 HML+CSS+JavaScript 的開發(fā)模式開發(fā)原生應(yīng)用。

3.1 對(duì)于安卓開發(fā)的遷移成本

1. 整體項(xiàng)目需要從 Android studio 遷移到 DevEco studio 中，需要在 DevEco studio 中重新搭建項(xiàng)目。因?yàn)榈讓泳幾g邏輯不同。
2. API 的更換從安卓切換到鴻蒙的 API。
3. 三方庫(kù)的更換 需要選擇鴻蒙中具有安卓上相似功能的三方庫(kù)。
4. 打包方式的修改 需要按照鴻蒙框架的打包格式重新打包上架鴻蒙的應(yīng)用市場(chǎng)。

3.2 對(duì)于前端開發(fā)者有什么影響

鴻蒙系統(tǒng)對(duì)前端開發(fā)人員十分友好，通過 HML+CSS+JavaScript 的開發(fā)方式，可以快速的實(shí)現(xiàn)一個(gè)鴻蒙原生 APP。

作為前端同學(xué)，我們通常會(huì)有 H5、React Native、小程序等幾種類型項(xiàng)目的開發(fā)，那么鴻蒙系統(tǒng)的發(fā)布對(duì)我們有什么影響呢？

Flutter 實(shí)踐：參見附錄。

4、如何實(shí)現(xiàn)一個(gè) JS UI 架構(gòu)的原生鴻蒙 APP

1. 鴻蒙 APP 組成

在我們開始實(shí)現(xiàn)小功能之前，首先我們要先了解一個(gè)鴻蒙 APP 的組成。

Eg:

2. JS 應(yīng)用開發(fā)框架

JS 應(yīng)用開發(fā)框架包括 JS 數(shù)據(jù)綁定框架（JS Data binding）、JS 運(yùn)行時(shí)（JS runtime）和 JS 框架（JS framework）。

1. JS Data binding
1. JS 數(shù)據(jù)綁定框架使用 JavaScript 語(yǔ)言提供一套基礎(chǔ)的數(shù)據(jù)綁定能力。
2. JS runtime
1. JS 運(yùn)行時(shí)用以支持 JS 代碼的解析和執(zhí)行。
3. JS framework
1. JS 框架部分使用 C++ 語(yǔ)言提供 JS API 和組件的框架機(jī)制。

3. JS UI 架構(gòu)

接著我們了解整個(gè) JS UI 的整體架構(gòu)：

• Application
• 應(yīng)用層表示開發(fā)者使用 JS UI 框架開發(fā)的 FA 應(yīng)用。
• Framework
• 前端框架層主要完成前端頁(yè)面解析，以及提供 MVVM（Model-View-ViewModel）開發(fā)模式、頁(yè)面路由機(jī)制和自定義組件等能力。
• 逐行分析鴻蒙系統(tǒng)的 JavaScript 框架^[4]。
• Engine
• 引擎層主要提供動(dòng)畫解析、DOM（Document Object Model）樹構(gòu)建、布局計(jì)算、渲染命令構(gòu)建與繪制、事件管理等能力。
• Porting Layer
• 適配層主要完成對(duì)平臺(tái)層進(jìn)行抽象，提供抽象接口，可以對(duì)接到系統(tǒng)平臺(tái)。比如：事件對(duì)接、渲染管線對(duì)接和系統(tǒng)生命周期對(duì)接等。

接著，我們需要了解鴻蒙 APP 使用 HML + CSS + JavaScript 的語(yǔ)法 。

4. HML 語(yǔ)法

文檔：JS API 參考-HML 語(yǔ)法參考^[5]

<!-- 數(shù)據(jù)綁定 -->
<div class="container">
    <text class="title {{className}}">
        hello {{word}}
    </text>
</div>

<!-- 綁定事件 -->
<div>
  <!-- 通過'@'綁定事件 -->
  <div @click="clickfunc('哈哈')"></div>
  <!-- 通過'on'綁定事件  -->
  <div onclick="clickfunc"></div>
  <!-- 使用事件冒泡模式綁定事件回調(diào)函數(shù)。5+ -->
  <div on:touchstart.bubble="touchstartfunc"></div>
  <!-- 使用事件捕獲模式綁定事件回調(diào)函數(shù)。5+ -->
  <div on:touchstart.capture="touchstartfunc"></div>
  <!-- on:{event}等價(jià)于on:{event}.bubble。5+ -->
  <div on:touchstart="touchstartfunc"></div>
  <!-- 綁定事件回調(diào)函數(shù)，但阻止事件向上傳遞。5+ -->
  <div grab:touchstart.bubble="touchstartfunc"></div>
  <!-- 綁定事件回調(diào)函數(shù)，但阻止事件向下傳遞。5+ -->
  <div grab:touchstart.capture="touchstartfunc"></div>
  <!-- grab:{event}等價(jià)于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>

5. CSS 語(yǔ)法

文檔：JS API 參考-CSS 語(yǔ)法參考^[6]

5.1 尺寸單位:

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

1. 默認(rèn)屏幕具有的邏輯寬度為 720px ，實(shí)際顯示時(shí)會(huì)將頁(yè)面布局縮放至屏幕實(shí)際寬度，如 100px 在實(shí)際寬度為 1440 物理像素的屏幕上，實(shí)際渲染為 200 物理像素（從 720px 向 1440 物理像素，所有尺寸放大 2 倍）。
2. 額外配置 autoDesignWidth 為 true 時(shí)，邏輯像素 px 將按照屏幕密度進(jìn)行縮放，如 100px 在屏幕密度為 3 的設(shè)備上，實(shí)際渲染為 300 物理像素。應(yīng)用需要適配多種設(shè)備時(shí)，建議采用此方法。

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

表示該組件占父組件尺寸的百分比，如組件的 width 設(shè)置為 50% ，代表其寬度為父組件的 50%。

5.2 選擇器

5.3 語(yǔ)法

/* 支持樣式導(dǎo)入 */
@import '../../common/style.css';
.container {
  justify-content: center;
}

/* 支持偽類（:disabled :focus, :active, :waiting, :checked） */
.button:active {
  background-color: #888888;/*按鈕被激活時(shí)，背景顏色變?yōu)?888888 */
}

/* 支持less sass scss */
@colorBackground: #000000;
.container {
  background-color: @colorBackground; /* 使用當(dāng)前l(fā)ess文件中定義的變量 */
}

6. JS 語(yǔ)法

文檔：JS API 參考-JS 語(yǔ)法參考^[7]

6.1 支持 ES6 語(yǔ)法

// 模塊導(dǎo)入
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 生命周期

7. 實(shí)現(xiàn) TODOList

了解了基本語(yǔ)法之后我們一起來實(shí)現(xiàn)一個(gè) TodoList，來熟悉下鴻蒙系統(tǒng)的開發(fā)流程。

「掃描二維碼查看視頻」

5、總結(jié)

1. 鴻蒙系統(tǒng)在多平臺(tái)的跨端體驗(yàn)是十分優(yōu)秀的，但是在手機(jī)端的 OS 依然是基于 AOSP，華為仍需努力。
2. 使用 DevEco Studio 這款編輯器可以很快速的搭建多平臺(tái) APP，個(gè)人感覺文檔有點(diǎn)亂。
3. 對(duì)于前端、安卓開發(fā)比較友好、幾乎是使用自己平常熟悉的語(yǔ)法來實(shí)現(xiàn)鴻蒙 APP。
4. 虛擬機(jī)不支持熱更新，需要不斷重啟應(yīng)用。
5. 暫時(shí)不支持使用 TS 進(jìn)行開發(fā)。

6、參考文檔

入門-系統(tǒng)定義^[8]

漫話:如何給女朋友解釋鴻蒙 OS 是怎樣實(shí)現(xiàn)跨平臺(tái)的\?^[9]

鴻蒙、安卓系統(tǒng)技術(shù)架構(gòu)對(duì)比^[10]

在危險(xiǎn)的邊緣試探——方舟編譯器環(huán)境支持的新浪新聞極速版 APP 分析^[11]

有大神研究過華為 P40 上的鴻蒙 OS 2.0 嗎\?事實(shí)它到底是個(gè)全新的自主操作系統(tǒng)還是個(gè)套殼安卓\? - 知乎^[12]

鴻蒙 Harmony 談了這么久，和 Android 到底啥區(qū)別\?^[13]

7、附錄

OpenHarmony: OpenHarmony 是由開放原子開源基金會(huì)（OpenAtom Foundation）孵化及運(yùn)營(yíng)的開源項(xiàng)目，目標(biāo)是面向全場(chǎng)景、全連接、全智能時(shí)代，搭建一個(gè)智能終端設(shè)備操作系統(tǒng)^[14]

在線體驗(yàn)-HarmonyOS 應(yīng)用開發(fā)^[15]

讓 Flutter 在鴻蒙系統(tǒng)上跑起來^[16]

逐行分析鴻蒙系統(tǒng)的 JavaScript 框架^[17]

JS API 參考-HML 語(yǔ)法參考^[18]

JS API 參考-CSS 語(yǔ)法參考^[19]

JS API 參考-JS 語(yǔ)法參考^[20]

Codelabs\_華為尖端技術(shù)\_編碼體驗(yàn)-華為開發(fā)者聯(lián)盟^[21]

參考資料