Electron 简介及入门教程

来源:简书分类: 文章浏览史发布时间:2020-09-22 19:53:54 最后更新:2020-09-22 浏览:1756

转载声明：

本文为摘录自“简书”，版权归原作者所有。

原文链接:

https://www.jianshu.com/p/9b04a1682552

温馨提示：

为了更好的体验，请点击原文链接进行浏览

摘录时间：

2020-09-22 19:53:54

Electron 是什么？

是使用 Web 技术构建跨平台的桌面应用程序的开源技术。Web 技术指的是 JavaScript、HTML 和 CSS 三驾马车。同时，这意味着，现在用于开发网站的主流技术，如 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 下载缓慢的问题，经过研究下载和 cache 部分的源代码，在 Mac 上的解决方案如下：

获取 zip 包的下载地址，根据上面的提示，作如下操作来获取下载地址

$ 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）
根据上面下载 url，建立目录 httpsgithub.comelectronelectronreleasesdownloadv10.1.0electron-v10.1.0-darwin-x64.zip
将下载好的文件 electron-v10.1.0-darwin-x64.zip 复制到该目录下，如下图所示：

electron-cache.png
再次手工执行安装脚本

$ 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 / 安装中的章节 “自定义镜像和缓存” 部分，有更好的方法！

启动

$ npm start

启动的窗口如下：

electron-quick-start-window.png

成功！

代码实现简要分析

主要文件

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

关键点已经写上中文注释。

// 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.
  // 创建主窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 此处会自动加载和执行 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.
  // 打开开发者工具
  // 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 官网
Electron Github
Chromium
Node.js
electron-quick-start