初識Electron

時間 2019-11-15

標籤 electron 简体版

原文原文鏈接

以前有個需求，說是可能會用到electron，因而稍微瞭解了一下，順便作個記錄。
對於初學者而言，我最關心的每每不是這個框架的內核，而是我多久能打出HelloWord，能不能知足業務需求，我投入的時間與我收穫的東西等不等值（固然這一點毋庸置疑是不等值的😭）？
雖然對electron什麼也不懂，不要緊，上來就是萌新三連先百度一哈看看。css

&01.啥是electron？

感謝seo優化邏輯，百度第一行這串字html

使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用

就很好的解釋了啥是electron。什麼？你還不懂？好吧，我也不懂但我看着解釋一哈。前端

桌面應用就是針對於pc端的各類系統（win/mac/linux）的應用程序。就好像開發移動端的小程序同樣，用前端語言模擬開發Android/ios應用，electron能用前端語言開發pc端的應用。vue

electron做爲一種爲前端開發者（或說是js/html/css語言的使用者）所開發的一種能用前端語言生成桌面應用的框架。
你只須要要和往常同樣編寫你的前端代碼，諸如佈局樣式，頁面交互，數據處理，請求響應等等。而當你編寫完成，下達了打包的命令後，electron會幫你生成對應的桌面應用。
也就是說，若是沒什麼細節的配置要求，你只管寫你的前端代碼，怎麼生成桌面應用就是一句命令的事。linux

啥是electron？webpack

electron是個框架，給它個命令，它能生成桌面應用，Over.ios

&02.爲啥用electron？

貼一下以前整理的幾點筆記：git

簡要web

Electron 跨系統開發框架
Electron 經過將Chromium和Node.js合併到同一個運行時環境中，並將其打包爲 Mac ，Windows 和 Linux 系統下的應用來實現這一目的。同時也支持跨平臺開發，諸如移動端APP,小程序,H5等，但適應性不及原生的跨平臺開發框架(Weex,DCloud...)

框架特性vue-router

開源
客戶端vs瀏覽器端（安全性，用戶體驗，本地工具...）
適應多系統的運行環境
適應系統下原生的通信聯動（系統提示/任務欄常駐/崩潰監控/開機自啓...）
我的信息、操做日誌的本地化數據庫存儲
適配部分 chrome 的 crx 擴展插件
打包文件大(幾十兆，至少包含一個瀏覽器程序大小)，吃內存 ## 開發 ##
在 /src/renderer/ 渲染進程內進行 vue 項目開發;vue配套的工具插件(axios,vuex,router...)照常使用
一個主進程與多個渲染進程模擬多頁面/多彈窗的情景
Electron 版本發佈至關頻繁
Electron 不支持 Web Worker 多進程，使用 background process & 緩存機制
不一樣系統間存在部分api差別
自動更新 autoUpdater win&mac , 不支持Linux
NeDB 嵌入式持久數據庫 & 瀏覽器端緩存機制
使用fs操做系統文件

爲啥用electron？

不須要額外的編寫，把原來寫好的前端代碼搬到electron對應渲染目錄下便可，快速構建一個桌面應用，還能同時適配（並不是百分百適配）三個操做系統，是網頁服務端向PC應用端過渡的一個不錯方案，Over.

&03.怎麼用electron？

emm...那我要怎麼用呢？若是僅僅是知道了啥是electron，那想真正玩起來仍是蠻麻煩的，你可能還會遇到很多問題，仍是要看很多博客文章，固然這都是正常的。

打開官網，快速瀏覽下網站，你會發現官網有一個快速入門的demo。

我下過來看了一哈，感受就真的是一個入門demo，沒啥特殊的。反卻是怎麼把入門demo跑起來倒花了我點時間，由於electron的下載可能須要外網資源，因此會遇到安裝失敗的狀況，解決辦法就是使用cnpm淘寶鏡像源。

//npm安裝electron要從國外下載一個45MB左右的zip包，
//特別的慢（8KB...），因此咱們能夠採用下面的這條安裝命令。
//條安裝命令會從淘寶的鏡像站下載這個zip包，速度很快。 
$ npm install electron -g --registry=http://registry.npm.taobao.org
// 固然你也可使用cnpm來全局安裝electron 
$ npm install cnpm -g --registry=http://registry.npm.taobao.org 
$ cnpm install electron -g

