electron入門指南
一.認識定位
Electron is a framework for creating native applications with web technologies like JavaScript, HTML, and CSS.
實現
這些只是Electron的依賴項，跨平台最關鍵的自然是適配層，由供node調用的C++模塊來完成平台適配，提供系統級的平台介面
適用場景
桌面環境可能很難抹平差異，Electron的大多數API都是分平台的，例如quick start里的：
如果想用Electron實現完美的跨平台一致體驗，還要費不少功夫，甚至某些方面不可能做到一致（可能需要自己做一些C++模塊來完成適配），就API體驗來看，比ionic移動端跨平台更費勁，平台差異太多
但如果只是想「用JS寫個Mac/Win工具，說不定還能跨平台」的話，即不考慮平台差異的話，Electron還算不錯
二.開發環境quick start
官方提供了quick-start，算是基本的試玩環境：
在可能遇到ETIMEDOUT，因為包非常大（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解決），暫時先拿頂著，後續考慮切換到webpack：
P.S.在安裝依賴時，也會遇到electron下載超時的問題，同樣，環境變數指向taobao鏡像：
三.常見問題1.讓窗口緊貼托盤圖標正下方
有現成模塊，相當好用：
menubar
先獲取托盤圖標的位置，再根據窗口大小計算居中
2.系統托盤圖標尺寸
For OS X, create icons:
icon.png (for best results aim 16x16px)
For Windows, create single icon:
icon.ico
ICO format will work better than classic PNG. If you want PNG, make it 32x32px.
摘自：Proper tray icon
Mac頂部菜單欄高度是，可以用或者的格式圖標
P.S.gif格式圖片不可以用做圖標
3.Mac系統通知中文亂碼
HTML需要通過設置：
否則HTML里引入的外部JS資源里的字面量中文串，會出現亂碼
4.持久化存儲
建議使用electron-store
用JSON文件來存，放在應用安裝目錄里，API不太科學：
不很影響使用，讀寫都是同步的，存簡單的用戶配置比較合適。大量數據的話，可能存在性能問題
P.S.更多Electron數據存儲方式請查看How to store user data in Electron
5.IPC
Electron里有兩個進程，Main和Renderer，前者負責管理一切，並與平台交互，後者提供瀏覽器環境，渲染頁面
進程間通信支持程度比較好，有同步和非同步兩種方式，通過事件消息來通信
非同步通信（）：
同步通信（）：
P.S.如果發來的參數是，直接傳入系統介面，可能會遇到錯誤：
ERROR:v8_value_converter.cc(374)] Unexpected v8 value type encountered.
傳遞給系統介面的參數，應該嚴格校驗，避免此類問題
6.開機自啟
有現成模塊：node-auto-launch
P.S.Mac下確實添了一條啟動項，但沒有勾選，可能需要制定應用路徑，待深入了解
寫在最後
實際上，對系統級API的依賴比想像的少太多了，學習成本大多來自前端生態（React全家桶），完全合心意的組件庫是不存在的
東西呢，還不成樣子，下周繼續
聯繫ayqy
TAG:ayqy |