前端開發(fā)華為鴻蒙系統(tǒng)應(yīng)用 OpenHarmony JS

導(dǎo)讀：一款“面向未來”、面向全場景（移動辦公、運(yùn)動健康、社交通信、媒體娛樂等）的分布式操作系統(tǒng) ?，F(xiàn)已開源，名為 OpenHarmony。

2019 年 8 月 9 日，華為在 HDC 開發(fā)者大會上正式發(fā)布鴻蒙系統(tǒng)。

2020 年 9 月 10 日，華為在 HDC 開發(fā)者大會上如約發(fā)布鴻蒙 2.0，并面向應(yīng)用開發(fā)者發(fā)布 Beta 版本。明年鴻蒙將全面支持華為手機(jī)。

值得一提的是，鴻蒙 HarmonyOS 正式開源，今年年底首先對國內(nèi)開發(fā)者發(fā)布針對智能手機(jī)的 HarmonyOS beta 版本。

余承東強(qiáng)調(diào)，全球第三大移動應(yīng)用生態(tài)正在破繭而出?！溉A為要構(gòu)筑開放生態(tài)，將核心技術(shù)、軟硬件能力全面開放給開發(fā)者和生態(tài)伙伴?！?/p>

據(jù)介紹，基于鴻蒙操作系統(tǒng)的 HiLink 智能硬件生態(tài)，目前已經(jīng)有 800 家合作伙伴，其中 HiCar 已合作 150 余款車，2021 年計(jì)劃預(yù)裝超過 500 萬臺。HMS Core 已經(jīng)發(fā)展到 5.0 版本，超過 9.6 萬個(gè)應(yīng)用集成 HMS Core，活躍用戶 4.9 億。

華為承受打壓眾所周知，但在大會上，余承東表示，即使遭受三輪打擊，華為依然實(shí)現(xiàn)增長。今年上半年，其消費(fèi)者業(yè)務(wù)銷售收入 2558 億元，消費(fèi)者業(yè)務(wù)手機(jī)全球發(fā)貨量達(dá)到 1.05 億。

華為承受打壓眾所周知，但在大會上，余承東表示，即使遭受三輪打擊，華為依然實(shí)現(xiàn)增長。今年上半年，其消費(fèi)者業(yè)務(wù)銷售收入 2558 億元，消費(fèi)者業(yè)務(wù)手機(jī)全球發(fā)貨量達(dá)到 1.05 億。

其實(shí)說了這么多，也只是一個(gè)噱頭，未來的路還很長，我經(jīng)常再 blink 里面看到有人投票說，華為鴻蒙操作系統(tǒng)將取代安卓操作系統(tǒng)，我先否定一下。發(fā)展好了最多也只是三足鼎立的局面，不可能取代，至于為什么？大家評論區(qū)吃瓜吧。

源碼托管在國內(nèi)知名開源平臺碼云上：https://gitee.com/openharmony

作為程序員，我也下載了源碼，研究了兩個(gè)晚上，順帶寫了一個(gè) hello world 程序。

官方介紹說是“輕量級 JS 核心開發(fā)框架”。

當(dāng)我看完源碼后發(fā)現(xiàn)它確實(shí)輕。其核心代碼只有 5 個(gè) js 文件。

runtime-core\src\core\index.jsruntime-core\src\observer\observer.jsruntime-core\src\observer\subject.jsruntime-core\src\observer\utils.jsruntime-core\src\profiler\index.js

從名字可以看出來，這些代碼實(shí)現(xiàn)了一個(gè)觀察者模式。它實(shí)現(xiàn)了一個(gè)非常輕量級的 MVVM 模式（后端理解為 MVC 就好）。通過使用和 vue2 相似的屬性劫持技術(shù)實(shí)現(xiàn)了響應(yīng)式系統(tǒng)。

當(dāng)我們開發(fā)的時(shí)候，通過 Toolkit 將開發(fā)者編寫的 HML、CSS 和 JS 文件編譯打包成 JS Bundle，然后再將 JS Bundle 解析運(yùn)行成 C++ native UI 的 View 組件進(jìn)行渲染。

“通過支持三方開發(fā)者使用聲明式的 API 進(jìn)行應(yīng)用開發(fā)，以數(shù)據(jù)驅(qū)動視圖變化，避免了大量的視圖操作，大大降低了應(yīng)用開發(fā)難度，提升開發(fā)者開發(fā)體驗(yàn)”?；旧暇褪且粋€(gè)小程序式的開發(fā)體驗(yàn)。

