Electron 是什么？

是使用 Web 技術構建跨平臺的桌面應用程序的開源技術炼鞠。Web 技術指的是 JavaScript缘滥、HTML 和 CSS 三駕馬車。同時谒主，這意味著朝扼，現(xiàn)在用于開發(fā)網(wǎng)站的主流技術，如 Angular霎肯、Vue擎颖、React 等，均可以在 Electron 中應用观游。這也是一個將線上搬到線下的一個快捷的方式搂捧。

Electron 技術棧

Chromium
Node.js
JavaScript
HTML
CSS
跨平臺
- Mac
- Windows
- Linux

Electron 特性

自動更新
原生菜單和通知
崩潰報告
調試和性能分析
Windows 安裝程序

簡單入門

安裝 Node.js，建議使用 12.x 及以上
啟動 Terminal(終端) / cmd
進入一個臨時目錄
clone 入門示例工程

$ git clone https://github.com/electron/electron-quick-start
正克隆到 'electron-quick-start'...
remote: Enumerating objects: 15, done.
remote: Counting objects: 100% (15/15), done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 686 (delta 6), reused 0 (delta 0), pack-reused 671
接收對象中: 100% (686/686), 445.88 KiB | 7.00 KiB/s, 完成.
處理 delta 中: 100% (360/360), 完成.

安裝依賴庫

$ cd electron-quick-start
$ npm install

> core-js@3.6.5 postinstall /Users/arthur/temp/electron/electron-quick-start/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> electron@10.1.0 postinstall /Users/arthur/temp/electron/electron-quick-start/node_modules/electron
> node install.js

Downloading electron-v10.1.0-darwin-x64.zip: [====------------------------------------------------------------------------------------------------] 4% ETA: 18954.0 seconds

在安裝的時候懂缕，會碰到 electron 下載緩慢的問題允跑，經(jīng)過研究下載和 cache 部分的源代碼，在 Mac 上的解決方案如下：

獲取 zip 包的下載地址搪柑，根據(jù)上面的提示聋丝，作如下操作來獲取下載地址

$ cd /Users/arthur/temp/electron/electron-quick-start/node_modules/electron
$ DEBUG=* node install.js

筆者此刻獲取的下載地址是： https://github.com/electron/electron/releases/download/v10.1.0/electron-v10.1.0-darwin-x64.zip

手工下載 zip 包（此處各顯神通了）
轉到 electron 的 cache 目錄下（筆者是 /Users/arthur/Library/Caches/electron）
根據(jù)上面下載 url，建立目錄 httpsgithub.comelectronelectronreleasesdownloadv10.1.0electron-v10.1.0-darwin-x64.zip
將下載好的文件 electron-v10.1.0-darwin-x64.zip 復制到該目錄下工碾，如下圖所示：

electron-cache.png
再次手工執(zhí)行安裝腳本

$ cd /Users/arthur/temp/electron/electron-quick-start/node_modules/electron
$ DEBUG=* node install.js
  ......
  extract-zip finished processing LICENSE +1ms
  extract-zip zip extraction complete +0ms
$

安裝成功弱睦！

!!! 更新： 參考官方文檔 Docs / Guides / 安裝中的章節(jié) “自定義鏡像和緩存” 部分，有更好的方法倚喂！

啟動

$ npm start

啟動的窗口如下：

electron-quick-start-window.png

成功每篷！

代碼實現(xiàn)簡要分析

主要文件

index.html
main.js
package.json
preload.js
renderer.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using Node.js <span id="node-version"></span>,
    Chromium <span id="chrome-version"></span>,
    and Electron <span id="electron-version"></span>.

    <!-- You can also require other files to run in this process -->
    <script src="./renderer.js"></script>
  </body>
</html>

一個典型的 html 文件瓣戚，其中 node、chrome焦读、electron 的版本在 preload.js 中被替換子库。

main.js

關鍵點已經(jīng)寫上中文注釋。

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  // 創(chuàng)建主窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 此處會自動加載和執(zhí)行 preload.js
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  // 加載主入口文件: index.html
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // 打開開發(fā)者工具
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

preload.js

簡單的 DOM 操作矗晃，特別需要提到的是仑嗅，在這個時刻，可以訪問到 Node.js 的 API张症，如 process 對象仓技。

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

參考

Electron 官網(wǎng)
Electron Github
Chromium
Node.js
electron-quick-start

Electron 簡介及入門教程