你能夠用electron白手起家，跟着demo本身邊學邊造一個工程出來；也能夠在demo的基礎上改改接着開發；或者呢找找看有沒有腳手架之類的。

由於我以前是學習的vue，因此看到 vue-cli + electron 的關鍵字後就感到特別親切。

主要依賴&版本

"electron": "^2.0.6", // latest 4.0.3| beta 5.0.0 | nightly 6.0.0, 
"vue": "^2.5.16",
"vue-cli": "^2.9.6",
"vue-electron": "^1.0.6", 
"vue-router": "^3.0.1", 
"vuex": "^3.0.1", 
"vuex-electron": "^1.0.0", 
"iview": "^3.2.2", 
"axios": "^0.18.0"

起步

P.S. vue-cli 爲 2.0 版本

# 安裝 vue-cli 和 腳手架樣板代碼 
# 此模板依賴的 electron 默認爲"^2.0.6"，需求高版本的可自行更改
npm install -g vue-cli vue init simulatedgreg/electron-vue my-project 
# install dependencies
npm install
# serve with hot reload at localhost:9080
npm run dev
# build electron application for production
npm run build
# pack electron application
npm run pack

開發
在/src/renderer/ 目錄下進行 vue 項目開發
打包結果會在build文件夾（仍是dist來着具體我忘了）生成幾個exe安裝程序。
把exe文件複製到桌面，安裝並打開便可。

怎麼用electron？

使用vue-cli腳手架傻瓜式建立一個項目出來，並在/src/renderer/ 目錄下進行 vue 項目開發,
開發以前先看看Electron|API裏有沒有貼合業務需求的，有就儘可能拿來用，沒有再本身寫,Over.

&04.EX-electron結語

即便咱們什麼都不寫，一個空的electron工程打包完也有20mb左右的大小，我猜這是其內部瀏覽器的大小。

咱們甚至能夠說electron就是一個內部封裝了一整個chrome的工程。它之因此能適配端系統，就是由於在三個系統上使用的都是同一個chrome瀏覽器的內核。

咱們的electron開發視圖也都是在這個內置的瀏覽器中顯示，而不是咱們經常使用的外部真實的瀏覽器，並且在這個內部瀏覽器中你也能使用開發者模式進行調試，使用chrome的大部分功能，同時又多了許多與操做系統交互的api。

至關於原本寫的項目須要作不一樣瀏覽器適配，如今用electron就能夠只寫chrome的適配（不用IE！！！）。

而後原來是 直接在不定瀏覽器中訪問的方式改爲在一個提供且僅提供chrome瀏覽器功能的程序中訪問業務。

固然，作窗口分辨率適配仍是要的。你能夠用它快速地搭建本身的桌面小應用。

最後，咱們的需求是既要網頁應用也可能要桌面應用，和上級溝通了一哈，選擇了下面的第三種方案A。

方案C
├─── vue本地開發=>vue生產發版=>網頁應用
│   ├── vue迭代版本 ↑
│   ├── vue外套electron ↓
└─── electron生產發版=>桌面應用
** 一次迭代更新vue&electron，兩個都要從新發版靜態文件。

方案B
├─── vue本地開發=>vue生產發版=>網頁應用=>close
│   ├── vue迭代版本 ↑ 
│   ├── vue總體搬遷electron ↓
│   ├── electron內部開發 ↓
└─── electron生產發版=>桌面應用=>桌面&網頁應用
** 一次迭代更新electron，須要時間搬遷原工程。

方案A
├─── vue本地開發=>vue生產發版=>網頁應用
│   └───vue迭代版本 ↑ 
└─── electron 近空項目生產發版=>桌面應用
**[打開程序後僅提供vue網頁工程的網址訪問，相似electron打開一個百度頁面的程序窗口]
** 一次迭代更新vue，Over.

End，由於對electron的業務需優先級不高，因此這個需求也先擱置下來了。我也沒作更深刻的研究，初識electron就到這了。

之後有時間的話能夠用這個作個小程序玩玩。