Electronvue開發實戰0——Electronvue入門

NO IMAGE

原文首發於我的博客,歡迎點擊查看獲得更好的閱讀體驗~

前言

前段時間,我用electron-vue開發了一款跨平臺(目前支持Mac和Windows)的免費開源的圖床上傳應用——PicGo,在開發過程中踩了不少的坑,不僅來自應用的業務邏輯本身,也來自electron本身。在開發這個應用過程中,我學了不少的東西。因為我也是從0開始學習electron,所以很多經歷應該也能給初學、想學electron開發的同學們一些啟發和指示。故而寫一份Electron的開發實戰經歷,用最貼近實際工程項目開發的角度來闡述。希望能幫助到大家。

預計將會從幾篇系列文章或方面來展開:

  1. electron-vue入門
  2. Main進程和Renderer進程的簡單開發
  3. 引入基於Lodash的json database——lowdb
  4. 跨平臺的一些兼容措施
  5. 通過CI發佈以及更新的方式
  6. …(想到再寫)

說明

PicGo是採用electron-vue開發的,所以如果你會vue,那麼跟著一起來學習將會比較快。如果你的技術棧是其他的諸如reactangular,那麼純按照本教程雖然在render端(可以理解為頁面)的構建可能學習到的東西不多,不過在main端(electron的主進程)應該還是能學習到相應的知識的。

Electron簡要介紹

一開始學習electron的時候,我被官網文檔密密麻麻的概念所鎮住了:

Electronvue開發實戰0——Electronvue入門

概念太多,沒有辦法一下子接受。所以我自己學習完electron開發後,做了一張圖。來看看圖理解一下什麼是electron,以及它包括了啥:

Electronvue開發實戰0——Electronvue入門

圖解

electron由Node.js+Chromium+Native APIs構成。你可以理解成,它是一個得到了Node.js和基於不同平臺的Native APIs加強的Chromium瀏覽器,可以用來開發跨平臺的桌面級應用。

它的開發主要涉及到兩個進程的協作——Main(主)進程和Renderer(渲染)進程。簡單的理解兩個進程的作用:

  1. Main進程主要通過Node.js、Chromium和Native APIs來實現一些系統以及底層的操作,比如創建系統級別的菜單,操作剪貼板,創建APP的窗口等。
  2. Renderer進程主要通過Chromium來實現APP的圖形界面——就是平時我們熟悉的前端開發的部分,不過得到了electron給予的加強,一些Node的模塊(比如fs)和一些在Main進程裡能用的東西(比如Clipboard)也能在Render進程裡使用。
  3. Main進程和Renderer進程通過ipcMainipcRenderer來進行通信。通過事件監聽和事件派發來實現兩個進程通信,從而實現Main或者Renderer進程裡不能實現的某些功能。

進一步介紹

說完了electron的組成和需要我們開發的部分,來說說它的優缺點。

優點:

  1. 從上述介紹可以發現,除了不同平臺Native APIs不同以外,Node.js和Chromium都是跨平臺的工具,這也為electron生來就能做跨平臺的應用開發打下基礎。
  2. 開發圖形界面前所未有的容易——比起C#\QT\MFC等傳統圖形界面開發技術,通過前端的圖形化界面開發明顯更加容易和方便。得益於Chromium,這種開發模式得以實現。
  3. 成熟的社區、活躍的核心團隊,大部分electron相關的問題你可以在社區、github issues、Stack Overflow裡得到答案。開發的障礙進一步降低。

缺點:

  1. 應用體積過大。由於內部包裝了Chromium和Node.js,使得打包體積(使用electron-builder)在mac上至少是45M+起步,在windows上稍微好一點,不過也要35M+起步。不過相比早期打包體積100M+起步來說,已經好了不少。不過解壓後安裝依然是100M+起步。
  2. 受限於Node.js和Native APIs的一些支持度的問題,它依然有所侷限。一些功能依然無法實現。比如無法獲取在系統文件夾裡選中的文件,而必須調用web的File或者node的fs接口才可以訪問系統文件。
  3. 應用性能依舊是個問題。所以做輕量級應用沒問題,重量級應用尤其是CPU密集型應用的話很是問題。

electron-vue的簡要介紹

