2024年可能會是鴻蒙最火爆的一年，鴻蒙人才的緊缺，讓不少開發(fā)者都心動，最近收到不少伙伴的私信想了解鴻蒙的學(xué)習(xí)線路，特意整理了下。喜歡的可以加個收藏。

千鋒鴻蒙學(xué)習(xí)路線分為四部分：

01第一站：開發(fā)熱身

開發(fā)熱身總共有5步，以下是步驟詳解：

第1步：Web 頁面布局

HTML：HTML元素和屬性;HTML表單和圖形處理;HTML媒體和最佳實(shí)踐

CSS：CSS基本語法與選擇器;CSS背景、文本、邊框、輪廓與顏色;CSS列表、表單與表格樣式;CSS樣式層疊與繼承;CSS盒模型、定位、浮動和顯示屬性;CSS漸變、陰影與濾鏡;CSS變換、過渡與動畫; Web字體與多列布局

頁面制作工具：VSCode及插件;PhotoShop的使用和圖片整合;markman、pxcook工具使用;藍(lán)湖、sketch與axure工具使用

布局技術(shù)：BFC、IFC、GFC、FFC等概念;Flex彈性布局;網(wǎng)格布局;媒體查詢;viewport、rem、vw、dpr與ppi

布局規(guī)范與方案：PC端網(wǎng)站布局規(guī)范;PC端管理系統(tǒng)布局規(guī)范;流式布局(100%布局);等比縮放布局(rem布局);響應(yīng)式布局;移動端reset, 1px border, 高清圖片;移動端設(shè)備適配最佳實(shí)踐.

第2步：JavaScript 語言

原生JavaScript交互功能開發(fā)：基本語法;流程控制語句;函數(shù)與數(shù)組;String與Date;BOM與DOM;拖拽效果;客戶端存儲(cookie存儲、WebStorage);正則表達(dá)式;Ajax;面向?qū)ο蠡A(chǔ);運(yùn)動與游戲開發(fā);數(shù)據(jù)結(jié)構(gòu)與算法。

面向?qū)ο筮M(jìn)階與ES應(yīng)用：Promise;async/await語法;try/catch語法;原型鏈;構(gòu)造函數(shù);執(zhí)行上下文棧與執(zhí)行上下文;作用域鏈;閉包;this;ES5-ES12;設(shè)計(jì)模式。

JSON 數(shù)據(jù)交換格式：JSON 語法規(guī)則;JSON5 的使用

第 3 步：TypeScript 語言

基礎(chǔ)入門：TypeScript 介紹;TypeScript 入門;常用類型;類型縮小;函數(shù);對象類型;類型操縱類;模塊。

高級進(jìn)階：變量聲明;類型推斷;枚舉;公共類型;Symbols;類型兼容性;迭代器和生成器;裝飾器;JSX;混入;三斜線指令;模塊;模塊解析;命名空間;命名空間與模塊;聲明合并。

第 4 步：Node.js

前端工程化與模塊化：Linux 常用命令;Less/Sass;NPM;Git 的使用;AMD/CMD/UMD;ES6模塊化

高級進(jìn)階：Node.js 服務(wù)端開發(fā);Node 基礎(chǔ)入門;Express 框架基礎(chǔ);中間件開發(fā);MVC開發(fā)模式;基于Express的后端路由;MongoDB數(shù)據(jù)庫的基本使用;MySQL數(shù)據(jù)庫的基本使用;基于Token的登錄狀態(tài)保持;Node.js的EventLoop;文件上傳(單文件/多文件);模板引擎;靜態(tài)資源加載;服務(wù)端渲染頁面

第 5 步：構(gòu)建工具

Webpack:

基礎(chǔ)入門：為什么需要Webpack;小試 Webpack;自動引入資源;搭建開發(fā)環(huán)境;資源模塊;管理資源;使用 babel-loader;代碼分離;緩存;懶加載;拆分開發(fā)環(huán)境和生產(chǎn)環(huán)境。

高級進(jìn)階：提高開發(fā)效率，完善團(tuán)隊(duì)開發(fā)規(guī)范;模塊與依賴;擴(kuò)展功能;多頁面應(yīng)用;Tree shaking;漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序 PWA;shimming 預(yù)置依賴;創(chuàng)建 library;模塊聯(lián)邦;提升構(gòu)建性能。

