Electron是一個構建桌面應用的框架，它與傳統的桌面級應用開發方式有一些區別，它使用的是現在流行的Javascript。這個系列的文章可能需要你有一些ES6與Angular2基礎知識，不過即便是沒有嘗試過它們也沒有關係，你可以開啟編輯器跟隨教程一步一步搭建應用。有關Electron你可以參考這裡的文件
介紹
在此教程中，我們會使用Electron與流行的Angular最新版本構建一個桌面應用。 我們暫定應用叫做news-feed，它至少擁有以下幾種功能：
- 抓取流行的一些新聞，並且儲存在本地
- 列表顯示新聞，提供文章詳情檢視
- 可以下載感興趣的文章到本地
基礎
Angular
Angular目前版本較多，腳手架也比較複雜，在寫這篇文章時，Angular最新版本是4.beta，我們也採用它來構建。
- 執行
npm i angular-cli@1.0.0-beta.25.5 -g，安裝全域性的angular命令列工具。 - 在專案根目錄下執行
ng new news-feed --style=scss開始建立一個angular應用。(這一步需要一些時間，取決於你的網路。如果發生node-sass錯誤，請確保你擁有c++編譯環境，具體可以參考github的node-sass專案來安裝) - 執行
ng server，開啟瀏覽器127.0.0.1:4200即可看到Angular已經正常執行了。
至此，Angular已經可以正常執行，但值得一說的是ng server命令並不能輸出檔案，我們需要的是即時監視並編譯出檔案來供作electron渲染才行，所以我們需要為package.json檔案的script這一欄新增一行命令:"watch": "ng build -watch -o dist/"。這樣，每次我們執行npm run watch時便可以自動監視檔案並幫我們編譯檔案了。
還有一個小問題存在，我們這樣編譯出來的檔案路徑會無法正確的在electron中渲染，這是因為我們沒有指定資源的相對路徑，可以在src/index.html中修改<base href="/">為<base href="./">。直到這一步，我們的Angular所有問題都已經解決。
Electron
有關electron的介紹有很多，具體你也可以參考其他教程來搭建，這裡僅僅提供一些基礎環境的提示。如果你需要參考更多的資料，可以參考官方文件或是在GITHUB上搜尋相關專案。
這裡系統預設為MAC，預設你已經擁有基礎的c++編譯環境與其他基礎的開發設施。(它們在編譯一些庫時可能需要)
- 安裝全域性
electron-prebuilt：npm i electron-prebuilt -g，它用來執行一些electron命令。如果需要許可權，請嘗試sudo npm i electron-prebuilt -g安裝。完成後可通過electron -v來檢視版本。 - 進入news-feed目錄，我們在
package.json檔案中新增"main": "index.js"，為electron指定入口檔案。 - 執行
npm i electron --save安裝electron依賴。(可能需要很長一些時間，如果一直卡在electron install中，說明你需要一些比較好的命令列代理，或者你可以嘗試這個命令來從淘寶源安裝:ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ npm i -save electron)。 - 在根目錄下新增index.js，並填充一些基礎程式碼:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
const {app, BrowserWindow} = require('electron') let win; const createWindow = () =>{ win = new BrowserWindow({ width: 700, height: 500, show: false, }); win.loadURL(`file://${__dirname}/dist/index.html`); win.webContents.openDevTools(); win.on('closed', () => win = null) win.on('ready-to-show', () =>{ win.show() win.focus() }) } app.on('ready', _ => createWindow()) app.on('window-all-closed', _ => process.platform !== 'darwin'&& app.quit()) app.on('activate', _ => win === null&& createWindow()) |
現在整體的專案結構應該像是這樣:
現在先執行npm run watch開始編譯angular，再開啟一個新的命令列視窗執行electron ./即可看到執行後的效果。 怎麼樣，是不是很酷？
架構
先別急著開發，我們再來梳理一下專案結構以及具體應該怎樣開發。 Electron雖然有很多API可以使用，但其中大部分都不可以在渲染程式中使用。所謂的渲染程式，大家可以簡單的理解為前端檢視層，每當我們需要藉助系統API或NODE原生的模組，就需要向主執行緒傳送申請，然後獲得一些資料來計算與填充模板。
當然，也有一部分人使用remoteAPI在渲染程式來使用主程式的物件，但是我並不推薦大家這樣做，因為在渲染程式也就是你的Angular中任何的程式碼都有可能引起全域性的記憶體洩露，特別在複雜業務中使用事件監聽時。這類問題非常難以定位，即便是重新整理視窗也無法解決，因為主執行緒不會隨著頁面重新整理而重啟。
在Angular中，我們可以將每次請求的資料包裝成Rx物件，就像是使用http一樣使用它們。Electron則負責抓取相應的資料返回或儲存。這裡我們可以採用一些nodejs中通用的庫來解決這些瑣碎的事情。我們希望每次抓取資料後處理成比較好的json格式返回給前端，所以還需要對字串進行篩選和組裝。
這個應用沒有許可權的控制，但為了大家學習這一點，我們可以假使它是一個註冊收費軟體，每次需要登入後才能使用，便於我們學習一些路由的許可權控制。
一個好的應用不僅要有好的基礎邏輯，細節也是決定成敗的關鍵一點，這就像是《西部世界》裡面Ford說的，『他們會為細微(subtleties)而來，為細節(Details)而來，因為愛上(In love)而來』。比如我們可以記錄使用者的一些習慣，視窗被拖動到多大，視窗位置被拖動到了哪裡，文章基礎字型多大等等，在下次啟動時為他們配置好。為使用者準備足夠好的字型與閱讀感受，更新的速度，方式，機會，閱讀與下載的方式等等，在這次開發時我們不妨考慮一下這些細節，在學習新技術時，嘗試做一個讓人稱讚的產品！