Electron从零开始——介绍 - 知乎

来源： Electron从零开始——介绍 – 知乎

其实在 Electron 出现之前，如果你问我做桌面应用需要什么，我的第一个想法是 C、C++、C#、Java 以及微软的 Visual Basic 等等语言（Sorry 我不是个苹果党，第一时间想不起 Object-C），外加体积巨大的 IDE（比如我到今天依然不喜欢的 Visual Studio 和曾经为了玩 Minecraft Mod 开发装的 Eclipse 等等），当然也还有各种编辑器 + 编译器的组合，比如 Notepad++ 和 GCC……

我认识 Electron 项目应该是比较晚的了，是因为突然有一天微软发布了 Visual Studio Code 这个跨平台、开源、免费的编辑器，然后在浏览这个应用的文档时，我突然发现这个东东居然用的是 TypeScript + Electron 开发出来的，而 TypeScript 其实就是 JavaScript 的超集……这个冲击了我的世界观，要知道直接使用 JavaScript 开发桌面应用以前不是没有过，但是能够提供像是 VS Code 这么好用且顺滑的感觉，在之前是不敢想象的，甚至为了一个小小的工具，我都要在 VS 里面先做窗口界面，然后用 C# 在那里搞来搞去，可能是对桌面端应用的不熟悉，我做这种工具总是没有很顺手的感觉（对，这方面我的确很渣）；而 Electron 的出现，让我有了可以使用自己熟悉的语言以及简单的编辑工具，就可以做出一个小桌面应用的希望。

当然认真学了一阵时间之后，我发现它其实就是把 V8 引擎单独包装起来，使之成为可以在桌面运行的类浏览器平台，从而使得我们写的 SPA 独立运行在系统桌面段；又因为它其实是基于 SPA 的，所以跨平台就成为了其最基础的能力，除了在调用系统功能和最终打包的时候需要考虑到不同平台的差异，其他方面完全不用考虑，使得同一版本的应用在不同系统上也可以保持一致功能，而不需要重新开发一个不同内核、不同细节项、不同技术栈的应用了，对于个人开发者，小团队乃至大型团队的中小型项目，都是个非常非常棒的特性。

我的作品本身其实也很渣，技术层面并没有什么特别的地方，甚至最初的两个小应用，还是用了 JQuery 作为 DOM 操作技术栈，其中一个基本没有在 Github 上面更新过，就单纯的是写出来玩的，一个读书应用（这个就不截图了，太渣自己看了都不好意思）；另一个有持续更新一段时间，但是也没有完成，因为最近在大改，从 JQuery 改为 Vue，所以可以看看以前的样子：

这是一个投资理财的辅助分析工具，包括了三个小模块：股票、指数基金以及可转债，因为是辅助分析，所以有些部分是需要自己已经了解理论才能一眼看懂的，其界面如下（没做菜单，因为按钮对于不是很了解电脑的人更直观）。

主界面：

股票模块主界面（图表这里就不截图了，因为在修改，目前不太好看）：

股票模块——白马组合（以防有人说我荐股，这里把股票名称和代码隐藏了）：

股票模块——便宜组合（关键信息已隐藏）：

股票模块——券商股：

指数基金模块（这里主要是行业指数的博格公式，长投温度考虑到可以很容易的获取，所以没有做进来）：

点击查看博格公式，可以看到计算结果：

因为上述这些都是共有的信息，而且无论是否明白博格公式，我们也不可能参照旧数据来进行投资，所以这里没有隐藏；这里应用做的事情，其实就是简单的把需要手工计算的东西自动计算并汇总，所以没什么技术含量的。

可转债模块——可转债组合（关键信息已隐藏）：

行情简表和待发转债按钮会直接打开集思录：

关于界面：

