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