使用Electron搭建跨平台桌面應用

一、Electron簡介

Electron（最初名為Atom Shell）是GitHub開發的一個開源框架。它允許使用Node.js（作為後端）和Chromium（作為前端）完成桌面GUI應用程序的開發。Electron現已被多個開源Web應用程序用於前端與後端的開發，著名項目包括GitHub的Atom和微軟的Visual Studio Code。一個基礎的Electron包含三個文件：（元數據）、（代碼）和（圖形用戶界面）。框架由Electron可執行文件（Windows中為、macOS中為、Linux中為）提供。開發者可以自行添加標誌、自定義圖標、重命名或編輯Electron可執行文件。優點：

基於 Chromium 和 Node.js, 讓你可以使用 HTML, CSS 和 JavaScript 構建應用。

兼容 Mac, Windows 和 Linux， 它構建的應用可在這三個操作系統上面運行。

因為node沒有跨域、同時不用考慮瀏覽器兼容問題

打包發布方便、可以熱更新

缺點：

打包文件大

不支持XP

二、快速開始

Electron官方提供了一個名為electron-quick-start的示例項目

# Clone this repository

git clone https://github.com/electron/electron-quick-start

# Go into the repository

cd electron-quick-start

# Install dependencies

npm install

# Run the app

npm start

三、應用結構

的作用就是用來顯示後出現的那個窗口的。

是打開的窗口載入的入口頁面，可以看成是一個普通的靜態頁面。用來放業務相關JS的，和網頁JS的區別在於，這裡的JS不僅可以訪問DOM，還能使用Node.js所有的API。主進程和渲染進程

Electron 運行的腳本的進程被稱為主進程。 在主進程中運行的腳本通過創建web頁面來展示用戶界面。 一個 Electron 應用總是有且只有一個主進程。由於 Electron 使用了 Chromium 來展示 web 頁面，所以 Chromium 的多進程架構也被使用到。 每個 Electron 中的 web 頁面運行在它自己的渲染進程中。在普通的瀏覽器中，web頁面通常在一個沙盒環境中運行，不被允許去接觸原生的資源。 然而 Electron 的用戶在 Node.js 的 API 支持下可以在頁面中和操作系統進行一些底層交互。主進程使用實例創建頁面。 每個實例都在自己的渲染進程里運行頁面。 當一個實例被銷毀後，相應的渲染進程也會被終止。主進程管理所有的web頁面和它們對應的渲染進程。 每個渲染進程都是獨立的，它只關心它所運行的 web 頁面。在頁面中調用與 GUI 相關的原生 API 是不被允許的，因為在 web 頁面里操作原生的 GUI 資源是非常危險的，而且容易造成資源泄露。 如果你想在 web 頁面里使用 GUI 操作，其對應的渲染進程必須與主進程進行通訊，請求主進程進行相關的 GUI 操作。進程間通訊在 Electron 中, 我們有幾種方法可以在主進程和渲染進程之間進行通信。 例如使用和模塊發送消息，或使用remote模塊進行 RPC 方式的通信。相關API文檔和示例：Electron API 文檔https://electronjs.org/docsElectron API 演示https://github.com/demopark/electron-api-demos-Zh_CN

四、electron-builder打包工具的使用

全局安裝electron-builder

npm install electron-builder -g

electron-builder --version

編輯package.json文件，添加electron builder編譯所需要的屬性

"scripts": {

"pack": "electron-builder --dir",

"dist": "electron-builder"

},

"build": {

"appId": "com.example.helloworld",

"copyright":"example",

"productName":"HelloWorld",

"dmg":{

"window":{

"x":100,

"y":100,

"width":500,

"height":300

}

},

"win": {

"icon": "res/icon.ico"

}

},

一鍵打包

electron-builder -mwl

單獨打包mac：win：linux：一般在國內下載速度很慢需要切換打包源

ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/

五、使用electron-vue模版快速開發

# 安裝 vue-cli 和 腳手架樣板代碼

npm install -g vue-cli

vue init simulatedgreg/electron-vue my-project

文檔：https://simulatedgreg.gitbooks.io/electron-vue/content/cn/

參考文章：https://electronjs.org/docs

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！