js runtime 選擇了 JerryScript 是用于物聯(lián)網(wǎng)的超輕量 JavaScript 引擎。它能夠在內(nèi)存少于 64 KB 的設(shè)備上執(zhí)行 ECMAScript 5.1 源代碼。這也是為什么在文檔中說鴻蒙 JS 框架支持 ECMAScript 5.1 的原因。

SDK 中的那些包僅僅是做 loader 用的,大概是為了在 webpack 打包時(shí)解析 htm 組件用的,將 html 的 template 編譯為 js 代碼。

華為宣傳的鴻蒙四大特性：

“分布式架構(gòu)首次用于終端 OS，實(shí)現(xiàn)跨終端無縫協(xié)同體驗(yàn)；確定時(shí)延引擎和高性能 IPC，技術(shù)實(shí)現(xiàn)系統(tǒng)天生流暢；基于微內(nèi)核架構(gòu)重塑終端設(shè)備可信安全；通過統(tǒng)一 IDE 支撐一次開發(fā)，多端部署，實(shí)現(xiàn)跨終端生態(tài)共享”

“分布式架構(gòu)、跨終端無縫協(xié)同體驗(yàn)”是說，華為搞了一個(gè)很妙的底層 OS（“分布式 OS 架構(gòu)”和“分布式軟總線技術(shù)”，公共通信平臺、分布式數(shù)據(jù)管理、分布式能力調(diào)度和虛擬外設(shè)四大能力），把不同終端的特性都?xì)w納好了，能容納在統(tǒng)一的架構(gòu)里。這樣對開發(fā)者和消費(fèi)者來說，不同的終端產(chǎn)品能在一個(gè)平臺里統(tǒng)一開發(fā)使用了。為什么能這么做，是因?yàn)轼櫭?OS 重新設(shè)計(jì)了整個(gè)架構(gòu)，安卓和 iOS 辦不到。這是從系統(tǒng)架構(gòu)層面說事。

“確定時(shí)延引擎和高性能 IPC 技術(shù)實(shí)現(xiàn)系統(tǒng)天生流暢”是說，鴻蒙搞了很妙的進(jìn)程調(diào)度算法，進(jìn)程通信機(jī)制天然就好。進(jìn)程就是不同程序的任務(wù)，一個(gè)手機(jī)上面幾個(gè) APP 同時(shí)跑，需要調(diào)度算法來分配系統(tǒng)時(shí)間輪換著運(yùn)行。“確定時(shí)延”就是調(diào)度算法能保證，進(jìn)程不會因 CPU 被其它進(jìn)程占據(jù)而卡死，總能在規(guī)定時(shí)間內(nèi)輪到自己順利執(zhí)行。因?yàn)榧軜?gòu)是新的，所以應(yīng)用響應(yīng)時(shí)間能降低四分之一，安卓和 iOS 因?yàn)榧軜?gòu)的原因辦不到。IPC 就是進(jìn)程間通信（Inter Process Communication），進(jìn)程之間非常需要通信傳遞消息和數(shù)據(jù)來協(xié)同運(yùn)作。因?yàn)槲?nèi)核架構(gòu)好，鴻蒙的 IPC 效率能提升 5 倍，安卓和 iOS 受系統(tǒng)架構(gòu)限制辦不到。這是對關(guān)心性能的用戶宣傳。

“基于微內(nèi)核架構(gòu)重塑終端設(shè)備可信安全”是說，鴻蒙系統(tǒng)更安全，因?yàn)閮?nèi)核代碼少，出現(xiàn)漏洞的機(jī)會也就極少，不象安卓和 iOS 那樣代碼一堆容易找漏洞。蘋果懸賞找到一個(gè)漏洞 100 萬美元，是讓人來攻擊。鴻蒙對整個(gè)系統(tǒng)，設(shè)計(jì)了一套安全機(jī)制，只要按照這套機(jī)制做，安全性能就能極大提升。這套安全機(jī)制不是基于攻擊測試的，而是基于數(shù)學(xué)模型算法的，能形式化證明理論上就是安全的，比傳統(tǒng)安全驗(yàn)證方式要高一個(gè)檔次。這對關(guān)心系統(tǒng)安全的用戶很有吸引力。