vite：為什么選用Vite;搭建Vite開發(fā)環(huán)境;創(chuàng)建第一個Vite項(xiàng)目;NPM依賴解析和預(yù)構(gòu)建(依賴預(yù)構(gòu)建簡介、esbuild、緩存);模塊熱重載(常用框架集成、HMR-API);Vite+TypeScript;Vite中的Vue和JSX(使用Vite創(chuàng)建Vue2項(xiàng)目、Vite支持Vue3使用JSX);在Vite中使用CSS;Vite靜態(tài)資源引用;Vite中使用WebWorker;Vite中引入WebAssembly;Vite中導(dǎo)入JSON及Glob導(dǎo)入;Vite中集成ESLint;構(gòu)建生產(chǎn)版本;環(huán)境變量和模式;騰訊云Webify項(xiàng)目部署;服務(wù)端渲染SSR(Vue3案例、React案例);后端集成。

02第二站：開發(fā)入門

第二站總共分7步，涉及鴻蒙應(yīng)用開發(fā)及arkts語言等，以下是詳細(xì)步驟：

第 1 步：走進(jìn)鴻蒙應(yīng)用開發(fā)

分為10個部分，以下是具體：

1、攜手打造全場景鴻蒙生態(tài)

2、HarmonyOS 應(yīng)用開發(fā)技術(shù)新進(jìn)展

3、ArkTS 語言和演進(jìn)

4、ArkUI 開發(fā)框架，打造精致UI交互體驗(yàn)

5、ArkUI 跨平臺方案

6、高性能應(yīng)用探索之旅

7、HarmonyOS 端云開放能力

8、文件存儲與數(shù)據(jù)管理

9、HarmonyOS 暢聯(lián)，自由分享

10、HarmonyOS 網(wǎng)絡(luò)應(yīng)用開發(fā)

第 2 步：通關(guān)HarmonyOS應(yīng)用開發(fā)者基礎(chǔ)認(rèn)證

第二步涉及12個部分，以下是具體：

1、使用 DevEco Studio 高效開發(fā)

2、構(gòu)建第一個 ArkTS 應(yīng)用

3、ArkTS 開發(fā)語言

4、應(yīng)用程序框架

5、使用常用組件構(gòu)建頁面

6、動畫基礎(chǔ)應(yīng)用

7、HTTP數(shù)據(jù)請求

8、應(yīng)用數(shù)據(jù)管理

9、給應(yīng)用添加通知和提醒

10、應(yīng)用服務(wù)上架

11、三方庫的基本使用

12、HarmonyOS 云開發(fā)簡介

第3步：深入學(xué)習(xí) ArkTS 語言

第三步涉及8個部分，以下是具體：

1、ArkTS 在 TS 上基本語法能力擴(kuò)展

2、ArkTS 在 TS 上狀態(tài)管理能力擴(kuò)展

3、ArkTS 在 TS 上渲染控制能力擴(kuò)展

4、ArkTS 語言常用的基礎(chǔ)能力

5、ArkTS 語言并發(fā)能力

6、ArkTS 語言 XML/URL/URI 解析構(gòu)造等能力

7、ArkTS 語言進(jìn)程信息獲取和操作能力

8、ArkTS 線性和非線性容器

第4步：Stage 模型開發(fā)

第四步有12個部分，以下是具體：

1、應(yīng)用模型概述

2、應(yīng)用/組件級配置

3、UIAbility 組件

4、ExtensionAbility 組件

5、AbilityStage 組件容器

6、應(yīng)用上下文 Context

7、信息傳遞載體 Want

8、任務(wù)管理模型

9、后臺任務(wù)管理

10、進(jìn)程模型

11、線程模型

12、Ability開發(fā)案例

第5步：UI 開發(fā)案例集

第五步涉及14個部分，以下是具體：

1、視頻APP開發(fā)

2、電子相冊案例

3、構(gòu)建多種樣式彈窗

4、簡易計(jì)算器

5、抽獎輪盤應(yīng)用

6、像素轉(zhuǎn)換案例

7、二級聯(lián)動案例

8、目標(biāo)管理案例

9、布局案例大合集

10、可刷新的排行榜

11、動效、專場動畫與自定義下拉刷新動畫

12、Web組件之 Cookie 常見操作

13、Swiper 與 Slider 案例

14、List 組件案例

第6步：設(shè)備與交互開發(fā)

第六步涉及5個部分，以下是具體：

1、設(shè)備管理

2、公共事件與通知

3、窗口管理

4、多媒體開發(fā)

5、電話服務(wù)

第7步：網(wǎng)絡(luò)連接與數(shù)據(jù)文件管理

第七步涉及7個部分，以下是具體：

1、網(wǎng)絡(luò)管理

2、IPC與RPC通信

3、用戶首選項(xiàng)

4、關(guān)系型數(shù)據(jù)庫(RelationalStore)

