前端開發華為鴻蒙系統應用 OpenHarmony JS

導讀：一款“面向未來”、面向全場景（移動辦公、運動健康、社交通信、媒體娛樂等）的分布式操作系統 。現已開源，名為 OpenHarmony。

2019 年 8 月 9 日，華為在 HDC 開發者大會上正式發布鴻蒙系統。

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

值得一提的是，鴻蒙 HarmonyOS 正式開源，今年年底首先對國內開發者發布針對智能手機的 HarmonyOS beta 版本。

余承東強調，全球第三大移動應用生態正在破繭而出。「華為要構筑開放生態，將核心技術、軟硬件能力全面開放給開發者和生態伙伴。」

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

華為承受打壓眾所周知，但在大會上，余承東表示，即使遭受三輪打擊，華為依然實現增長。今年上半年，其消費者業務銷售收入 2558 億元，消費者業務手機全球發貨量達到 1.05 億。

華為承受打壓眾所周知，但在大會上，余承東表示，即使遭受三輪打擊，華為依然實現增長。今年上半年，其消費者業務銷售收入 2558 億元，消費者業務手機全球發貨量達到 1.05 億。

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

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

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

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

當我看完源碼后發現它確實輕。其核心代碼只有 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 相似的屬性劫持技術實現了響應式系統。

當我們開發的時候，通過 Toolkit 將開發者編寫的 HML、CSS 和 JS 文件編譯打包成 JS Bundle，然后再將 JS Bundle 解析運行成 C++ native UI 的 View 組件進行渲染。

“通過支持三方開發者使用聲明式的 API 進行應用開發，以數據驅動視圖變化，避免了大量的視圖操作，大大降低了應用開發難度，提升開發者開發體驗”。基本上就是一個小程序式的開發體驗。

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

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

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

“分布式架構首次用于終端 OS，實現跨終端無縫協同體驗；確定時延引擎和高性能 IPC，技術實現系統天生流暢；基于微內核架構重塑終端設備可信安全；通過統一 IDE 支撐一次開發，多端部署，實現跨終端生態共享”

“分布式架構、跨終端無縫協同體驗”是說，華為搞了一個很妙的底層 OS（“分布式 OS 架構”和“分布式軟總線技術”，公共通信平臺、分布式數據管理、分布式能力調度和虛擬外設四大能力），把不同終端的特性都歸納好了，能容納在統一的架構里。這樣對開發者和消費者來說，不同的終端產品能在一個平臺里統一開發使用了。為什么能這么做，是因為鴻蒙 OS 重新設計了整個架構，安卓和 iOS 辦不到。這是從系統架構層面說事。

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

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

“通過統一 IDE 支撐一次開發，多端部署，實現跨終端生態共享”，是呼應第一個特性。第一個特性是說，鴻蒙從系統架構上，讓跨終端統一開發成為可能。統一 IDE 是說，華為開發工具也準備好了，這個以方舟編譯器為核心的工具包非常牛，可視化編程，以后還幾種語言混著開發都能統一編譯，直接出高效機器碼。總之意思就是開發方便高效了，比現在安卓和 iOS 的開發工具效率更高。這是對程序員開發者喊話。

從這些鴻蒙的“特性”可以看出，鴻蒙真的是面向未來的下一代操作系統，有非常多的優勢。鴻蒙不是安卓或者 iOS 在手機上的替代品，而是跨平臺的新系統。起碼在立意上，鴻蒙真不是對標安卓或者 iOS，而是對標谷歌的 Fuchsia（也是微內核的）。通過鴻蒙的四大特性，也可以了解為什么谷歌要搞 Fuchsia，因為安卓架構的技術潛力有限，要搞下一代操作系統只能重新搞全新生態系統。

以前一個前端開發人員，能開發網頁、能開發安卓系統和 IOS 系統，就可以說是一個合格的前端程序員了。但是鴻蒙的出現，也逼著你需要再掌握一門新系統的開發。如果你已經是一名前端，幸運的是不需要作太多的改變，就可以順利的開發鴻蒙系統 。

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

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

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

應用層包括「系統應用」和「第三方非系統應用」。應用由一個或多個 FA（Feature Ability）或 PA（Particle Ability）組成。其中，FA 有 UI 界面，提供與用戶交互的能力；而 PA 無 UI 界面，提供后臺運行任務的能力以及統一的數據訪問抽象。基于 FA/PA 開發的應用，能夠實現特定的業務功能，支持跨設備調度與分發，為用戶提供一致、高效的應用體驗。顯然，我們前端開發小伙伴學習的核心點就在于對 FA 中 UI 層面的開發工作。

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

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

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

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

支持 windows 及 mac 操作系統，我用的是 windows，下載的是上一個。

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

此項目依賴 node.js 開發環境，非前端的小伙伴可以下載一下 node:?https://nodejs.org/en/

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

第一步：啟動應用后，提示是否創建啟動程序腳本，方便后續模板選擇。

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

第三步：創建 or 導入項目。

第四步：選擇項目類型及模板。

為了滿足應用在多設備上運行的開發需求，DevEco Studio 2.1 Release 在原有單設備工程模板的基礎上，新增了 11 個跨設備工程模板。開發者可根據工程向導，依次挑選模板和設備類型，輕松創建跨設備工程，自動生成示例代碼和相關資源。

第五步：創建工程項目。

第六步：查閱并關閉開發簡易提示。

第七步：項目自動下載對應的依賴及文件，這一步直接點擊運行則會有錯誤提示。

第八步：在 DevEco Studio 菜單欄，點擊 Tools > SDK Manager 配置對應的 SDK 版本。

第九步：點擊右上角 sign in 登陸華為賬號，請輸入已實名認證的華為帳號的用戶名和密碼進行登錄，在網頁中登陸成功后，完成授權。

第十步：進入到 src/main/js/default/pages/index 頁面，打開 view -> Tool Windows -> Previewer 進行預覽。

第十一步：進入 Tools -> Devices Manager 看到模擬器管理頁面，這一步必須要實名認證的華為賬號進行登錄后，即可選擇對應的設備，然后啟動設備。

第十二步：啟動設備后，再次點擊 綠色運行按鈕，即可在仿真設備上運行該項目。

JS FA 應用的 JS 模塊 (entry/src/main/js/module) 的開發目錄結構如下：

組件（Component）是構建頁面的核心，每個組件通過對數據和方法的簡單封裝，實現獨立的可視、可交互功能單元。組件之間相互獨立，隨取隨用，也可以在需求相同的地方重復使用。

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

JS UI 框架基礎能力

聲明式編程

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

跨設備

開發框架架構上支持 UI 跨設備顯示能力，運行時自動映射到不同設備類型，開發者無感知，降低開發者多設備適配成本。

高性能

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

應用層 Application

應用層表示開發者使用 JS UI 框架開發的FA應用，這里的 FA 應用特指 JS FA 應用。

前端框架層 Framework

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

引擎層 Engine

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

平臺適配層 Porting Layer

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

1.基本功能

應用上下文、日志打印、頁面路由、彈窗、應用配置、定時器

2.網絡訪問

上傳下載、數據請求

3.文件數據

數據存儲、文件存儲

4.分布式能力

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

5.系統能力

通知消息、振動、傳感器、地理位置、網絡狀態、設備信息、屏幕亮度、電量信息、應用管理、媒體查詢、國際化

使用 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(); }}

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

好啦，本期內容就分享到這里，前端的小伙伴可以順手下載一個 IDEA 體驗一下，真的很簡單，支持華為鴻蒙全生態底層操作系統的誕生！！！

web前端 開發者

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。