“通過統(tǒng)一 IDE 支撐一次開發(fā)，多端部署，實(shí)現(xiàn)跨終端生態(tài)共享”，是呼應(yīng)第一個(gè)特性。第一個(gè)特性是說，鴻蒙從系統(tǒng)架構(gòu)上，讓跨終端統(tǒng)一開發(fā)成為可能。統(tǒng)一 IDE 是說，華為開發(fā)工具也準(zhǔn)備好了，這個(gè)以方舟編譯器為核心的工具包非常牛，可視化編程，以后還幾種語言混著開發(fā)都能統(tǒng)一編譯，直接出高效機(jī)器碼?？傊馑季褪情_發(fā)方便高效了，比現(xiàn)在安卓和 iOS 的開發(fā)工具效率更高。這是對程序員開發(fā)者喊話。

從這些鴻蒙的“特性”可以看出，鴻蒙真的是面向未來的下一代操作系統(tǒng)，有非常多的優(yōu)勢。鴻蒙不是安卓或者 iOS 在手機(jī)上的替代品，而是跨平臺的新系統(tǒng)。起碼在立意上，鴻蒙真不是對標(biāo)安卓或者 iOS，而是對標(biāo)谷歌的 Fuchsia（也是微內(nèi)核的）。通過鴻蒙的四大特性，也可以了解為什么谷歌要搞 Fuchsia，因?yàn)榘沧考軜?gòu)的技術(shù)潛力有限，要搞下一代操作系統(tǒng)只能重新搞全新生態(tài)系統(tǒng)。

概述

以前一個(gè)前端開發(fā)人員，能開發(fā)網(wǎng)頁、能開發(fā)安卓系統(tǒng)和 IOS 系統(tǒng)，就可以說是一個(gè)合格的前端程序員了。但是鴻蒙的出現(xiàn)，也逼著你需要再掌握一門新系統(tǒng)的開發(fā)。如果你已經(jīng)是一名前端，幸運(yùn)的是不需要作太多的改變，就可以順利的開發(fā)鴻蒙系統(tǒng) 。

簡介

OpenHarmony 中文意思「開放、和諧」，代表了中華民族的包容和謙和，是咱們中國在移動端底層操作系統(tǒng)領(lǐng)域邁出的巨大一步，從此，在全世界我們可以說：“中國，也有自己的移動端底層操作系統(tǒng)了！”

官方描述：https://sale.vmall.com/hwharmony.html?cid=134661

OpenHarmony 技術(shù)架構(gòu)

整體遵從分層設(shè)計(jì)，從下向上依次為：內(nèi)核層、系統(tǒng)服務(wù)層、框架層和應(yīng)用層。系統(tǒng)功能按照“系統(tǒng) > 子系統(tǒng) > 組件”逐級展開，在多設(shè)備部署場景下，支持根據(jù)實(shí)際需求裁剪某些非必要的組件，前端領(lǐng)域的發(fā)力點(diǎn)核心在于應(yīng)用層「拓展應(yīng)用、三方應(yīng)用」構(gòu)建服務(wù)。以后我們個(gè)人開發(fā)者或者企業(yè)開發(fā)者都將不斷在應(yīng)用層「拓展應(yīng)用、三方應(yīng)用」這個(gè)版塊中完善鴻蒙生態(tài)。

應(yīng)用層介紹

應(yīng)用層包括「系統(tǒng)應(yīng)用」和「第三方非系統(tǒng)應(yīng)用」。應(yīng)用由一個(gè)或多個(gè) FA（Feature Ability）或 PA（Particle Ability）組成。其中，F(xiàn)A 有 UI 界面，提供與用戶交互的能力；而 PA 無 UI 界面，提供后臺運(yùn)行任務(wù)的能力以及統(tǒng)一的數(shù)據(jù)訪問抽象?；?FA/PA 開發(fā)的應(yīng)用，能夠?qū)崿F(xiàn)特定的業(yè)務(wù)功能，支持跨設(shè)備調(diào)度與分發(fā)，為用戶提供一致、高效的應(yīng)用體驗(yàn)。顯然，我們前端開發(fā)小伙伴學(xué)習(xí)的核心點(diǎn)就在于對 FA 中 UI 層面的開發(fā)工作。