以上就是我这个简单的小工具的演示，当然或许做成移动端更好，毕竟现在使用电脑进行投资的人不多了，不过在实际使用的过程中，我学习到的投资理财工具有很多地方还是需要计算和分析，使用电脑明显优于移动端的体验，所以第一步先做了桌面端的应用；外加我现在算是转了行，而且最近正在培训阶段，精力也不太好分配，所以改动技术栈还是需要很久的（一天可能就只剩下了2个小时左右的闲暇，我还要更新喜马拉雅上面的有声小说，所以只有周末是比较好的空暇时间了），这样我打算和这个专栏一样，慢慢的来，正好可以重新梳理自己对 Electron 的理解，并且让自己的应用“升级”为正式版。

好了，这篇文章少见的扯了一大堆废话，接下来先好好的了解一下 Electron 究竟是个什么东东。

就像我上面提到过的，Electron 可以让我们使用纯 JavaScript 调用丰富的原生 API 来创建桌面应用；可以把它看作是专注于桌面应用而不是 web 服务器的 io.js 的一个变体。

当然这不意味着 Electron 是绑定了 GUI 库的 JavaScript；相反，Electron 使用 web 页面作为它的 GUI，所以可以把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器——从这个角度来理解，我们就明白了，所有和系统的交互功能，Electron 这个平台已经搞定了，我们所需要的就是创建一个自己喜欢的界面，一个或多个核心的功能，以及调用它提供给我们的 API 就好。

因为 Electron 本身其实也是 Node.js 的一个第三方项目，所以在开发的时候，我们首先需要已经安装了 Node.js，以及包管理器 NPM，外加一个顺手的编辑器：我个人用 VS Code 很顺手，当然如果喜欢用别的编辑器也没问题，比如前文提到的 Notepad++，或者著名的 Sublime Text、Atom（话说这个也是 Electron 做的）、Komodo Edit……等等等等，都可以；基本准备就完成了。

接下来，用 NPM 在本地安装一个 Electron 的副本即可，可以选择全局安装或者针对项目单独安装：

npm i -g electron

# 或者
npm i --save-dev electron

一个基础的 Electron 项目结果如下：

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

因为 Node.js 对项目结构以及命名还是有点要求的，所以我个人推荐用一些 Electron Cli 工具来进行项目启动和初始化，这样会相对省一些事，比如我之前使用过的 electron-forge，或者直接搭配 Vue 来建立的 electron-vue 都可以；具体的 cli 工具我们可以按照自己的喜好选择，如果更倾向用原生 JS 或者想要自己指定框架的，electron-forge 是个好选择：

这里稍稍演示一下通过 electron-forge 来建立新项目的过程，其实很简单，只要新建一个文件夹，定位到文件夹之后通过 init 命令指定当前文件夹为新项目：

electron-forge init

此时 electron-forge 会自动检查当前环境，并安装对应的模块：

这里要留意，如果 NPM 的映像是指向淘宝的话，整个过程会快很多。

完成后，初始配置就结束了：

此时，我们就可以打开 src 目录下的 index.js 来查看初始代码了：

import { app, BrowserWindow } from 'electron';

// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
  app.quit();
}

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
  });

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // Open the DevTools.
  mainWindow.webContents.openDevTools();

  // Emitted when the window is closed.
  mainWindow.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    mainWindow = null;
  });
};

// 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.on('ready', createWindow);

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

app.on('activate', () => {
  // On OS X 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 (mainWindow === null) {
    createWindow();
  }
});

// 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 import them here.

这样我们就可以在这些初始代码上面，进行自己想要的修改了，当然我们下一章节会开始看看，这些基础的代码究竟是个什么意思；不过目前来看，应该已经很清晰了，毕竟 electron-forge 生成的初始代码，已经有了详尽的注释帮助我们理解了。

其实这个初始代码已经可以运行了，只要运行如下命令：

electron-forge start

可以看到，初始的界面是包括了菜单栏、主界面以及控制台的，而控制台的出现就分明体现了它本质上是个浏览器的特点，这也使得我们在本地及时的进行调整、修复和新功能测试变得非常简单。