5、分布式數(shù)據(jù)對象

6、文件管理

7、網(wǎng)絡(luò)連接與數(shù)據(jù)庫案例

03第三站：進(jìn)階開發(fā)

第三站進(jìn)階開發(fā)總共分為9步，以下是具體：

第 1 步：WebView 適配開發(fā)

1、Web 組件和 WebView 概念介紹

2、Web 組件的基本使用

3、WebView 的基本使用

4、案例開發(fā)：Web 組件抽獎

第 2 步：Native 適配開發(fā)

1、Native API 基本知識

2、Native API 開發(fā)流程

3、Native API 典型開發(fā)場景

4、Native API 代碼集成

第 3 步：常用三方庫的使用

1、三方庫介紹 HAR

2、三方庫中心倉與包管理工具

3、三方庫開發(fā)移植和發(fā)布

4、應(yīng)用開發(fā)中使用 ohpm 管理開源三方庫

5、一個例子：@ohos/axios：網(wǎng)絡(luò)請求庫

6、在三方庫中心倉查找更多的三方庫

第 4 步：一次開發(fā)，多端部署

1、定義和目標(biāo)

2、界面級一多開發(fā)

3、功能級一多開發(fā)

4、工程級一多開發(fā)

5、購物應(yīng)用案例

6、音樂專輯案例

第 5 步：端云一體化開發(fā)

1、端云一體化工程簡介和概覽

2、工程創(chuàng)建及配置

3、端云一體化組件集成

4、云函數(shù)開發(fā)及使用

5、云數(shù)據(jù)庫開發(fā)及使用

6、云存儲入門指南

7、一鍵式部署云工程

第 6 步：低代碼開發(fā)

1、低代碼的定義

2、DevEco 低代碼關(guān)鍵能力和特性介紹

3、DevEco 低代碼技術(shù)原理

4、端側(cè)組件支持自適應(yīng)布局

5、豐富的行業(yè)模板和組件

6、DevEco 低代碼開發(fā)元服務(wù)流程和案例

第 7 步：元服務(wù)：打造卡片外顯、服務(wù)直達(dá)的新體驗(yàn)

1、元務(wù)概覽和案例分享

2、元服務(wù)初體驗(yàn)

3、基于 AGC 模板開發(fā)元服務(wù)

4、元服務(wù)上架指南

第 8 步：ArkUI-X 構(gòu)建跨平臺應(yīng)用

1、項(xiàng)目介紹與關(guān)鍵特性

2、技術(shù)架構(gòu)與演進(jìn)路線

3、ArkUI-X 快速入門

4、購物車示例應(yīng)用(API 10)

5、健康飲食示例應(yīng)用(API 10)

第 9 步：通關(guān)HarmonyOS應(yīng)用開發(fā)者高級認(rèn)證

1、HarmonyOS 系統(tǒng)特征介紹

2、HarmonyOS 應(yīng)用架構(gòu)介紹

3、準(zhǔn)備工作

4、應(yīng)用開發(fā)知識域

5、閉源庫集成指導(dǎo)

6、三方庫使用

7、HarmonyOS 上架

04第四站：項(xiàng)目實(shí)戰(zhàn)

本階段共四步，以下是具體：

第 1 步：WebView 適配開發(fā)

1、鴻蒙項(xiàng)目工程架構(gòu)分析

2、項(xiàng)目需求分析

第 2 步：鴻蒙手機(jī)端APP功能開發(fā)

1、首頁框架搭建

2、網(wǎng)絡(luò)請求組件開發(fā)

3、證件照分類頁框架搭建

4、登錄組件開發(fā)

5、制作證件照框架搭建

6、從相冊選擇：切換背景、美顏與換裝

7、相機(jī)拍攝

8、裁剪證件照

9、證件照換底

10、搜索功能

11、支付組件開發(fā)

12、“我的”頁面開發(fā)

第 3 步：項(xiàng)目測試

1、HarmonyOS應(yīng)用測試服務(wù)平臺概覽

2、DevEco Stutio 調(diào)試與單元測試

3、DevEco Tesing 上架預(yù)測試

第 4 步：項(xiàng)目應(yīng)用上架

1、創(chuàng)建項(xiàng)目

2、創(chuàng)建 HarmonyOS 應(yīng)用

3、編譯打包HarmonyOS 項(xiàng)目

4、上架 HarmonyOS 應(yīng)用

以下是完成的學(xué)習(xí)路線圖：

聲明：本站部分稿件版權(quán)來源于網(wǎng)絡(luò)，如有侵犯版權(quán)，請及時聯(lián)系我們。