UI 部分（FA）既支持純 JavaScript 開發(fā)，也支持純 Java 開發(fā)，還可以 Java 跟 JavaScript 混合開發(fā)。FA 支持使用 Java 和 JavaScript 兩種方式開發(fā) UI 界面。如果使用 Java，則跟 Android 一樣，使用 xml 定義布局或者 Java 代碼定義布局，每個(gè)頁面都是一個(gè) PageAbility，使用 Java 編寫業(yè)務(wù)代碼，不同的頁面之間傳遞數(shù)據(jù)依然使用 intent。

而這里如果使用 JavaScript UI 框架的話，那么寫法跟 「Vue + 小程序」 應(yīng)用開發(fā)基本一模一樣，同樣支持 data、props、computed、watch 和 functions（methods），也能創(chuàng)建自定義的組件，這樣 web 前端工程師就很容易轉(zhuǎn)型成為鴻蒙 UI 開發(fā)工程師，不得不說華為在已有概念上做的整合，還是相當(dāng)厲害的。

嘗試搭建一個(gè)開發(fā)環(huán)境及輸出你好，鴻蒙！

官方概述：https://developer.huawei.com/consumer/cn/deveco_studio

DevEco Studio 2.1 Release 開發(fā)工具下載：https://developer.harmonyos.com/cn/develop/deveco-studio#download

支持 windows 及 mac 操作系統(tǒng)，我用的是 windows，下載的是上一個(gè)。

HUAWEI DevEco Studio 1.0 是開發(fā) EMUI 應(yīng)用的集成開發(fā)環(huán)境（IDE），旨在幫助開發(fā)者快捷、方便、高效地使用華為 EMUI 開放能力。如需開發(fā) HarmonyOS 應(yīng)用，請下載 HUAWEI DevEco Studio 2.0。

此項(xiàng)目依賴 node.js 開發(fā)環(huán)境，非前端的小伙伴可以下載一下 node: https://nodejs.org/en/

至于 IDEA:https://developer.harmonyos.com/cn/develop/deveco-studio

應(yīng)用體驗(yàn)

第一步：啟動應(yīng)用后，提示是否創(chuàng)建啟動程序腳本，方便后續(xù)模板選擇。

• 第二步：使用華為云 npm 包管理工具。

• 第三步：創(chuàng)建 or 導(dǎo)入項(xiàng)目。

• 第四步：選擇項(xiàng)目類型及模板。

為了滿足應(yīng)用在多設(shè)備上運(yùn)行的開發(fā)需求，DevEco Studio 2.1 Release 在原有單設(shè)備工程模板的基礎(chǔ)上，新增了 11 個(gè)跨設(shè)備工程模板。開發(fā)者可根據(jù)工程向?qū)В来翁暨x模板和設(shè)備類型，輕松創(chuàng)建跨設(shè)備工程，自動生成示例代碼和相關(guān)資源。

• 第五步：創(chuàng)建工程項(xiàng)目。

• 第六步：查閱并關(guān)閉開發(fā)簡易提示。

• 第七步：項(xiàng)目自動下載對應(yīng)的依賴及文件，這一步直接點(diǎn)擊運(yùn)行則會有錯(cuò)誤提示。

• 第八步：在 DevEco Studio 菜單欄，點(diǎn)擊 Tools > SDK Manager 配置對應(yīng)的 SDK 版本。

• 第九步：點(diǎn)擊右上角 sign in 登陸華為賬號，請輸入已實(shí)名認(rèn)證的華為帳號的用戶名和密碼進(jìn)行登錄，在網(wǎng)頁中登陸成功后，完成授權(quán)。

• 第十步：進(jìn)入到 src/main/js/default/pages/index 頁面，打開 view -> Tool Windows -> Previewer 進(jìn)行預(yù)覽。

• 第十一步：進(jìn)入 Tools -> Devices Manager 看到模擬器管理頁面，這一步必須要實(shí)名認(rèn)證的華為賬號進(jìn)行登錄后，即可選擇對應(yīng)的設(shè)備，然后啟動設(shè)備。

• 第十二步：啟動設(shè)備后，再次點(diǎn)擊 綠色運(yùn)行按鈕，即可在仿真設(shè)備上運(yùn)行該項(xiàng)目。

開發(fā)目錄介紹

