Electron是什麼？

一、Electron是什麼意思

Electron是一個使用HTML、CSS和JavaScript構建跨平台桌面應用程序的開源框架。它最初是由GitHub創建的，以前稱為Atom Shell，因為Atom編輯器是使用它構建的。隨着Atom的發展，GitHub將其作為開源項目發佈，以幫助開發人員構建跨平台桌面應用程序。在Electron中，開發人員可以使用Web技術來構建跨平台應用程序，這使得應用程序可以在不同的操作系統上具有一致的外觀和行為。

Electron的核心特點是可以使用Web技術來構建桌面應用程序，它能夠將JavaScript、HTML、CSS打包到一個可執行文件中，與原生應用程序一樣運行，並且跨平台支持：

function createWindow () {
  // 創建瀏覽器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加載index.html文件
  win.loadFile('index.html')

  // 打開開發者工具
  win.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

二、Electron是什麼牌子

在開發中使用Electron非常流行，很多著名的公司和項目都在使用它。例如：

GitHub: Atom、GitHub Desktop
Microsoft: Visual Studio Code、Microsoft Teams
Slack: Slack Desktop
Discord: Discord
Figma: Figma

三、Electron是什麼技術

Electron基於Node.js和Chromium，其中Node.js提供了對原生API的訪問，而Chromium則提供了對Web技術的支持。通過這兩者的結合，Electron可以讓開發人員非常容易地構建跨平台桌面應用程序。同時，Electron也提供了豐富的API，讓開發人員可以使用很多原生應用程序才有的功能，比如：系統通知、系統托盤、文件系統訪問等。

// 使用Electron提供的系統托盤API
const { Tray } = require('electron')

// 加載圖標
let trayIcon = nativeImage.createFromPath('path/to/tray/icon')

// 創建系統托盤
let tray = new Tray(trayIcon)

// 設置托盤鼠標懸停時的文本
tray.setToolTip('This is my application')

// 點擊托盤時觸發的事件
tray.on('click', () => {
  // 顯示主窗口
})

四、Electron是什麼項目

Electron是一個開源項目，源代碼託管在GitHub上。任何人都可以貢獻代碼、提交bug報告、提出特性請求等。此外，Electron的官方網站也提供了大量的文檔和教程，幫助開發人員快速上手。GitHub還為Electron提供了一個生態系統，開發人員可以從中選擇和使用各種插件和庫，包括模板、插件和開發工具。

五、Electron是什麼軟件

Electron本身不是一個軟件，而是一個框架，用於構建跨平台桌面應用程序。開發人員可以使用JavaScript、HTML、CSS等Web技術來構建這些應用程序，並打包成單個可執行文件。最終的應用程序可以在Windows、macOS和Linux等操作系統上運行，而不需要進行任何修改。

六、Electron什麼意思

Electron的名字起源於電子-激勵樂隊（Electronic – Music Duo），這是一支由Tom Rowlands和Ed Simons創立的英國電子音樂組合。在創作音樂時，Tom和Ed使用的是現成的樂器聲音和採樣，他們將這些元素組合在一起，形成了獨特的音樂。這與Electron的實現方式類似 —— 將現成的HTML、CSS和JavaScript元素組合在一起，形成一個新的桌面應用程序。

七、Electron是什麼文檔

Electron的官方網站提供了非常詳細的文檔，其中包括入門指南、API參考、教程以及各種有用的資源和工具。

入門指南介紹了如何準備開發環境、創建第一個Electron應用程序，以及如何調試應用程序。API參考列出了Electron的所有API和類，以及如何使用它們。教程涵蓋了很多主題，如如何使用Electron進行本地文件訪問、如何使用系統托盤、如何創建菜單等等。除此之外，Electron還有一個專門的文檔網站（https://electronjs.org/docs），其中包含了很多有用的資源和例子。

八、Electron教程

以下是一個簡單的Electron應用程序教程，僅包含一個窗口並顯示「Hello World！」：

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 創建瀏覽器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加載index.html文件
  win.loadFile('index.html')

  // 打開開發者工具
  win.webContents.openDevTools()
}

// 當Electron完成初始化並準備創建瀏覽器窗口時，將觸發此事件
app.whenReady().then(() => {
  createWindow()

  // 當所有的窗口都關閉時，退出應用程序
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
      app.quit()
    }
  })
})

// 在macOS上，即使所有窗口都關閉了，應用程序也不會退出直到用戶使用cmd + Q退出
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

九、前端Electron框架

除了Electron本身，還有很多基於Electron構建的前端框架。這些框架可以用於快速構建跨平台桌面應用程序，提供了許多可重複使用的UI組件和模板。以下是一些常見的前端Electron框架：

AngularJS和Bootstrap: Electron-Quick-Start
React和Redux: Electron-React-Boilerplate
Vue.js和Element UI: electron-vue

十、Electron框架歷史

Electron最初是由GitHub創建的，以前稱為Atom Shell，因為Atom編輯器是使用它構建的。在Atom的發展過程中，GitHub將其作為開源項目發佈，以幫助開發人員構建跨平台桌面應用程序。2013年，GitHub推出了Atom編輯器的第一個測試版。在Andiy Rachmat和Jessica Lord的努力下，Atom Shell於2014年8月正式在GitHub上發佈。2015年4月，Atom-Shell更名為Electron。2016年，Electron 1.0發佈，並成為Node.js基金會的一個重要項目。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/269912.html