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

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

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

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

第1步：Web 頁(yè)面布局

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

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

頁(yè)面制作工具：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)式布局;移動(dòng)端reset, 1px border, 高清圖片;移動(dòng)端設(shè)備適配最佳實(shí)踐.

第2步：JavaScript 語(yǔ)言

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

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

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

第 3 步：TypeScript 語(yǔ)言

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

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

第 4 步：Node.js

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

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

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

Webpack:

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

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

vite：為什么選用Vite;搭建Vite開(kāi)發(fā)環(huán)境;創(chuàng)建第一個(gè)Vite項(xiàng)目;NPM依賴解析和預(yù)構(gòu)建(依賴預(yù)構(gòu)建簡(jiǎn)介、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第二站：開(kāi)發(fā)入門(mén)

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

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

分為10個(gè)部分，以下是具體：

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

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

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

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

5、ArkUI 跨平臺(tái)方案

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

7、HarmonyOS 端云開(kāi)放能力

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

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

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

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

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

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

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

3、ArkTS 開(kāi)發(fā)語(yǔ)言

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

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

6、動(dòng)畫(huà)基礎(chǔ)應(yīng)用

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

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

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

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

11、三方庫(kù)的基本使用

12、HarmonyOS 云開(kāi)發(fā)簡(jiǎn)介

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

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

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

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

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

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

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

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

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

8、ArkTS 線性和非線性容器

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

第四步有12個(gè)部分，以下是具體：

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

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

3、UIAbility 組件

4、ExtensionAbility 組件

5、AbilityStage 組件容器

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

7、信息傳遞載體 Want

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

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

10、進(jìn)程模型

11、線程模型

12、Ability開(kāi)發(fā)案例

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

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

1、視頻APP開(kāi)發(fā)

2、電子相冊(cè)案例

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

4、簡(jiǎn)易計(jì)算器

5、抽獎(jiǎng)輪盤(pán)應(yīng)用

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

7、二級(jí)聯(lián)動(dòng)案例

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

9、布局案例大合集

10、可刷新的排行榜

11、動(dòng)效、專場(chǎng)動(dòng)畫(huà)與自定義下拉刷新動(dòng)畫(huà)

12、Web組件之 Cookie 常見(jiàn)操作

13、Swiper 與 Slider 案例

14、List 組件案例

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

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

1、設(shè)備管理

2、公共事件與通知

3、窗口管理

4、多媒體開(kāi)發(fā)

5、電話服務(wù)

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

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

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

2、IPC與RPC通信

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

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

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

6、文件管理

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

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

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

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

1、Web 組件和 WebView 概念介紹

2、Web 組件的基本使用

3、WebView 的基本使用

4、案例開(kāi)發(fā)：Web 組件抽獎(jiǎng)

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

1、Native API 基本知識(shí)

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

3、Native API 典型開(kāi)發(fā)場(chǎng)景

4、Native API 代碼集成

第 3 步：常用三方庫(kù)的使用

1、三方庫(kù)介紹 HAR

2、三方庫(kù)中心倉(cāng)與包管理工具

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

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

5、一個(gè)例子：@ohos/axios：網(wǎng)絡(luò)請(qǐng)求庫(kù)

6、在三方庫(kù)中心倉(cāng)查找更多的三方庫(kù)

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

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

2、界面級(jí)一多開(kāi)發(fā)

3、功能級(jí)一多開(kāi)發(fā)

4、工程級(jí)一多開(kāi)發(fā)

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

6、音樂(lè)專輯案例

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

1、端云一體化工程簡(jiǎn)介和概覽

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

3、端云一體化組件集成

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

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

6、云存儲(chǔ)入門(mén)指南

7、一鍵式部署云工程

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

1、低代碼的定義

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

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

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

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

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

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

1、元?jiǎng)?wù)概覽和案例分享

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

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

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

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

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

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

3、ArkUI-X 快速入門(mén)

4、購(gòu)物車(chē)示例應(yīng)用(API 10)

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

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

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

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

3、準(zhǔn)備工作

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

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

6、三方庫(kù)使用

7、HarmonyOS 上架

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

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

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

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

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

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

1、首頁(yè)框架搭建

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

3、證件照分類頁(yè)框架搭建

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

5、制作證件照框架搭建

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

7、相機(jī)拍攝

8、裁剪證件照

9、證件照換底

10、搜索功能

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

12、“我的”頁(yè)面開(kāi)發(fā)

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

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

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

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

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

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

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

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

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