JS FA 應(yīng)用的 JS 模塊 (entry/src/main/js/module) 的開發(fā)目錄結(jié)構(gòu)如下：

鴻蒙組件介紹

組件（Component）是構(gòu)建頁面的核心，每個(gè)組件通過對數(shù)據(jù)和方法的簡單封裝，實(shí)現(xiàn)獨(dú)立的可視、可交互功能單元。組件之間相互獨(dú)立，隨取隨用，也可以在需求相同的地方重復(fù)使用。

官方組件介紹：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-common-method-0000001051151142

JS UI 框架基礎(chǔ)能力

• 聲明式編程

• JS UI 框架采用類 HTML 和 CSS 聲明式編程語言作為頁面布局和頁面樣式的開發(fā)語言，頁面業(yè)務(wù)邏輯則支持 ECMAScript 規(guī)范的 JavaScript 語言。JS UI 框架提供的聲明式編程，可以讓開發(fā)者避免編寫 UI 狀態(tài)切換的代碼，視圖配置信息更加直觀。

• 跨設(shè)備

• 開發(fā)框架架構(gòu)上支持 UI 跨設(shè)備顯示能力，運(yùn)行時(shí)自動映射到不同設(shè)備類型，開發(fā)者無感知，降低開發(fā)者多設(shè)備適配成本。

• 高性能

• 開發(fā)框架包含了許多核心的控件，如列表、圖片和各類容器組件等，針對聲明式語法進(jìn)行了渲染流程的優(yōu)化。

JS UI 框架整體架構(gòu)

• 應(yīng)用層 Application

• 應(yīng)用層表示開發(fā)者使用 JS UI 框架開發(fā)的FA應(yīng)用，這里的 FA 應(yīng)用特指 JS FA 應(yīng)用。

• 前端框架層 Framework

• 前端框架層主要完成前端頁面解析，以及提供 MVVM（Model-View-ViewModel）開發(fā)模式、頁面路由機(jī)制和自定義組件等能力。

• 引擎層 Engine

• 引擎層主要提供動畫解析、DOM（Document Object Model）樹構(gòu)建、布局計(jì)算、渲染命令構(gòu)建與繪制、事件管理等能力。

• 平臺適配層 Porting Layer

• 適配層主要完成對平臺層進(jìn)行抽象，提供抽象接口，可以對接到系統(tǒng)平臺。比如：事件對接、渲染管線對接和系統(tǒng)生命周期對接等。

前端框架層 Framework API 概述

1.基本功能

應(yīng)用上下文、日志打印、頁面路由、彈窗、應(yīng)用配置、定時(shí)器

• 2.網(wǎng)絡(luò)訪問

  上傳下載、數(shù)據(jù)請求

• 3.文件數(shù)據(jù)

  數(shù)據(jù)存儲、文件存儲

• 4.分布式能力

  分布式拉起、分布式遷移、分布式 API 在 FA 生命周期中的位置

• 5.系統(tǒng)能力

  通知消息、振動、傳感器、地理位置、網(wǎng)絡(luò)狀態(tài)、設(shè)備信息、屏幕亮度、電量信息、應(yīng)用管理、媒體查詢、國際化

使用 storage 實(shí)現(xiàn)數(shù)據(jù)存儲（是不是感覺代碼和 vue 及小程序結(jié)構(gòu)很像？）

import storage from '@system.storage';export default {    data: {    // 待辦事件列表        todoList    },    onInit() {        storage.get({            key: 'todo',            success: data => {                console.log('獲取Storage成功' + data);                //this.todoList = JSON.parse(data)            }        });    },    setStorage() {        storage.set({            key: 'todoList',            value: JSON.stringify(this.todoList)        });    },    remove(index) {        this.todoList.splice(index, 1);        this.setStorage();    },    addTodo() {        this.todoList.push({            info: '鍵盤輸入',            status: false        })        this.setStorage();    },    checkStatus(index) {        this.todoList[index].status = !this.todoList[index].status;        this.setStorage();    }}

更多開發(fā)者資料請參考：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/codelabs-0000001141821381

好啦，本期內(nèi)容就分享到這里，前端的小伙伴可以順手下載一個(gè) IDEA 體驗(yàn)一下，真的很簡單，支持華為鴻蒙全生態(tài)底層操作系統(tǒng)的誕生?。?！