Electron 實(shí)戰(zhàn)必備:electron 依賴(lài)安裝 |
? electron 版本選擇(目前最新 18.2.0 )
? electron-builder 版本選擇 |
客戶(hù)端實(shí)戰(zhàn)開(kāi)發(fā)必備知識(shí) |
? 進(jìn)程和線程
? 主進(jìn)程和渲染進(jìn)程
? 進(jìn)程間通信
? 跨進(jìn)程訪問(wèn)
? 以及 electron 升級(jí)中遇到的常見(jiàn)問(wèn)題 |
主進(jìn)程 |
? 如何創(chuàng)建窗口的案例 - BrowserWindow
? 如何加載網(wǎng)頁(yè)的案例 - loadURL
? 窗口關(guān)閉事件監(jiān)聽(tīng)回收 的案例
? app 事件監(jiān)聽(tīng)的案例 * ready
* window-all-closed
* activate
? 其他高階模塊的案例
* ipcMain 發(fā)送和監(jiān)聽(tīng)消息案例
* autoUpdater 自動(dòng)升級(jí)案例
* 部分原生 UI 模塊案例: menu 案例 & dialog 案例 |
調(diào)試 |
? 主進(jìn)程調(diào)試:
* Node 進(jìn)程基于 --inspect
* 常見(jiàn)問(wèn)題:端口沖突,增加命令參數(shù)指定端口
? 渲染進(jìn)程調(diào)試:
* Chromium 的一個(gè)窗口,和網(wǎng)頁(yè)調(diào)試類(lèi)似,基于 devtools
* 代碼啟動(dòng)窗口的時(shí)候設(shè)置 mainWindow.webContents.openDevTools()
? 在 VSCode 調(diào)試(高級(jí)篇):
* 安裝 Debugger for Chrome
* 配置 .vscode/launch.json
? 生產(chǎn)環(huán)境調(diào)試:
* 基于 Debugtron
* 常見(jiàn)問(wèn)題解決 |
基于腳手架搭建 angular 13 應(yīng)用 |
@angular/cli 13.* (比如 13.3.2 ) 創(chuàng)建 angular 13 版本的項(xiàng)目
angular 腳手架的版本迭代歷史 |
熟悉腳手架生成的目錄和命令 |
? src/app
? src/environments
? ng serve 本地啟動(dòng)服務(wù)和參數(shù)
? ng build 構(gòu)建和打包之后的文件介紹 |
v13 版本的核心變化 |
? rxjs 升級(jí)到 7
? 構(gòu)建工具默認(rèn)使用持久構(gòu)建緩存
? 移除 IE11 鋪平道路
? 新 API 移除了將 ComponentFactoryResolver 注入到構(gòu)造函數(shù)的需要
? Angular Package Format (APF) 的更改
? View Engine 在 Angular 中將不再可用 |
Typescript 實(shí)戰(zhàn)必備語(yǔ)法 |
? class
? private
? public
? Partial
? tsconfig 的配置
? tslint 的項(xiàng)目配置和代碼規(guī)范 |
預(yù)編譯樣式 |
選擇 less 作為主要預(yù)編譯的原因以及對(duì)比 Sass 等
?
|
angular 實(shí)戰(zhàn)核心模塊 |
? 圍繞核心模塊進(jìn)行組件化開(kāi)發(fā)
1.@angular/core
2.@angular/router
3. @angular/forms
4.@angular/common
5.@angular/compiler
6.rxjs
7.zone.js
? angular 基礎(chǔ)文件:
angular.json
main.ts
app.component.ts
index.html
? 案例所需指令詳解:
ngIf
(ngSubmit)
[ngClass]
[disabled]
[innerHTML]
? 案例涉及路由 @angular/router 詳解 :
routerLink
navigate
? 案例涉及與后端服務(wù)通信 @angular/common/http :
HttpClient 等
services 目錄的拆分
post 與 get 的區(qū)分
結(jié)合 localStorage 進(jìn)行用戶(hù)登錄信息的本地緩存
? 案例涉及到 @angular/forms 詳解
ReactiveFormsModule
FormBuilder
FormGroup
Validators
? 基于 karma 對(duì)案例項(xiàng)目進(jìn)行自動(dòng)化測(cè)試:
karma.conf.js 的配置詳解
karma 的依賴(lài)配置: karma-coverage-istanbul-reporter 、 karma-jasmine-html-reporter 等
? rxjs 的案例深度應(yīng)用
rxjs/operators
Subscription
Observable
of
throwError |
開(kāi)源組件庫(kù)使用 |
? ng-zorro-antd 部分表單組件使用案例
? element 部分表單組件使用案例
? 組件必備知識(shí)詳解 |
調(diào)試 & 自動(dòng)化測(cè)試 & 性能工具 |
? 基于 protractor 自動(dòng)化測(cè)試實(shí)戰(zhàn):
? 性能檢測(cè):基于 lighthouse 評(píng)分進(jìn)行優(yōu)化
? angular 工具使用: chrome 擴(kuò)展 DevTools 實(shí)戰(zhàn)必備使用案例解析 |
錯(cuò)誤日志監(jiān)聽(tīng) |
整體基于 sentry 搭建錯(cuò)誤日志上報(bào)的實(shí)時(shí)平臺(tái) |
案例實(shí)戰(zhàn) |
? 完成一個(gè)登陸、注冊(cè)的表單
? electron + angular 13 |