前端開發(fā)華為鴻蒙系統應用 OpenHarmony JS
導讀：一款“面向未來”、面向全場景（移動辦公、運動健康、社交通信、媒體娛樂等）的分布式操作系統 ?，F已開源，名為 OpenHarmony。
2019 年 8 月 9 日，華為在 HDC 開發(fā)者大會上正式發(fā)布鴻蒙系統。
2020 年 9 月 10 日，華為在 HDC 開發(fā)者大會上如約發(fā)布鴻蒙 2.0，并面向應用開發(fā)者發(fā)布 Beta 版本。明年鴻蒙將全面支持華為手機。
值得一提的是，鴻蒙 HarmonyOS 正式開源，今年年底首先對國內開發(fā)者發(fā)布針對智能手機的 HarmonyOS beta 版本。
余承東強調，全球第三大移動應用生態(tài)正在破繭而出?！溉A為要構筑開放生態(tài)，將核心技術、軟硬件能力全面開放給開發(fā)者和生態(tài)伙伴?！?/p>
據介紹，基于鴻蒙操作系統的 HiLink 智能硬件生態(tài)，目前已經有 800 家合作伙伴，其中 HiCar 已合作 150 余款車，2021 年計劃預裝超過 500 萬臺。HMS Core 已經發(fā)展到 5.0 版本，超過 9.6 萬個應用集成 HMS Core，活躍用戶 4.9 億。
華為承受打壓眾所周知，但在大會上，余承東表示，即使遭受三輪打擊，華為依然實現增長。今年上半年，其消費者業(yè)務銷售收入 2558 億元，消費者業(yè)務手機全球發(fā)貨量達到 1.05 億。
華為承受打壓眾所周知，但在大會上，余承東表示，即使遭受三輪打擊，華為依然實現增長。今年上半年，其消費者業(yè)務銷售收入 2558 億元，消費者業(yè)務手機全球發(fā)貨量達到 1.05 億。
其實說了這么多，也只是一個噱頭，未來的路還很長，我經常再 blink 里面看到有人投票說，華為鴻蒙操作系統將取代安卓操作系統，我先否定一下。發(fā)展好了最多也只是三足鼎立的局面，不可能取代，至于為什么？大家評論區(qū)吃瓜吧。
源碼托管在國內知名開源平臺碼云上：https://gitee.com/openharmony
作為程序員，我也下載了源碼，研究了兩個晚上，順帶寫了一個 hello world 程序。
官方介紹說是“輕量級 JS 核心開發(fā)框架”。
當我看完源碼后發(fā)現它確實輕。其核心代碼只有 5 個 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
從名字可以看出來，這些代碼實現了一個觀察者模式。它實現了一個非常輕量級的 MVVM 模式（后端理解為 MVC 就好）。通過使用和 vue2 相似的屬性劫持技術實現了響應式系統。
當我們開發(fā)的時候，通過 Toolkit 將開發(fā)者編寫的 HML、CSS 和 JS 文件編譯打包成 JS Bundle，然后再將 JS Bundle 解析運行成 C++ native UI 的 View 組件進行渲染。
“通過支持三方開發(fā)者使用聲明式的 API 進行應用開發(fā)，以數據驅動視圖變化，避免了大量的視圖操作，大大降低了應用開發(fā)難度，提升開發(fā)者開發(fā)體驗”?；旧暇褪且粋€小程序式的開發(fā)體驗。
js runtime 選擇了 JerryScript 是用于物聯網的超輕量 JavaScript 引擎。它能夠在內存少于 64 KB 的設備上執(zhí)行 ECMAScript 5.1 源代碼。這也是為什么在文檔中說鴻蒙 JS 框架支持 ECMAScript 5.1 的原因。
SDK 中的那些包僅僅是做 loader 用的,大概是為了在 webpack 打包時解析 htm 組件用的,將 html 的 template 編譯為 js 代碼。
華為宣傳的鴻蒙四大特性：
“分布式架構首次用于終端 OS，實現跨終端無縫協同體驗；確定時延引擎和高性能 IPC，技術實現系統天生流暢；基于微內核架構重塑終端設備可信安全；通過統一 IDE 支撐一次開發(fā)，多端部署，實現跨終端生態(tài)共享”
“分布式架構、跨終端無縫協同體驗”是說，華為搞了一個很妙的底層 OS（“分布式 OS 架構”和“分布式軟總線技術”，公共通信平臺、分布式數據管理、分布式能力調度和虛擬外設四大能力），把不同終端的特性都歸納好了，能容納在統一的架構里。這樣對開發(fā)者和消費者來說，不同的終端產品能在一個平臺里統一開發(fā)使用了。為什么能這么做，是因為鴻蒙 OS 重新設計了整個架構，安卓和 iOS 辦不到。這是從系統架構層面說事。
“確定時延引擎和高性能 IPC 技術實現系統天生流暢”是說，鴻蒙搞了很妙的進程調度算法，進程通信機制天然就好。進程就是不同程序的任務，一個手機上面幾個 APP 同時跑，需要調度算法來分配系統時間輪換著運行?！按_定時延”就是調度算法能保證，進程不會因 CPU 被其它進程占據而卡死，總能在規(guī)定時間內輪到自己順利執(zhí)行。因為架構是新的，所以應用響應時間能降低四分之一，安卓和 iOS 因為架構的原因辦不到。IPC 就是進程間通信（Inter Process Communication），進程之間非常需要通信傳遞消息和數據來協同運作。因為微內核架構好，鴻蒙的 IPC 效率能提升 5 倍，安卓和 iOS 受系統架構限制辦不到。這是對關心性能的用戶宣傳。
“基于微內核架構重塑終端設備可信安全”是說，鴻蒙系統更安全，因為內核代碼少，出現漏洞的機會也就極少，不象安卓和 iOS 那樣代碼一堆容易找漏洞。蘋果懸賞找到一個漏洞 100 萬美元，是讓人來攻擊。鴻蒙對整個系統，設計了一套安全機制，只要按照這套機制做，安全性能就能極大提升。這套安全機制不是基于攻擊測試的，而是基于數學模型算法的，能形式化證明理論上就是安全的，比傳統安全驗證方式要高一個檔次。這對關心系統安全的用戶很有吸引力。
“通過統一 IDE 支撐一次開發(fā)，多端部署，實現跨終端生態(tài)共享”，是呼應第一個特性。第一個特性是說，鴻蒙從系統架構上，讓跨終端統一開發(fā)成為可能。統一 IDE 是說，華為開發(fā)工具也準備好了，這個以方舟編譯器為核心的工具包非常牛，可視化編程，以后還幾種語言混著開發(fā)都能統一編譯，直接出高效機器碼?？傊馑季褪情_發(fā)方便高效了，比現在安卓和 iOS 的開發(fā)工具效率更高。這是對程序員開發(fā)者喊話。
從這些鴻蒙的“特性”可以看出，鴻蒙真的是面向未來的下一代操作系統，有非常多的優(yōu)勢。鴻蒙不是安卓或者 iOS 在手機上的替代品，而是跨平臺的新系統。起碼在立意上，鴻蒙真不是對標安卓或者 iOS，而是對標谷歌的 Fuchsia（也是微內核的）。通過鴻蒙的四大特性，也可以了解為什么谷歌要搞 Fuchsia，因為安卓架構的技術潛力有限，要搞下一代操作系統只能重新搞全新生態(tài)系統。
概述
以前一個前端開發(fā)人員，能開發(fā)網頁、能開發(fā)安卓系統和 IOS 系統，就可以說是一個合格的前端程序員了。但是鴻蒙的出現，也逼著你需要再掌握一門新系統的開發(fā)。如果你已經是一名前端，幸運的是不需要作太多的改變，就可以順利的開發(fā)鴻蒙系統 。
簡介
OpenHarmony 中文意思「開放、和諧」，代表了中華民族的包容和謙和，是咱們中國在移動端底層操作系統領域邁出的巨大一步，從此，在全世界我們可以說：“中國，也有自己的移動端底層操作系統了！”
官方描述：https://sale.vmall.com/hwharmony.html?cid=134661
OpenHarmony 技術架構
整體遵從分層設計，從下向上依次為：內核層、系統服務層、框架層和應用層。系統功能按照“系統 > 子系統 > 組件”逐級展開，在多設備部署場景下，支持根據實際需求裁剪某些非必要的組件，前端領域的發(fā)力點核心在于應用層「拓展應用、三方應用」構建服務。以后我們個人開發(fā)者或者企業(yè)開發(fā)者都將不斷在應用層「拓展應用、三方應用」這個版塊中完善鴻蒙生態(tài)。
應用層介紹
應用層包括「系統應用」和「第三方非系統應用」。應用由一個或多個 FA（Feature Ability）或 PA（Particle Ability）組成。其中，FA 有 UI 界面，提供與用戶交互的能力；而 PA 無 UI 界面，提供后臺運行任務的能力以及統一的數據訪問抽象?；?FA/PA 開發(fā)的應用，能夠實現特定的業(yè)務功能，支持跨設備調度與分發(fā)，為用戶提供一致、高效的應用體驗。顯然，我們前端開發(fā)小伙伴學習的核心點就在于對 FA 中 UI 層面的開發(fā)工作。
UI 部分（FA）既支持純 JavaScript 開發(fā)，也支持純 Java 開發(fā)，還可以 Java 跟 JavaScript 混合開發(fā)。FA 支持使用 Java 和 JavaScript 兩種方式開發(fā) UI 界面。如果使用 Java，則跟 Android 一樣，使用 xml 定義布局或者 Java 代碼定義布局，每個頁面都是一個 PageAbility，使用 Java 編寫業(yè)務代碼，不同的頁面之間傳遞數據依然使用 intent。
而這里如果使用 JavaScript UI 框架的話，那么寫法跟 「Vue + 小程序」 應用開發(fā)基本一模一樣，同樣支持 data、props、computed、watch 和 functions（methods），也能創(chuàng)建自定義的組件，這樣 web 前端工程師就很容易轉型成為鴻蒙 UI 開發(fā)工程師，不得不說華為在已有概念上做的整合，還是相當厲害的。
嘗試搭建一個開發(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 操作系統，我用的是 windows，下載的是上一個。
HUAWEI DevEco Studio 1.0 是開發(fā) EMUI 應用的集成開發(fā)環(huán)境（IDE），旨在幫助開發(fā)者快捷、方便、高效地使用華為 EMUI 開放能力。如需開發(fā) HarmonyOS 應用，請下載 HUAWEI DevEco Studio 2.0。
此項目依賴 node.js 開發(fā)環(huán)境，非前端的小伙伴可以下載一下 node: https://nodejs.org/en/
至于 IDEA:https://developer.harmonyos.com/cn/develop/deveco-studio
應用體驗
第一步：啟動應用后，提示是否創(chuàng)建啟動程序腳本，方便后續(xù)模板選擇。
第二步：使用華為云 npm 包管理工具。
第三步：創(chuàng)建 or 導入項目。
第四步：選擇項目類型及模板。
為了滿足應用在多設備上運行的開發(fā)需求，DevEco Studio 2.1 Release 在原有單設備工程模板的基礎上，新增了 11 個跨設備工程模板。開發(fā)者可根據工程向導，依次挑選模板和設備類型，輕松創(chuàng)建跨設備工程，自動生成示例代碼和相關資源。
第五步：創(chuàng)建工程項目。
第六步：查閱并關閉開發(fā)簡易提示。
第七步：項目自動下載對應的依賴及文件，這一步直接點擊運行則會有錯誤提示。
第八步：在 DevEco Studio 菜單欄，點擊 Tools > SDK Manager 配置對應的 SDK 版本。
第九步：點擊右上角 sign in 登陸華為賬號，請輸入已實名認證的華為帳號的用戶名和密碼進行登錄，在網頁中登陸成功后，完成授權。
第十步：進入到 src/main/js/default/pages/index 頁面，打開 view -> Tool Windows -> Previewer 進行預覽。
第十一步：進入 Tools -> Devices Manager 看到模擬器管理頁面，這一步必須要實名認證的華為賬號進行登錄后，即可選擇對應的設備，然后啟動設備。
第十二步：啟動設備后，再次點擊 綠色運行按鈕，即可在仿真設備上運行該項目。
開發(fā)目錄介紹
JS FA 應用的 JS 模塊 (entry/src/main/js/module) 的開發(fā)目錄結構如下：
鴻蒙組件介紹
組件（Component）是構建頁面的核心，每個組件通過對數據和方法的簡單封裝，實現獨立的可視、可交互功能單元。組件之間相互獨立，隨取隨用，也可以在需求相同的地方重復使用。
官方組件介紹：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-common-method-0000001051151142
JS UI 框架基礎能力
聲明式編程
JS UI 框架采用類 HTML 和 CSS 聲明式編程語言作為頁面布局和頁面樣式的開發(fā)語言，頁面業(yè)務邏輯則支持 ECMAScript 規(guī)范的 JavaScript 語言。JS UI 框架提供的聲明式編程，可以讓開發(fā)者避免編寫 UI 狀態(tài)切換的代碼，視圖配置信息更加直觀。
跨設備
開發(fā)框架架構上支持 UI 跨設備顯示能力，運行時自動映射到不同設備類型，開發(fā)者無感知，降低開發(fā)者多設備適配成本。
高性能
開發(fā)框架包含了許多核心的控件，如列表、圖片和各類容器組件等，針對聲明式語法進行了渲染流程的優(yōu)化。
JS UI 框架整體架構
應用層 Application
應用層表示開發(fā)者使用 JS UI 框架開發(fā)的FA應用，這里的 FA 應用特指 JS FA 應用。
前端框架層 Framework
前端框架層主要完成前端頁面解析，以及提供 MVVM（Model-View-ViewModel）開發(fā)模式、頁面路由機制和自定義組件等能力。
引擎層 Engine
引擎層主要提供動畫解析、DOM（Document Object Model）樹構建、布局計算、渲染命令構建與繪制、事件管理等能力。
平臺適配層 Porting Layer
適配層主要完成對平臺層進行抽象，提供抽象接口，可以對接到系統平臺。比如：事件對接、渲染管線對接和系統生命周期對接等。
前端框架層 Framework API 概述
1.基本功能
應用上下文、日志打印、頁面路由、彈窗、應用配置、定時器
2.網絡訪問
上傳下載、數據請求
3.文件數據
數據存儲、文件存儲
4.分布式能力
分布式拉起、分布式遷移、分布式 API 在 FA 生命周期中的位置
5.系統能力
通知消息、振動、傳感器、地理位置、網絡狀態(tài)、設備信息、屏幕亮度、電量信息、應用管理、媒體查詢、國際化
使用 storage 實現數據存儲（是不是感覺代碼和 vue 及小程序結構很像？）
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
好啦，本期內容就分享到這里，前端的小伙伴可以順手下載一個 IDEA 體驗一下，真的很簡單，支持華為鴻蒙全生態(tài)底層操作系統的誕生?。?！