Electron 小白入门手册——项目准备今天先把官方提供的 electron/electron-quick-start

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情

概述

接下来会慢慢开始接触 electron，肝官方文档是绕不开的，不过里面汉化程度不高，可以对照着《Electron 中文文档》一起看

今天先把官方提供的 electron/electron-quick-start 跑起来，并细细拆解里面的几个关键点。

先跑起来

用 electron 官方提供的简单模板项目，先跑起来看看 electron 的运行效果：

Electron Fiddle
- 这是官方出的快速启动的一个模板应用（个人感觉应该只是做演示用）
- - 下载并打开后，可以比较直观看到上图中组成 electron 项目代码的四大基础内容
  - PS：老实说，打开后，一直没把项目跑起来，可能是资源文件被“墙”了。按道理来说，这个工具是可以选择要运行的 electron 的版本，下载下来后，把上图四大基础内容的项目跑起来
electron/electron-quick-start
- 这个演示模板项目还是可以跑起来的，直接按照 github 上 readme 的提示执行命令就 ok
  - 跑起来之后就可以看到下图界面：

主进程、渲染进程、preload

上文提到，组成 electron 项目代码的四大基础内容：main.js、index.html、renderer.js、preload.js，他们分别对应：

主进程：main.js
渲染进程：index.html、renderer.js
preload：preload.js

主进程、渲染进程

先说一下主进程和渲染进程吧，打个比方：

主进程就像是一个谷歌浏览器，启动主进程就像我们打开了谷歌浏览器
渲染进程就像是我们打开的网页，启动主进程就像我们通过谷歌浏览器打开网页

这里有几个要点：

主进程只有一个，就像我们只能打开一个谷歌浏览器。但渲染进程可以打开多个，就像我们可以在谷歌浏览器上打开多个网页页签；
渲染进程跟我们打开的网页实际上没差多少，所以是没有技术栈限制的，用 react、vue，甚至是 jQuery、原生都没问题。

拆解一下 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.
  // 创建一个窗口（实际上也就是创建了一个渲染进程），类比请看图： https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/204df52e02644ea483a1036c5266a371~tplv-k3u1fbpfcp-zoom-1.image （贴在下文中）
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'), // 把 preload 脚本注入到打开的窗口中（渲染进程），下文再详细分析
    }
  })

  // and load the index.html of the app.
  // 加载 index.html 文件，这一步就有点类似在谷歌浏览器页签上访问一个网页
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // 如果需要默认打开谷歌开发者工具的话就开启这一行，否则就直接注释掉就好
  // 如图：https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7ffaf0679ae14a50befb765664ca85dd~tplv-k3u1fbpfcp-zoom-1.image  （贴图注释在下文）
  // 当然，如果不调用这一行也是可以开启谷歌开发者工具的，
  // 运行项目后，在窗口使用快捷键 `cmd + opt + i` (mac 下的快捷键，windows 也类似，几个键可以组合试一下，或者百度一下)就可以打开
  // https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ea8ce7c3e594622a36dede91f40de50~tplv-k3u1fbpfcp-zoom-1.image   （贴图注释在下文）
  // 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.
// Electron 完成初始化后，会调用这个回调函数
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.

简单来说 main.js 文件中核心只做了三件事：

使用 electron 提供的 API，定义创建窗口的函数
在合适的时机（上述代码中，Electron 完成初始化后），调用第一步的函数，创建窗口
把 preload 注入到窗口中，使渲染进程拥有 nodejs 的能力
- PS：这一步也使得渲染进程跟普通 web 网页有了本质的区别，有了 preload（或者说 electron ）的加持，渲染进程就拥有了 nodejs 的能力（拥有了调用系统 IO 的能力）

preload

先看看官方文档中对 preload 的简单描述：

Now, the last thing to do is print out the version numbers for Electron and its dependencies onto your web page. Accessing this information is trivial to do in the main process through Node's global process object. However, you can't just edit the DOM from the main process because it has no access to the renderer's document context. They're in entirely different processes!

简单理解呢，就是说 electron/electron-quick-start，这个项目，要做的事情就是把当前 nodejs、chromium、electron 的版本信息打印出来：

原本呢，对于主进程来说，读取上述三个信息是一件非常简单的事情，但是，读取到信息后，不能在主进程中获取渲染进程的 DOM 上下文，那意味着不能在主进程中编辑渲染进程的 DOM 结构、不能直接把信息渲染出来

这时候 preload 相当于一个桥梁的作用，打通主进程和渲染进程之间原本无法跨域的鸿沟~

此次就学完了本文的所有内容 （づ￣3￣）づ╭❤～

老规矩，对文中任何一点有疑问的欢迎在评论区留言，一起完善文章内容 (￣▽￣)~*

如果各位看官对本专栏感兴趣的话，可以查看 Electron 小白入门手册或 Electron 小白入门手册——开篇了解更多内容 \(^o^)/