引言

Electron 是 GitHub 上的一个开源框架，通过它可以使用 Node.js 和 Chromium 进行桌面应用程序的开发。传统的开发桌面程序大多使用 C#，C++ 等方式，但这种方式开发较为复杂，周期较长，不适合快速高效的实现。虽然使用 Python 提供的 GUI 包 Tkinter 或 wxPython 等可以进行快速的程序开发，但是实现的程序界面可塑性较差，无法实现较高的视觉效果。Electron 让我们可以使用网页技术进行渲染，实现高度的设计自由化，可以帮助前端开发者在不需要学习其他语言和技能的前提下，快速开发跨平台的桌面应用。Electron 已经在多个开源应用软件中得到充分应用，如大家熟知的 GitHub 的 Atom 和微软的 Visual Studio Code 都是使用 Electron 开发的，其性能和稳定性已经得到了一定的验证。

Electron开发的程序是跨平台的，可以支持 macOS，Windows，Linux 等多个平台。

Electron 程序的基本结构

Electron 集成了 Node.js 和 Chromium，具有调用系统原生 API 的能力，Node.js 用于处理程序主进程逻辑、与系统底层进行交互等；Chromium 则负责渲染进程渲染窗口以及处理窗口事件逻辑等；

一个 Electron 程序的基本构成

一个基本的 Electron 程序需要包括下面几个文件：

package.json：配置文件，包含应用程序的相关配置信息: 作者，名称，依赖项等，并指定程序的启动文件；
main.js：应用程序主进程的入口，包括启动程序并窗口浏览器窗口渲染 HTML；
index.html：应用程序的渲染页面，表示一个程序渲染进程；

Electron Hello World

刚开始学习一门语言或技术的时候，我们最熟悉的就是 Hello World 了，这里我们也首先来创建一个最简单的 Electron 应用程序，从而了解其基本的运行流程。

Electron 安装

由于 Electron 是基于 node.js 的，因此安装 Electron 前首先需要安装 node.js，可以直接从官网下载安装包进行安装即可： node 安装包。新版的 node 应该是自带包管理 npm 的，安装成功后打开电脑 cmd 输入 node -v 会显示所安装的版本信息。

安装好 node 后，我们新建一个工程文件夹 electron-demo，在命令行下切换到该文件下然后执行安装命令：npm install electron --save-dev 等待 electron 安装完成即可。安装完成后当前文件夹下会多出一个 node_modules 文件夹，所安装的模块即存放在此。注意这里我们使用的是局部安装，即安装的 electron 只用于当前项目，当然也可以使用全局安装，即在命令后面添加 -g，但是不推荐这样使用，因为每个项目最好是自己管理独自使用的模块，防止不同项目对模块的版本需求不一致导致的问题。

注意

使用 npm 可能会网速比较慢或者无法访问，可以使用国内镜像 cnpm 代替，安装 cnpm 方法如下选一种：

npm install -g cnpm：从默认源头下载cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org ：强制从淘宝的源头下载cnpm

安装了 cnpm 后，直接使用 cnpm 代替 npm 就可以实现快速安装了。

创建 Electron 实例

我们在项目文件夹下创建下面三个文件：package.json, main.js, index.html.

package.json 内容如下：


{

    "name": "electron-demo",

    "productName": "Electron示例",

    "version": "1.0.0",

    "description": "Electron Demo ",

    "main": "main.js",

    "scripts": {

      "start": "electron ."

    },

    "author": "xxx"

}

主要的两个点：main 用来指定程序入口文件 main.js，start 用来表示 electron 的启动方式。

index.html 内容如下：


<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

  <meta charset="utf-8">

</head>

<body>

    <div>Electron Demo</div> 

</body>

</html>

这里没有实际的内容，为一个基本的HTML形式文件。

main.js 内容如下：


const path = require('path')

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

let mainWindow = null

if (process.mas) app.setName('Electron APIs')

function initialize () {

  function createWindow () {

    const windowOptions = {

      width: 640,

      height: 500,

    }

    mainWindow = new BrowserWindow(windowOptions)

    mainWindow.loadURL(path.join('file://', __dirname, '/index.html'))

    mainWindow.on('closed', () => {

      mainWindow = null

    })

  }

  app.on('ready', () => {

    createWindow()

  })

  app.on('window-all-closed', () => {

    if (process.platform !== 'darwin') {

      app.quit()

    }

  })

  app.on('activate', () => {

    if (mainWindow === null) {

      createWindow()

    }

  })

}

initialize()

这里使用 BrowserWindow() 创建一个新的窗口，windowOptions 为窗口参数，这里只指定了窗口的宽度和高度。切换到当前项目目录下，在命令行输入：npm start . 即可启动程序，具体如下图：