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)畫; 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ǔ)入門：TypeScript 介紹;TypeScript 入門;常用類型;類型縮小;函數(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ǔ)入門;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ǔ)入門：為什么需要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ā)入門

第二站總共分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)畫基礎(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)輪盤應(yīng)用

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

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

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

9、布局案例大合集

10、可刷新的排行榜

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

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ǔ)入門指南

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 快速入門

4、購(gòu)物車示例應(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)用

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

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