是什么？

• Electron是由Github開發(fā)，用HTML，CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。
• Electron通過將Chromium和Node.js合并到同一個運行時環(huán)境中，并將其打包為Mac，Windows和Linux系統(tǒng)下的應用來實現這一目的。

為什么選擇electron？

先來看一下官方的兩句話

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

如果你可以建一個網站，你就可以建一個桌面應用程序。 Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術創(chuàng)建原生程序的框架，它負責比較難搞的部分，你只需把精力放在你的應用的核心上即可。

如果你是一個前端,你就明白這個有多簡單了

哦,對了!或許你還不知道，Visual Studio Code 、wordpress 和 slack 等客戶端都是基于 Electron 開發(fā)的。

1.可以用 Web 前端技術開發(fā)跨平臺的桌面客戶端

這是 Electron 最迷人的地方，究其根本是因為它是建立在 Chromium 和 Node 之上的，一個負責界面，一個負責背后的邏輯，有句話怎么說來著 你負責貌美如花，我負責賺錢養(yǎng)家，所以Electron 能夠開發(fā)跨平臺的桌面應用也就可以理解了。

作為一名前端小菜鳥來說:

• 可以用自己熟悉的方式去寫應用界面，ps: 不要和我說什么java、c語言,鄙人行走江湖就一把js,遇到需求就是干,學好js,走遍天下都不怕(????)
• 邏輯部分也還是 JS，如果你精通 Node ,那就更好了,后端也一并寫了，ps: sorry,會js就是無所不能,我不是針對某個語言,我是說在座的所有,都是。。。(開玩笑,不要打我╥﹏╥...)

so,一個 Web 前端開發(fā)者可以花很少的成本去上手 Electron，而相比于以前開發(fā)多平臺客戶端的成本，利用 ELectron 開發(fā)多平臺客戶端的成本是極低的

2.可以從 Node 的生態(tài)獲得極大的助力

因為 Electron 是基于 Node 的，意味著，Node 這個大生態(tài)下的模塊，Electron 也都可以用，這減少了很多造輪子的時間，你要寫一些邏輯將首先思考有沒有成熟的模塊可以引入，而不是自己吭哧吭哧閉門造車，自己造時間精力會大量得被消耗，上路還可能翻車。

3.為什么需要客戶端?

既然 Electron 是用 Web 技術寫客戶端，那么看上去 Electron 要做的事，可以搬到網站上，為什么還要搬到客戶端，這里有3個角度的回答:

• 用戶角度： 客戶端是一款獨立的軟件，其綜合體驗一般都是比網站高的，尤其是涉及到「工具」范疇的應用，此外，特定的用戶群體也會有類似的使用習慣
• 發(fā)行方角度： 客戶端是另一種產品形式，是一種產品的分發(fā)方式和入口，客戶端可以實現很多本地應用獨有的需求去觸達用戶，也能提供更加可靠的服務
• 開發(fā)角度： 終于...不用考慮瀏覽器兼容了！！！，Chromium 也足夠開發(fā)使用一些先進的 CSS 或 JS 特性，我們現在還沒計劃引入 webpack 和 babel，因為現在好像夠用，克制才是愛，除了寫起來爽，對于開發(fā)來說，終于跳出了瀏覽器的沙盒，你可以自己去控制 Electron 中的「瀏覽器」，莫名的開心

這些綜合起來回答這個小節(jié)的問題就是，用 Electron 開發(fā)客戶端，用戶體驗好，開發(fā)麻煩小，功能更強大，世界更和平~~~

怎么用？

從開發(fā)的角度來看, Electron application 本質上是一個 Node. js 應用程序。 與 Node.js 模塊相同，應用的入口是 package.json 文件。 一個最基本的 Electron 應用一般來說會有如下的目錄結構：

your-app/ ├── package.json ├── main.js └── index.html

為你的新Electron應用創(chuàng)建一個新的空文件夾。 打開你的命令行工具，然后從該文件夾運行npm init

npm init

npm 會幫助你創(chuàng)建一個基本的 package.json 文件。 其中的 main 字段所表示的腳本為應用的啟動腳本，它將會在主進程中執(zhí)行。 如下片段是一個 package.json 的示例：

