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

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"導讀：一款“面向未來”、面向全場景（移動辦公、運動健康、社交通信、媒體娛樂等）的分佈式操作系統 。現已開源，名爲OpenHarmony。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2019年8月9日，華爲在HDC開發者大會上正式發佈鴻蒙系統。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2020年9月10日，華爲在HDC開發者大會上如約發佈鴻蒙 2.0，並面向應用開發者發佈Beta版本。明年鴻蒙將全面支持華爲手機。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"值得一提的是，鴻蒙HarmonyOS正式開源，今年年底首先對國內開發者發佈針對智能手機的HarmonyOS beta版本。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"餘承東強調，全球第三大移動應用生態正在破繭而出。「華爲要構築開放生態，將核心技術、軟硬件能力全面開放給開發者和生態夥伴。」","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":" 據介紹，基於鴻蒙操作系統的 HiLink 智能硬件生態，目前已經有 800 家合作伙伴，其中 HiCar 已合作 150 餘款車，2021 年計劃預裝超過 500 萬臺。HMS Core 已經發展到 5.0 版本，超過 9.6 萬個應用集成 HMS Core，活躍用戶 4.9 億。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"華爲承受打壓衆所周知，但在大會上，餘承東表示，即使遭受三輪打擊，華爲依然實現增長。今年上半年，其消費者業務銷售收入 2558 億元，消費者業務手機全球發貨量達到 1.05 億。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"華爲承受打壓衆所周知，但在大會上，餘承東表示，即使遭受三輪打擊，華爲依然實現增長。今年上半年，其消費者業務銷售收入 2558 億元，消費者業務手機全球發貨量達到 1.05 億。","attrs":{}}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/a4/a44a09f6e87399e6d958d77b7bd5d6be.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"其實說了這麼多，也只是一個噱頭，未來的路還很長，我經常再blink裏面看到有人投票說，華爲鴻蒙操作系統將取代安卓操作系統，我先否定一下。發展好了最多也只是三足鼎立的局面，不可能取代，至於爲什麼？大家評論區喫瓜吧。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"源碼託管在國內知名開源平臺碼雲上：https://gitee.com/openharmony","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作爲程序員，我也下載了源碼，研究了兩個晚上，順帶寫了一個 hello world 程序。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方介紹說是“輕量級 JS 核心開發框架”。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當我看完源碼後發現它確實輕。其核心代碼只有 5 個 js 文件。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"runtime-core\\src\\core\\index.js\nruntime-core\\src\\observer\\observer.js\nruntime-core\\src\\observer\\subject.js\nruntime-core\\src\\observer\\utils.js\nruntime-core\\src\\profiler\\index.js\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從名字可以看出來，這些代碼實現了一個觀察者模式。它實現了一個非常輕量級的 MVVM 模式（後端理解爲MVC就好）。通過使用和 vue2 相似的屬性劫持技術實現了響應式系統。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"當我們開發的時候，通過 Toolkit 將開發者編寫的 HML、CSS 和 JS 文件編譯打包成 JS Bundle，然後再將 JS Bundle 解析運行成C++ native UI 的 View 組件進行渲染。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“通過支持三方開發者使用聲明式的 API 進行應用開發，以數據驅動視圖變化，避免了大量的視圖操作，大大降低了應用開發難度，提升開發者開發體驗”。基本上就是一個小程序式的開發體驗。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"js runtime選擇了 JerryScript是用於物聯網的超輕量 JavaScript 引擎。它能夠在內存少於 64 KB 的設備上執行 ECMAScript 5.1 源代碼。這也是爲什麼在文檔中說鴻蒙 JS 框架支持 ECMAScript 5.1 的原因。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"SDK 中的那些包僅僅是做 loader 用的,大概是爲了在 webpack 打包時解析 htm 組件用的,將 html 的 template 編譯爲 js 代碼。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/36/36835c8d21fc85650eadf5458bf3411c.jpeg","alt":"https://img-blog.csdnimg.cn/img_convert/99e8814a314ac66c45e970ebc9aa8e32.png","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"華爲宣傳的鴻蒙四大特性：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“分佈式架構首次用於終端OS，實現跨終端無縫協同體驗；確定時延引擎和高性能IPC，技術實現系統天生流暢；基於微內核架構重塑終端設備可信安全；通過統一IDE支撐一次開發，多端部署，實現跨終端生態共享”","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“分佈式架構、跨終端無縫協同體驗”是說，華爲搞了一個很妙的底層OS（“分佈式OS架構”和“分佈式軟總線技術”，公共通信平臺、分佈式數據管理、分佈式能力調度和虛擬外設四大能力），把不同終端的特性都歸納好了，能容納在統一的架構裏。這樣對開發者和消費者來說，不同的終端產品能在一個平臺裏統一開發使用了。爲什麼能這麼做，是因爲鴻蒙OS重新設計了整個架構，安卓和iOS辦不到。這是從系統架構層面說事。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“確定時延引擎和高性能IPC技術實現系統天生流暢”是說，鴻蒙搞了很妙的進程調度算法，進程通信機制天然就好。進程就是不同程序的任務，一個手機上面幾個APP同時跑，需要調度算法來分配系統時間輪換着運行。“確定時延”就是調度算法能保證，進程不會因CPU被其它進程佔據而卡死，總能在規定時間內輪到自己順利執行。因爲架構是新的，所以應用響應時間能降低四分之一，安卓和iOS因爲架構的原因辦不到。IPC就是進程間通信（Inter Process Communication），進程之間非常需要通信傳遞消息和數據來協同運作。因爲微內核架構好，鴻蒙的IPC效率能提升5倍，安卓和iOS受系統架構限制辦不到。這是對關心性能的用戶宣傳。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“基於微內核架構重塑終端設備可信安全”是說，鴻蒙系統更安全，因爲內核代碼少，出現漏洞的機會也就極少，不象安卓和iOS那樣代碼一堆容易找漏洞。蘋果懸賞找到一個漏洞100萬美元，是讓人來攻擊。鴻蒙對整個系統，設計了一套安全機制，只要按照這套機制做，安全性能就能極大提升。這套安全機制不是基於攻擊測試的，而是基於數學模型算法的，能形式化證明理論上就是安全的，比傳統安全驗證方式要高一個檔次。這對關心繫統安全的用戶很有吸引力。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"“通過統一IDE支撐一次開發，多端部署，實現跨終端生態共享”，是呼應第一個特性。第一個特性是說，鴻蒙從系統架構上，讓跨終端統一開發成爲可能。統一IDE是說，華爲開發工具也準備好了，這個以方舟編譯器爲核心的工具包非常牛，可視化編程，以後還幾種語言混着開發都能統一編譯，直接出高效機器碼。總之意思就是開發方便高效了，比現在安卓和iOS的開發工具效率更高。這是對程序員開發者喊話。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"從這些鴻蒙的“特性”可以看出，鴻蒙真的是面向未來的下一代操作系統，有非常多的優勢。鴻蒙不是安卓或者iOS在手機上的替代品，而是跨平臺的新系統。起碼在立意上，鴻蒙真不是對標安卓或者iOS，而是對標谷歌的Fuchsia（也是微內核的）。通過鴻蒙的四大特性，也可以瞭解爲什麼谷歌要搞Fuchsia，因爲安卓架構的技術潛力有限，要搞下一代操作系統只能重新搞全新生態系統。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/c1/c1ae6cb83bcd2118612996433860803a.jpeg","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"概述","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"以前一個前端開發人員，能開發網頁、能開發安卓系統和IOS系統，就可以說是一個合格的前端程序員了。但是鴻蒙的出現，也逼着你需要再掌握一門新系統的開發。如果你已經是一名前端，幸運的是不需要作太多的改變，就可以順利的開發鴻蒙系統 。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"簡介","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"OpenHarmony 中文意思「開放、和諧」，代表了中華民族的包容和謙和，是咱們中國在移動端底層操作系統領域邁出的巨大一步，從此，在全世界我們可以說：“中國，也有自己的移動端底層操作系統了！”","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方描述：https://sale.vmall.com/hwharmony.html?cid=134661","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"OpenHarmony技術架構","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"整體遵從分層設計，從下向上依次爲：內核層、系統服務層、框架層和應用層。系統功能按照“系統 > 子系統 > 組件”逐級展開，在多設備部署場景下，支持根據實際需求裁剪某些非必要的組件，前端領域的發力點核心在於應用層「拓展應用、三方應用」構建服務。以後我們個人開發者或者企業開發者都將不斷在應用層「拓展應用、三方應用」這個版塊中完善鴻蒙生態。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/19/197bdfa6abe3a05f9e56a8f0f636f82a.png","alt":"img","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"應用層介紹","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"應用層包括「系統應用」和「第三方非系統應用」。應用由一個或多個 FA（Feature Ability）或 PA（Particle Ability）組成。其中，FA 有 UI 界面，提供與用戶交互的能力；而 PA 無 UI 界面，提供後臺運行任務的能力以及統一的數據訪問抽象。基於 FA/PA 開發的應用，能夠實現特定的業務功能，支持跨設備調度與分發，爲用戶提供一致、高效的應用體驗。顯然，我們前端開發小夥伴學習的核心點就在於對 FA 中 UI 層面的開發工作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"UI 部分（FA）既支持純 JavaScript 開發，也支持純 Java 開發，還可以 Java 跟 JavaScript 混合開發。FA 支持使用 Java 和 JavaScript 兩種方式開發 UI 界面。如果使用 Java，則跟 Android 一樣，使用 xml 定義佈局或者 Java 代碼定義佈局，每個頁面都是一個 PageAbility，使用 Java 編寫業務代碼，不同的頁面之間傳遞數據依然使用 intent。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","marks":[{"type":"strong","attrs":{}}],"text":"而這裏如果使用 JavaScript UI 框架的話，那麼寫法跟 「Vue + 小程序」 應用開發基本一模一樣，同樣支持 data、props、computed、watch 和 functions（methods），也能創建自定義的組件，這樣 web 前端工程師就很容易轉型成爲鴻蒙 UI 開發工程師，不得不說華爲在已有概念上做的整合，還是相當厲害的。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"嘗試搭建一個開發環境及輸出你好，鴻蒙！","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方概述：https://developer.huawei.com/consumer/cn/deveco_studio","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"DevEco Studio 2.1 Release開發工具下載：https://developer.harmonyos.com/cn/develop/deveco-studio#download","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"支持windows及mac操作系統，我用的是windows，下載的是上一個。","attrs":{}}]},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/d7/d7121319a68f8f95ed579b528527e6f4.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"HUAWEI DevEco Studio 1.0是開發EMUI應用的集成開發環境（IDE），旨在幫助開發者快捷、方便、高效地使用華爲EMUI開放能力。如需開發HarmonyOS應用，請下載HUAWEI DevEco Studio 2.0。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/97/97f2239834bcbf67fd757e15bc8a5252.png","alt":"zh-cn_image_0000001163571565","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此項目依賴node.js開發環境，非前端的小夥伴可以下載一下node: ","attrs":{}},{"type":"link","attrs":{"href":"https://nodejs.org/en/","title":null,"type":null},"content":[{"type":"text","text":"https://nodejs.org/en/","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"至於IDEA:","attrs":{}},{"type":"link","attrs":{"href":"https://developer.harmonyos.com/cn/develop/deveco-studio","title":null,"type":null},"content":[{"type":"text","text":"https://developer.harmonyos.com/cn/develop/deveco-studio","attrs":{}}]}]},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"應用體驗","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第一步：啓動應用後，提示是否創建啓動程序腳本，方便後續模板選擇。","attrs":{}}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第二步：使用華爲雲 npm 包管理工具。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第三步：創建 or 導入項目。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第四步：選擇項目類型及模板。","attrs":{}}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"爲了滿足應用在多設備上運行的開發需求，DevEco Studio 2.1 Release 在原有單設備工程模板的基礎上，新增了 11 個跨設備工程模板。開發者可根據工程嚮導，依次挑選模板和設備類型，輕鬆創建跨設備工程，自動生成示例代碼和相關資源。","attrs":{}}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第五步：創建工程項目。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第六步：查閱並關閉開發簡易提示。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第七步：項目自動下載對應的依賴及文件，這一步直接點擊運行則會有錯誤提示。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第八步：在 DevEco Studio 菜單欄，點擊Tools > SDK Manager 配置對應的 SDK 版本。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第九步：點擊右上角 sign in 登陸華爲賬號，請輸入已實名認證的華爲帳號的用戶名和密碼進行登錄，在網頁中登陸成功後，完成授權。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第十步：進入到 src/main/js/default/pages/index 頁面，打開 view -> Tool Windows -> Previewer 進行預覽。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第十一步：進入 Tools -> Devices Manager 看到模擬器管理頁面，這一步必須要實名認證的華爲賬號進行登錄後，即可選擇對應的設備，然後啓動設備。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"第十二步：啓動設備後，再次點擊 綠色運行按鈕，即可在仿真設備上運行該項目。","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"開發目錄介紹","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JS FA 應用的 JS 模塊 (entry/src/main/js/module) 的開發目錄結構如下：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b0/b0d55496bb61cdd941801ade932c98fb.jpeg","alt":"image-20210611130545830","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"鴻蒙組件介紹","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"組件（Component）是構建頁面的核心，每個組件通過對數據和方法的簡單封裝，實現獨立的可視、可交互功能單元。組件之間相互獨立，隨取隨用，也可以在需求相同的地方重複使用。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"官方組件介紹：https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-common-method-0000001051151142","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"JS UI 框架基礎能力","attrs":{}}]},{"type":"blockquote","content":[{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"聲明式編程","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"JS UI 框架採用類 HTML 和 CSS 聲明式編程語言作爲頁面佈局和頁面樣式的開發語言，頁面業務邏輯則支持ECMAScript 規範的 JavaScript 語言。JS UI 框架提供的聲明式編程，可以讓開發者避免編寫 UI 狀態切換的代碼，視圖配置信息更加直觀。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"跨設備","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開發框架架構上支持UI跨設備顯示能力，運行時自動映射到不同設備類型，開發者無感知，降低開發者多設備適配成本。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"高性能","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"開發框架包含了許多核心的控件，如列表、圖片和各類容器組件等，針對聲明式語法進行了渲染流程的優化。","attrs":{}}]}]}],"attrs":{}}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"JS UI 框架整體架構","attrs":{}}]},{"type":"blockquote","content":[{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"應用層 Application","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"應用層表示開發者使用JS UI框架開發的","attrs":{}},{"type":"link","attrs":{"href":"https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-ability-overview-0000000000029852","title":null,"type":null},"content":[{"type":"text","text":"FA","attrs":{}}]},{"type":"text","text":"應用，這裏的FA應用特指JS FA應用。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端框架層 Framework","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"前端框架層主要完成前端頁面解析，以及提供MVVM（Model-View-ViewModel）開發模式、頁面路由機制和自定義組件等能力。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"引擎層 Engine","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"引擎層主要提供動畫解析、DOM（Document Object Model）樹構建、佈局計算、渲染命令構建與繪製、事件管理等能力。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"平臺適配層 Porting Layer","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"適配層主要完成對平臺層進行抽象，提供抽象接口，可以對接到系統平臺。比如：事件對接、渲染管線對接和系統生命週期對接等。","attrs":{}}]}]}],"attrs":{}}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/cb/cb98bc312c93be338c50fb3090ce6c28.jpeg","alt":"img","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":5},"content":[{"type":"text","text":"前端框架層Framework API概述","attrs":{}}]},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"1.基本功能","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"應用上下文、日誌打印、頁面路由、彈窗、應用配置、定時器","attrs":{}}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2.網絡訪問","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上傳下載、數據請求","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"3.文件數據","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"數據存儲、文件存儲","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"4.分佈式能力","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"分佈式拉起、分佈式遷移、分佈式API在FA生命週期中的位置","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"5.系統能力","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通知消息、振動、傳感器、地理位置、網絡狀態、設備信息、屏幕亮度、電量信息、應用管理、媒體查詢、國際化","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用storage實現數據存儲（是不是感覺代碼和vue及小程序結構很像？）","attrs":{}}]},{"type":"codeblock","attrs":{"lang":"text"},"content":[{"type":"text","text":"import storage from '@system.storage';\nexport default {\n data: {\n // 待辦事件列表\n todoList\n },\n onInit() {\n storage.get({\n key: 'todo',\n success: data => {\n console.log('獲取Storage成功' + data);\n //this.todoList = JSON.parse(data)\n }\n });\n },\n setStorage() {\n storage.set({\n key: 'todoList',\n value: JSON.stringify(this.todoList)\n });\n },\n remove(index) {\n this.todoList.splice(index, 1);\n this.setStorage();\n },\n addTodo() {\n this.todoList.push({\n info: '鍵盤輸入',\n status: false\n })\n this.setStorage();\n },\n checkStatus(index) {\n this.todoList[index].status = !this.todoList[index].status;\n this.setStorage();\n }\n}","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更多開發者資料請參考：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/codelabs-0000001141821381","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好啦，本期內容就分享到這裏，前端的小夥伴可以順手下載一個IDEA體驗一下，真的很簡單，支持華爲鴻蒙全生態底層操作系統的誕生！！！","attrs":{}}]}]}