點擊上方 "程序員小樂"關注, 星標或置頂一起成長
每天凌晨00點00分, 第一時間與你相約
每日英文
Don't put your happiness in the hands of someone else. If you really want to be happy, you have to find this happiness within yourself.
不要把自己的快樂寄託在別人身上，真正的快樂，必須來源於自己。
每日掏心話
每一次的容忍，都是一次愛的消耗。請珍稀我的每一次容忍與退讓，因為那是我對你愛的信用額度，但再高的額度也終有透支的一天。
來自：xiangzhihong | 責編：樂樂
鏈接：segmentfault.com/a/1190000021376934
程序員小樂(ID:study_tech)第 786 次推文 圖片來自網絡
往日回顧：大公司為什麼都有API網關？聊聊API網關的作用
00 前言
雖然 B/S 是目前開發的主流，但是 C/S 仍然有很大的市場需求。受限於瀏覽器的沙盒限制，網頁應用無法滿足某些場景下的使用需求，而桌面應用可以讀寫本地文件、調用更多系統資源，再加上 Web 開發的低成本、高效率的優勢，這種跨平臺方式越來越受到開發者的喜愛。
Electron 是一個基於 Chromium 和 Node.js，使用 HTML、CSS 和 JavaScript 來構建跨平臺應用的跨平臺開發框架，兼容 Mac、Windows 和 Linux。目前，Electron 已經創建了包括 VScode 和 Atom 在內的大量應用。
01 正文
環境搭建
創建 Electron 跨平臺應用之前，需要先安裝一些常用的工具，如 Node、vue 和 Electron 等。
安裝Node
進入 Node 官網下載頁 http://nodejs.cn/download/，然後下載對應的版本即可，下載時建議下載穩定版本。如果安裝 Node 使用 Homebrew 方式，建議安裝時將 npm 倉庫鏡像改為淘寶鏡像，如下所示。
npm config set registry http://registry.npm.taobao.org/
或者
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝/升級 vue-cli
先執行以下命令，確認下本地安裝的 vue-cli 版本。
vue -V
如果沒有安裝或者不是最新版，可以執行以下命令安裝/升級。
npm install @vue/cli -g
安裝 Electron
使用如下命令安裝 Electron 插件。
npm install -g electron
或者
cnpm install -g electron
為了驗證是否安裝成功，可以使用如下的命令。
electron --version
創建運行項目
Electron 官方提供了一個簡單的項目，可以執行以下命令將項目克隆到本地。
git clone https://github.com/electron/electron-quick-start
然後在項目中執行如下命令即可啟動項目。
cd electron-quick-start
npm install
npm start
啟動後項目的效果如下圖。
除此之外，我們可以使用 vue-cli 腳手架工具來創建項目。
vue init simulatedgreg/electron-vue
然後根據下面的提示一步步選中選項即可創建項目，如下所示。
然後，使用 npm install 命令安裝項目所需要的依賴包，安裝完成之後，可以使用 npm run dev 或 npm run build 命令運行 electron-vue 模版應用程序，運行效果如下圖所示。
Electron 源碼目錄
Electron 的源代碼主要依據 Chromium 的拆分約定被拆成了許多部分。為了更好地理解源代碼，您可能需要了解一下 Chromium 的多進程架構。
Electron 源碼目錄結構和含義具體如下：
Electron
├──atom - Electron 的源代碼
| ├── app - 系統入口代碼
| ├── browser - 包含了主窗口、UI 和其他所有與主進程有關的東西，它會告訴渲染進程如何管理頁面
| | ├── lib - 主進程初始化代碼中 JavaScript 部分的代碼
| | ├── ui - 不同平臺上 UI 部分的實現
| | | ├── cocoa - Cocoa 部分的源代碼
| | | ├── gtk - GTK+ 部分的源代碼
| | | └── win - Windows GUI 部分的源代碼
| | ├── default_app - 在沒有指定 app 的情況下 Electron 啟動時默認顯示的頁面
| | ├── api - 主進程 API 的實現
| | | └── lib - API 實現中 Javascript 部分的代碼
| | ├── net - 網絡相關的代碼
| | ├── mac - 與 Mac 有關的 Objective-C 代碼
| | └── resources - 圖標，平臺相關的文件等
| ├── renderer - 運行在渲染進程中的代碼
| | ├── lib - 渲染進程初始化代碼中 JavaScript 部分的代碼
| | └── api - 渲染進程 API 的實現
| | └── lib - API 實現中 Javascript 部分的代碼
| └── common - 同時被主進程和渲染進程用到的代碼，包括了一些用來將 node 的事件循環
| | 整合到 Chromium 的事件循環中時用到的工具函數和代碼
| ├── lib - 同時被主進程和渲染進程使用到的 Javascript 初始化代碼
| └── api - 同時被主進程和渲染進程使用到的 API 的實現以及 Electron 內置模塊的基礎設施
| └── lib - API 實現中 Javascript 部分的代碼
├── chromium_src - 從 Chromium 項目中拷貝來的代碼
├── docs - 英語版本的文檔
├── docs-translations - 各種語言版本的文檔翻譯
├── spec - 自動化測試
├── atom.gyp - Electron 的構建規則
└── common.gypi - 為諸如 `node` 和 `breakpad` 等其他組件準備的編譯設置和構建規則
平時開發時，需要重點關注的就是 src、package.json 和 appveyor.yml 目錄。除此之外，其他需要注意的目錄如下：
script - 用於諸如構建、打包、測試等開發用途的腳本
tools - 在 gyp 文件中用到的工具腳本，但與>
vendor - 第三方依賴項的源代碼，為了防止人們將它與 Chromium 源碼中的同名目錄相混淆， 在這裡我們不使用 third_party 作為目錄名
node_modules - 在構建中用到的第三方 node 模塊
out - ninja 的臨時輸出目錄
dist - 由腳本>
external_binaries - 下載的不支持通過 gyp 構建的預編譯第三方框架
應用工程目錄
使用 electron-vue 模版創建的 Electron 工程結構如下圖。
和前端工程的項目結構類似，Electron 項目的目錄結構如下所示：
electron-vue：Electron模版配置。
build：文件夾，用來存放項目構建腳本。
config：中存放項目的一些基本配置信息，最常用的就是端口轉發。
node_modules：這個目錄存放的是項目的所有依賴，即 npm install 命令下載下來的文件。
src：這個目錄下存放項目的源碼，即開發者寫的代碼放在這裡。
static：用來存放靜態資源。
index.html：則是項目的首頁、入口頁，也是整個項目唯一的HTML頁面。
package.json：中定義了項目的所有依賴，包括開發時依賴和發佈時依賴。
對於開發者來說， 90% 的工作都是在 src 中完成，src 中的文件目錄如下。
Electron 應用程序分成三個基礎模塊：主進程、進程間通信和渲染進程。
1、主進程
Electron 運行 package.json 的 main 腳本（background.js）的進程被稱為主進程。在主進程中運行的腳本通過創建web頁面來展示用戶界面。一個 Electron 應用總是有且只有一個主進程。
2、渲染進程
由於 Electron 使用了 Chromium 來展示 Web 頁面，所以 Chromium 的多進程架構也被使用到。每個 Electron 中的 Web 頁面運行在它自己的渲染進程中。在普通的瀏覽器中，Web 頁面通常在一個沙盒環境中運行，不被允許去接觸原生的資源。然而 Electron 允許用戶在 Node.js 的 API 支持下可以在頁面中和操作系統進行一些底層交互。
3、主進程與渲染進程通信
主進程使用 BrowserWindow 實例創建頁面。每個 BrowserWindow 實例都在自己的渲染進程裡運行頁面。當一個 BrowserWindow 實例被銷燬後，相應的渲染進程也會被終止。主進程管理所有的 Web 頁面和它們對應的渲染進程。每個渲染進程都是獨立的，它只關心它所運行的 Web 頁面。
src 目錄結構
在 Electron 目錄中，src 會包包含 main 和 renderer 兩個目錄。
main 目錄
main 目錄會包含 index.js 和 index.dev.js 兩個文件。
index.js：應用程序的主文件，electron 也從這裡啟動的，它也被用作 webpack 產品構建的入口文件，所有的 main 進程工作都應該從這裡開始。
index.dev.js：此文件專門用於開發階段，因為它會安裝 electron-debug 和 vue-devtools。一般不需要修改此文件，但它可以擴展開發的需求。
渲染進程
renderer 是渲染進程目錄，平時項目開發源碼的存放目錄，包含 assets、components、router、store、App.vue 和 main.js。
assets：assets 下的文件如（js、css）都會在 dist 文件夾下面的項目目錄分別合併到一個文件裡面去。components：此文件用於存放應用開發的組件，可以是自定義的組件。router：如果你瞭解 vue-router，那麼 Electron 項目的路由的使用方式和 vue-router 的使用方式類似。modules：electron-vue 利用 vuex 的模塊結構創建多個數據存儲，並保存在 src/renderer/store/modules 中。
綜合示例
1、網易雲音樂
electron-vue-cloud-music是一款使用Electron+Vue+Ant Design Vue技術開發跨平臺桌面應用。下載鏈接：https://github.com/xiaozhu188/electron-vue-cloud-music。具有如下特點：
拖拽播放
桌面歌詞
mini模式
自定義托盤右鍵菜單
任務欄縮略圖，歌曲操作
音頻可視化
自動/手動檢查更新
Nedb數據庫持久化
自定義安裝路徑，安裝界面美化
瀏覽器中啟動客戶端
Travis CL，AppVeyor自動構建
換膚，下載，本地歌曲匹配，網絡變化桌面通知，分享歌曲/歌單/MV/視頻等到QQ空間
登錄，私人Fm，歌單，專輯，歌手，排行榜，MV，視頻，評論，搜索，用戶，動態，粉絲，關注，雲盤，收藏...
心動模式，歌詞微調，下一首播放，追加播放，單曲循環，隨機播放，列表循環
路由導向，局部刷新，首頁欄目調整並持久化...
以下是部分運行效果：
2、qq音樂播放器
qq音樂播放器基於 electron-vue 開發的音樂播放器，界面模仿QQ音樂，使用的技術棧electron-vue+vue+vuex+vue-router+element- UI。可以使用如下的方式來運行項目。
git clone https://github.com/SmallRuralDog/electron-vue-music.git
cd electron-vue-music
npm install
# 運行開發模式
npm run dev
# 打包安裝文件
npm run build
部分運行效果如下圖。
歡迎在留言區留下你的觀點，一起討論提高。如果今天的文章讓你有新的啟發，學習能力的提升上有新的認識，歡迎轉發分享給更多人。
猜你還想看
阿里、騰訊、百度、華為、京東最新面試題彙集
Java 多態的實現機制，看了都說好！
中央政治局會議：疫情防控工作取得階段性成效，但拐點尚未到來
SpringBoot實現過濾器、攔截器與切片
關注訂閱號「程序員小樂」，收看更多精彩內容
嘿，你在看嗎？
閱讀更多 程序員小樂 的文章
