electron入門指南

一.認識

定位

實作

這些隻是Electron的依賴項，跨平台最關鍵的自然是适配層，由供node調用的C++子產品來完成平台适配，提供系統級的平台接口

适用場景

桌面環境可能很難抹平差異，Electron的大多數API都是分平台的，例如quick start裡的：

如果想用Electron實作完美的跨平台一緻體驗，還要費不少功夫，甚至某些方面不可能做到一緻（可能需要自己做一些C++子產品來完成适配），就API體驗來看，比ionic移動端跨平台更費勁，平台差異太多

但如果隻是想“用JS寫個Mac/Win工具，說不定還能跨平台”的話，即不考慮平台差異的話，Electron還算不錯

二.開發環境

quick start

官方提供了quick-start，算是基本的試玩環境：

npm start

在npm install可能遇到ETIMEDOUT，因為electron包非常大（120M）：

建議換用taobao鏡像下載下傳：

一切正常的話，能跑出來一個hello world視窗，看看API文檔，體驗一些系統原生API，比如系統托盤，桌面通知等等，試玩結束

如果打算開始搞的話，強烈不建議從quick start開始，因為還缺很多東西：

子產品化方案

建構方案（開發-打包-釋出）

元件庫（UI庫）

路由管理

持久化方案

那麼可能還需要react、webpack、antd、react-router、xxx-storage等等一大堆東西，手動去做的話，隻webpack建構方案就得小半天，是以，我們需要更強大的模版項目

boilerplate

對于react全家桶，這裡推薦兩份項目模版：

electron-react-boilerplate：yarn管理依賴，webpack建構

electron-react-redux-boilerplate：npm管理依賴，npm scripts建構

webpack配置建構可擴充性更好一些，但實際使用發現electron-react-boilerplate建構配置相當複雜，本地沒能跑起來，嘗試解決無果後放棄了，改用electron-react-redux-boilerplate

兩個模版都沒有提供UI元件庫，引入antd後發現npm scripts建構腳本很難解決自動引入css的問題（webpack可以添loader解決），暫時先拿cp頂着，後續考慮切換到webpack：

P.S.在安裝依賴時，也會遇到electron下載下傳逾時的問題，同樣，環境變量指向taobao鏡像：

三.常見問題

1.讓視窗緊貼托盤圖示正下方

有現成子產品，相當好用：

先擷取托盤圖示的位置，再根據視窗大小計算居中

2.系統托盤圖示尺寸

摘自：Proper tray icon

Mac頂部菜單欄高度是22px，可以用22px或者16px的png格式圖示

P.S.gif格式圖檔不可以用做圖示

3.Mac系統通知中文亂碼

HTML需要通過meta設定charset：

否則HTML裡引入的外部JS資源裡的字面量中文串，會出現亂碼

4.持久化存儲

建議使用electron-store

用JSON檔案來存，放在應用安裝目錄裡，API不太科學：

不很影響使用，讀寫都是同步的，存簡單的使用者配置比較合适。大量資料的話，可能存在性能問題

P.S.更多Electron資料存儲方式請檢視How to store user data in Electron

5.IPC

Electron裡有兩個程序，Main和Renderer，前者負責管理一切，并與平台互動，後者提供浏覽器環境，渲染頁面

程序間通信支援程度比較好，有同步和異步兩種方式，通過事件消息來通信

異步通信（event.sender.send()）：

同步通信（event.returnValue）：

P.S.如果renderer發來的參數是undefined，直接傳入系統接口，可能會遇到錯誤：

傳遞給系統接口的參數，應該嚴格校驗，避免此類問題

6.開機自啟

有現成子產品：node-auto-launch

P.S.Mac下确實添了一條啟動項，但沒有勾選，可能需要制定應用路徑，待深入了解

寫在最後

實際上，對系統級API的依賴比想象的少太多了，學習成本大多來自前端生态（React全家桶），完全合心意的元件庫是不存在的

東西呢，還不成樣子，下周繼續