由於我自己是Vue的技術棧,所以就想在electron裡使用vue。而vue只是在renderer進程裡使用的框架,不涉及到main進程。如下圖:

Electronvue開發實戰0——Electronvue入門

因此react、angluar以及其他的前端開發框架同樣適用。

不過想要做到把vue和electron結合起來並不是一件特別容易的事。為了方便開發,我使用的是electron-vue,這個是開發者SimulatedGREG參考vue-cli的webpack模板骨架搭建的electron和vue結合的開發腳手架。由於我對於vue-cli非常熟悉,所以上手electron-vue非常容易。相比很多其他的教程或者其他electron+前端開發框架的組裝方案,electron-vue給我感覺最好的是如下:

  1. 只有一個package.json。而大部分其他的項目結構依然在使用兩個package.json來應對main進程和renderer進程的依賴庫。
  2. 內建完整的vue全家桶,省去再次配置vue-router和vuex的一些初期操作。
  3. 內建完整的webpack開發、生產等配置,開發環境舒適。
  4. 內建完整的開發、構建等npm scripts,使用非常方便。
  5. 內建完整的Travis-ci、Appveyor配置腳本,只需少數修改就能做到利用CI自動構建的應用發佈。
  6. 完善的文檔,清晰的項目結構。

大體的項目結構如下,根據選擇的不同設置結構會有所不同:

my-project
├─ .electron-vue
│  └─ <build/development>.js files
├─ build
│  └─ icons/
├─ dist
│  ├─ electron/
│  └─ web/
├─ node_modules/
├─ src
│  ├─ main # 主進程
│  │  ├─ index.dev.js
│  │  └─ index.js
│  ├─ renderer # 渲染進程
│  │  ├─ components/
│  │  ├─ router/
│  │  ├─ store/
│  │  ├─ App.vue
│  │  └─ main.js
│  └─ index.ejs
├─ static/
├─ test
│  ├─ e2e
│  │  ├─ specs/
│  │  ├─ index.js
│  │  └─ utils.js
│  ├─ unit
│  │  ├─ specs/
│  │  ├─ index.js
│  │  └─ karma.config.js
│  └─ .eslintrc
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md

可以看到我們主要關注的兩個文件夾:src/mainsrc/renderer分別對應的是main進程和renderer進程。我們的開發大體上也是圍繞這兩個文件夾展開。

electron-vue安裝

參考electron-vue官方的文檔給出的說明,搭建electron-vue的腳手架非常方便,使用vue-cli來安裝它的模板即可:

# 如果你沒有vue-cli的話需要全局安裝
npm install -g vue-cli
# 然後使用vue-cli來安裝electron-vue的模板
vue init simulatedgreg/electron-vue my-project
# 安裝依賴
cd my-project
yarn # or npm install
# 進入開發模式
yarn run dev # or npm run dev

如果你是windows用戶,在安裝期間遇到了關於node-gyp、C++庫等方面的問題的話,請參考官方文檔給出的解決辦法

如果上述都沒有問題,那麼你將會看到如下界面:

Electronvue開發實戰0——Electronvue入門

總結

作為開篇,內容不多。不過把東西說清楚是必須的。對於electron開發其實是有兩種聲音的:

  1. 很簡單,不過就是web開發換了個殼
  2. 很難,需要了解很多原生的概念,不知道要怎麼入手

其實從本文介紹完,你應該要有一個粗略的認識。electron的開發其實包括了兩個部分,一個是main進程的相關開發,一個是renderer進程的相關開發。對於renderer進程的開發對於大多數前端開發人員來說不難。main進程的相關開發,如果你想要把electron的main進程的所以特性都學一遍、都用一遍,確實是需要不少時間的。不過如果是從需求出發,從工程本身的需要出發,那麼只需要用到的時候再去學習即可。不過要對Node.js能做到的事有個概念——它並不是萬能的。

下一篇文章將會正式開啟electron的開發,如果你對此有興趣不妨關注本系列的進展。

相關文章

Electronvue開發實戰3——跨平臺的一些兼容措施

Electronvue開發實戰2——引入基於Lodash的JSON數據庫lowdb

利用NodeGithubProfileSummary來生成你的Github簡歷吧

Electronvue開發實戰1——Main進程和Renderer進程的簡單開發