前言
雖然 B/S 是目前開發(fā)的主流微驶，但是 C/S 仍然有很大的市場(chǎng)需求。受限于瀏覽器的沙盒限制开睡，網(wǎng)頁(yè)應(yīng)用無(wú)法滿足某些場(chǎng)景下的使用需求因苹，而桌面應(yīng)用可以讀寫本地文件、調(diào)用更多系統(tǒng)資源篇恒，再加上 Web 開發(fā)的低成本扶檐、高效率的優(yōu)勢(shì)，這種跨平臺(tái)方式越來(lái)越受到開發(fā)者的喜愛胁艰。
Electron 是一個(gè)基于 Chromium 和 Node.js款筑，使用 HTML、CSS 和 JavaScript 來(lái)構(gòu)建跨平臺(tái)應(yīng)用的跨平臺(tái)開發(fā)框架腾么，兼容 Mac奈梳、Windows 和 Linux。目前解虱，Electron 已經(jīng)創(chuàng)建了包括 VScode 和 Atom 在內(nèi)的大量應(yīng)用攘须。
環(huán)境搭建
創(chuàng)建 Electron 跨平臺(tái)應(yīng)用之前，需要先安裝一些常用的工具殴泰，如 Node于宙、vue 和 Electron 等。
安裝Node
進(jìn)入 Node 官網(wǎng)下載頁(yè) http://nodejs.cn/download/悍汛，然后下載對(duì)應(yīng)的版本即可捞魁，下載時(shí)建議下載穩(wěn)定版本。如果安裝 Node 使用 Homebrew 方式离咐，建議安裝時(shí)將 npm 倉(cāng)庫(kù)鏡像改為淘寶鏡像谱俭，如下所示。
npm config set registry http://registry.npm.taobao.org/
或者
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝/升級(jí) vue-cli
先執(zhí)行以下命令健霹，確認(rèn)下本地安裝的 vue-cli 版本旺上。
vue -V
如果沒(méi)有安裝或者不是最新版，可以執(zhí)行以下命令安裝/升級(jí)糖埋。
npm install @vue/cli -g
安裝 Electron
使用如下命令安裝 Electron 插件宣吱。
npm install -g electron
或者
cnpm install -g electron
為了驗(yàn)證是否安裝成功，可以使用如下的命令瞳别。
electron --version
創(chuàng)建運(yùn)行項(xiàng)目
Electron 官方提供了一個(gè)簡(jiǎn)單的項(xiàng)目征候，可以執(zhí)行以下命令將項(xiàng)目克隆到本地杭攻。
git clone https://github.com/electron/electron-quick-start
然后在項(xiàng)目中執(zhí)行如下命令即可啟動(dòng)項(xiàng)目。
cd electron-quick-start
npm install
npm start
啟動(dòng)后項(xiàng)目的效果如下圖疤坝。
除此之外兆解，我們可以使用 vue-cli 腳手架工具來(lái)創(chuàng)建項(xiàng)目。
vue init simulatedgreg/electron-vue
然后根據(jù)下面的提示一步步選中選項(xiàng)即可創(chuàng)建項(xiàng)目跑揉，如下所示锅睛。
然后，使用 npm install 命令安裝項(xiàng)目所需要的依賴包历谍，安裝完成之后现拒，可以使用 npm run dev 或 npm run build 命令運(yùn)行 electron-vue 模版應(yīng)用程序，運(yùn)行效果如下圖所示望侈。
Electron 源碼目錄
Electron 的源代碼主要依據(jù) Chromium 的拆分約定被拆成了許多部分印蔬。為了更好地理解源代碼，您可能需要了解一下 Chromium 的多進(jìn)程架構(gòu)脱衙。
Electron 源碼目錄結(jié)構(gòu)和含義具體如下：
Electron
├──atom - Electron 的源代碼
|? ├── app - 系統(tǒng)入口代碼
|? ├── browser - 包含了主窗口侥猬、UI 和其他所有與主進(jìn)程有關(guān)的東西，它會(huì)告訴渲染進(jìn)程如何管理頁(yè)面
|? |? ├── lib - 主進(jìn)程初始化代碼中 JavaScript 部分的代碼
|? |? ├── ui - 不同平臺(tái)上 UI 部分的實(shí)現(xiàn)
|? |? |? ├── cocoa - Cocoa 部分的源代碼
|? |? |? ├── gtk - GTK+ 部分的源代碼
|? |? |? └── win - Windows GUI 部分的源代碼
|? |? ├── default_app - 在沒(méi)有指定 app 的情況下 Electron 啟動(dòng)時(shí)默認(rèn)顯示的頁(yè)面
|? |? ├── api - 主進(jìn)程 API 的實(shí)現(xiàn)
|? |? |? └── lib - API 實(shí)現(xiàn)中 Javascript 部分的代碼
|? |? ├── net - 網(wǎng)絡(luò)相關(guān)的代碼
|? |? ├── mac - 與 Mac 有關(guān)的 Objective-C 代碼
|? |? └── resources - 圖標(biāo)捐韩，平臺(tái)相關(guān)的文件等
|? ├── renderer - 運(yùn)行在渲染進(jìn)程中的代碼
|? |? ├── lib - 渲染進(jìn)程初始化代碼中 JavaScript 部分的代碼
|? |? └── api - 渲染進(jìn)程 API 的實(shí)現(xiàn)
|? |? ? ? └── lib - API 實(shí)現(xiàn)中 Javascript 部分的代碼
|? └── common - 同時(shí)被主進(jìn)程和渲染進(jìn)程用到的代碼退唠，包括了一些用來(lái)將 node 的事件循環(huán)
|? ? ? |? ? ? ? 整合到 Chromium 的事件循環(huán)中時(shí)用到的工具函數(shù)和代碼
|? ? ? ├── lib - 同時(shí)被主進(jìn)程和渲染進(jìn)程使用到的 Javascript 初始化代碼
|? ? ? └── api - 同時(shí)被主進(jìn)程和渲染進(jìn)程使用到的 API 的實(shí)現(xiàn)以及 Electron 內(nèi)置模塊的基礎(chǔ)設(shè)施
|? ? ? ? ? └── lib - API 實(shí)現(xiàn)中 Javascript 部分的代碼
├── chromium_src - 從 Chromium 項(xiàng)目中拷貝來(lái)的代碼
├── docs - 英語(yǔ)版本的文檔
├── docs-translations - 各種語(yǔ)言版本的文檔翻譯
├── spec - 自動(dòng)化測(cè)試
├── atom.gyp - Electron 的構(gòu)建規(guī)則
└── common.gypi - 為諸如 `node` 和 `breakpad` 等其他組件準(zhǔn)備的編譯設(shè)置和構(gòu)建規(guī)則
平時(shí)開發(fā)時(shí)，需要重點(diǎn)關(guān)注的就是 src奥帘、package.json 和 appveyor.yml 目錄铜邮。除此之外，其他需要注意的目錄如下：
script - 用于諸如構(gòu)建寨蹋、打包松蒜、測(cè)試等開發(fā)用途的腳本
tools - 在 gyp 文件中用到的工具腳本，但與 script 目錄不同已旧， 該目錄中的腳本不應(yīng)該被用戶直接調(diào)用
vendor - 第三方依賴項(xiàng)的源代碼秸苗，為了防止人們將它與 Chromium 源碼中的同名目錄相混淆， 在這里我們不使用 third_party 作為目錄名
node_modules - 在構(gòu)建中用到的第三方 node 模塊
out - ninja 的臨時(shí)輸出目錄
dist - 由腳本 script/create-dist.py 創(chuàng)建的臨時(shí)發(fā)布目錄
external_binaries - 下載的不支持通過(guò) gyp 構(gòu)建的預(yù)編譯第三方框架
應(yīng)用工程目錄
使用 electron-vue 模版創(chuàng)建的 Electron 工程結(jié)構(gòu)如下圖运褪。
和前端工程的項(xiàng)目結(jié)構(gòu)類似惊楼，Electron 項(xiàng)目的目錄結(jié)構(gòu)如下所示：
electron-vue：Electron模版配置。
build：文件夾秸讹，用來(lái)存放項(xiàng)目構(gòu)建腳本檀咙。
config：中存放項(xiàng)目的一些基本配置信息，最常用的就是端口轉(zhuǎn)發(fā)璃诀。
node_modules：這個(gè)目錄存放的是項(xiàng)目的所有依賴弧可，即 npm install 命令下載下來(lái)的文件。
src：這個(gè)目錄下存放項(xiàng)目的源碼劣欢，即開發(fā)者寫的代碼放在這里棕诵。
static：用來(lái)存放靜態(tài)資源裁良。
index.html：則是項(xiàng)目的首頁(yè)、入口頁(yè)校套，也是整個(gè)項(xiàng)目唯一的HTML頁(yè)面价脾。
package.json：中定義了項(xiàng)目的所有依賴，包括開發(fā)時(shí)依賴和發(fā)布時(shí)依賴笛匙。
對(duì)于開發(fā)者來(lái)說(shuō)侨把， 90% 的工作都是在 src 中完成，src 中的文件目錄如下膳算。
Electron 應(yīng)用程序分成三個(gè)基礎(chǔ)模塊：主進(jìn)程座硕、進(jìn)程間通信和渲染進(jìn)程弛作。
1涕蜂、主進(jìn)程
Electron 運(yùn)行 package.json 的 main 腳本（background.js）的進(jìn)程被稱為主進(jìn)程。在主進(jìn)程中運(yùn)行的腳本通過(guò)創(chuàng)建web頁(yè)面來(lái)展示用戶界面映琳。一個(gè) Electron 應(yīng)用總是有且只有一個(gè)主進(jìn)程机隙。
2、渲染進(jìn)程
由于 Electron 使用了 Chromium 來(lái)展示 Web 頁(yè)面萨西，所以 Chromium 的多進(jìn)程架構(gòu)也被使用到有鹿。每個(gè) Electron 中的 Web 頁(yè)面運(yùn)行在它自己的渲染進(jìn)程中。在普通的瀏覽器中谎脯，Web 頁(yè)面通常在一個(gè)沙盒環(huán)境中運(yùn)行葱跋，不被允許去接觸原生的資源。然而 Electron 允許用戶在 Node.js 的 API 支持下可以在頁(yè)面中和操作系統(tǒng)進(jìn)行一些底層交互源梭。
3娱俺、主進(jìn)程與渲染進(jìn)程通信
主進(jìn)程使用 BrowserWindow 實(shí)例創(chuàng)建頁(yè)面。每個(gè) BrowserWindow 實(shí)例都在自己的渲染進(jìn)程里運(yùn)行頁(yè)面废麻。當(dāng)一個(gè) BrowserWindow 實(shí)例被銷毀后荠卷，相應(yīng)的渲染進(jìn)程也會(huì)被終止。主進(jìn)程管理所有的 Web 頁(yè)面和它們對(duì)應(yīng)的渲染進(jìn)程烛愧。每個(gè)渲染進(jìn)程都是獨(dú)立的油宜，它只關(guān)心它所運(yùn)行的 Web 頁(yè)面。
src 目錄結(jié)構(gòu)
在 Electron 目錄中怜姿，src 會(huì)包包含 main 和 renderer 兩個(gè)目錄慎冤。
main 目錄
main 目錄會(huì)包含 index.js 和 index.dev.js 兩個(gè)文件。
index.js：應(yīng)用程序的主文件沧卢，electron 也從這里啟動(dòng)的蚁堤，它也被用作 webpack 產(chǎn)品構(gòu)建的入口文件，所有的 main 進(jìn)程工作都應(yīng)該從這里開始搏恤。
index.dev.js：此文件專門用于開發(fā)階段违寿，因?yàn)樗鼤?huì)安裝 electron-debug 和 vue-devtools湃交。一般不需要修改此文件，但它可以擴(kuò)展開發(fā)的需求藤巢。
渲染進(jìn)程
renderer 是渲染進(jìn)程目錄搞莺，平時(shí)項(xiàng)目開發(fā)源碼的存放目錄，包含 assets掂咒、components才沧、router、store绍刮、App.vue 和 main.js温圆。
assets：assets 下的文件如（js、css）都會(huì)在 dist 文件夾下面的項(xiàng)目目錄分別合并到一個(gè)文件里面去孩革。components：此文件用于存放應(yīng)用開發(fā)的組件岁歉，可以是自定義的組件。router：如果你了解 vue-router膝蜈，那么 Electron 項(xiàng)目的路由的使用方式和 vue-router 的使用方式類似锅移。modules：electron-vue 利用 vuex 的模塊結(jié)構(gòu)創(chuàng)建多個(gè)數(shù)據(jù)存儲(chǔ)，并保存在 src/renderer/store/modules 中饱搏。
綜合示例
創(chuàng)建 Electron 跨平臺(tái)應(yīng)用之前非剃，需要先安裝一些常用的工具，如 Node推沸、vue 和 Electron 等备绽。
1、網(wǎng)易云音樂(lè)
electron-vue-cloud-music是一款使用Electron+Vue+Ant Design Vue技術(shù)開發(fā)跨平臺(tái)桌面應(yīng)用鬓催。下載鏈接：https://github.com/xiaozhu188/electron-vue-cloud-music肺素。具有如下特點(diǎn)：
拖拽播放
桌面歌詞
mini模式
自定義托盤右鍵菜單
任務(wù)欄縮略圖，歌曲操作
音頻可視化
自動(dòng)/手動(dòng)檢查更新
Nedb數(shù)據(jù)庫(kù)持久化
自定義安裝路徑深浮，安裝界面美化
瀏覽器中啟動(dòng)客戶端
Travis CL压怠，AppVeyor自動(dòng)構(gòu)建
換膚，下載飞苇，本地歌曲匹配菌瘫，網(wǎng)絡(luò)變化桌面通知，分享歌曲/歌單/MV/視頻等到QQ空間
登錄布卡，私人Fm雨让，歌單，專輯忿等，歌手栖忠，排行榜，MV，視頻庵寞，評(píng)論狸相，搜索，用戶捐川，動(dòng)態(tài)脓鹃，粉絲，關(guān)注古沥，云盤瘸右，收藏...
心動(dòng)模式，歌詞微調(diào)岩齿，下一首播放太颤，追加播放，單曲循環(huán)盹沈，隨機(jī)播放龄章，列表循環(huán)
路由導(dǎo)向，局部刷新襟诸，首頁(yè)欄目調(diào)整并持久化...
以下是部分運(yùn)行效果：
2瓦堵、qq音樂(lè)播放器
qq音樂(lè)播放器基于 electron-vue 開發(fā)的音樂(lè)播放器，界面模仿QQ音樂(lè)歌亲，使用的技術(shù)棧electron-vue+vue+vuex+vue-router+element- UI±酵裕可以使用如下的方式來(lái)運(yùn)行項(xiàng)目陷揪。
git clone https://github.com/SmallRuralDog/electron-vue-music.git
cd electron-vue-music
npm install
# 運(yùn)行開發(fā)模式
npmrundev
# 打包安裝文件
npmrun build
部分運(yùn)行效果如下圖。