{"name": "your-app","version": "0.1.0","main": "main.js" }

注意：如果 main 字段沒有在 package.json 中出現，那么 Electron 將會嘗試加載 index.js 文件（就像 Node.js 自身那樣）。 如果你實際開發(fā)的是一個簡單的 Node 應用，那么你需要添加一個 start 腳本來指引 node 去執(zhí)行當前的 package：

{"name": "your-app","version": "0.1.0","main": "main.js","scripts": {"start": "electron ."} }

安裝 Electron

現在，您需要安裝electron。 我們推薦的安裝方法是把它作為您 app 中的開發(fā)依賴項，這使您可以在不同的 app 中使用不同的 Electron 版本。 在您的app所在文件夾中運行下面的命令：

npm install --save-dev electron

開發(fā)一個簡易的 Electron

Electron apps 使用JavaScript開發(fā)，其工作原理和方法與Node.js 開發(fā)相同。 electron模塊包含了Electron提供的所有API和功能，引入方法和普通Node.js模塊一樣：

const electron = require('electron')

electron 模塊所提供的功能都是通過命名空間暴露出來的。 比如說： electron.app負責管理Electron 應用程序的生命周期， electron.BrowserWindow類負責創(chuàng)建窗口。 下面是一個簡單的main.js文件，它將在應用程序準備就緒后打開一個窗口：

const { app, BrowserWindow } = require('electron')function createWindow () { // 創(chuàng)建瀏覽器窗口let win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}})// 加載index.html文件win.loadFile('index.html') }app.on('ready', createWindow)

您應當在 main.js 中創(chuàng)建窗口，并處理程序中可能遇到的所有系統(tǒng)事件。 下面我們將完善上述例子，添加以下功能：打開開發(fā)者工具、處理窗口關閉事件、在macOS用戶點擊dock上圖標時重建窗口，添加后，main. js 就像下面這樣：

const { app, BrowserWindow } = require('electron')// 保持對window對象的全局引用，如果不這么做的話，當JavaScript對象被 // 垃圾回收的時候，window對象將會自動的關閉 let winfunction createWindow () {// 創(chuàng)建瀏覽器窗口。win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}})// 加載index.html文件win.loadFile('index.html')// 打開開發(fā)者工具win.webContents.openDevTools()// 當 window 被關閉，這個事件會被觸發(fā)。win.on('closed', () => {// 取消引用 window 對象，如果你的應用支持多窗口的話，// 通常會把多個 window 對象存放在一個數組里面，// 與此同時，你應該刪除相應的元素。win = null}) }// Electron 會在初始化后并準備 // 創(chuàng)建瀏覽器窗口時，調用這個函數。 // 部分 API 在 ready 事件觸發(fā)后才能使用。 app.on('ready', createWindow)// 當全部窗口關閉時退出。 app.on('window-all-closed', () => {// 在 macOS 上，除非用戶用 Cmd + Q 確定地退出，// 否則絕大部分應用及其菜單欄會保持激活。if (process.platform !== 'darwin') {app.quit()} })app.on('activate', () => {// 在macOS上，當單擊dock圖標并且沒有其他窗口打開時，// 通常在應用程序中重新創(chuàng)建一個窗口。if (win === null) {createWindow()} })// 在這個文件中，你可以續(xù)寫應用剩下主進程代碼。 // 也可以拆分成幾個文件，然后用 require 導入。

最后，創(chuàng)建你想展示的 index.html：

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Hello World!</title></head><body><h1>Hello World!</h1>We are using node <script>document.write(process.versions.node)</script>,Chrome <script>document.write(process.versions.chrome)</script>,and Electron <script>document.write(process.versions.electron)</script>.</body> </html>

啟動你的應用

在創(chuàng)建并初始化完成 main.js、 index.html和package.json之后，您就可以在當前工程的根目錄執(zhí)行 npm start 命令來啟動剛剛編寫好的Electron程序了。

參考文章：

Electron，從玩玩具的心態(tài)開始，到打造出一款越來越優(yōu)秀的桌面客戶端產品

轉載于:https://www.cnblogs.com/loveyt/p/11005336.html

總結

以上是生活随笔為你收集整理的electron——初探的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。