Electron 初体验

Electron 是一个用于开发桌面应用程序的开源框架。Electron 允许您使用 HTML + CSS + JavaScript 来开发桌面应用程序。因为 Electron 的 UI 界面使用的是网页，所以可以很方便的在 Windows、Mac OS、Linux 三个平台之间移植。

虽然 Electron 的 UI 使用的是网页，但也能调用一些系统原生的 API。例如原生通知、原生菜单等，能实现一般网页实现不了的很多功能。目前 Electron 已经成为了开发跨平台桌面应用程序的最好选择之一。像 Visual Studio Code、Typora、GitHub Desktop 等，都是基于 Electron 开发的。

开发环境

Electron 需要依赖 NodeJS，在开发之前需要先安装 NodeJS。

首先需要在项目目录中创建一个 package.json 文件，可以手动创建，也可以使用 npm 创建。这里使用 npm 创建，如下：

npm init

根据提示输入相应的信息，对于暂时用不到的信息可以直接按回车使用默认值。如下：

package name: (electron) hello-world
version: (1.0.0)
description: Hello World
entry point: (index.js) main.js
test command:
git repository:
keywords:
author: Mr Ma
license: (ISC)

创建完的 package.json 如下：

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "Hello World",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mr Ma",
  "license": "ISC"
}

接下来就是安装 Electron，这里直接在当前项目目录中安装：

npm install --save-dev electron

如果出现安装失败的情况也可以使用国内的 cnpm 来安装。

安装 cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 Electron：

cnpm install --save-dev electron

安装完成后在打开项目目录下的 package.json，在 script 中加入 "start": "electron ."。修改后的 package.json 如下：

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "Hello World",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron ."
  },
  "author": "Mr Ma",
  "license": "ISC",
  "devDependencies": {
    "electron": "^6.0.9"
  }
}

编写代码

package.json 中设置的入口文件是 main.js，这里就创建一个 main.js 文件。

在 main.js 中引入 electron ，然后创建浏览器窗口，如下：

const electron = require('electron');  //  引入electron
const {app, BrowserWindow} = electron;
let mainWindow;  //  用来保存浏览器窗口

app.on('ready', () => {
    //  创建浏览器窗口
    mainWindow = new BrowserWindow({
        width: 640,
        height: 480,
        webPreferences: {
            nodeIntegration: true
        }
    });
    //  加载 HTML 文件
    mainWindow.loadFile('index.html');
});

HTML 文件设置的是 index.html，这里在创建一个 index.html，index.html 的内容可以随便写。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

运行

在终端中输入：

npm start

效果如下：

ElectronHelloWorld

打包

npm start 只能预览效果，还不能生成可执行程序。如果要生成可执行程序需要安装 electron-builder。

使用 npm 安装 electron-builder：

npm install electron-builder -g

因为我的在项目中安装会有一些问题，所以这里就使用全局安装。

安装完成后可以输入 electron-builder version 查看一下版本，测试一下是否安装成功。

在 package.json 中添加 electron-builder 的配置信息：

"build": {
  //  生成的可执行程序的名称
  "productName": "hello-world",
  //  包名
  "appId": "hello-world",
  //  版权信息
  "copyright": "暂无版权信息",
  //  输出文件夹
  "directories": {
    "output": "dist"
  },
  //  windows 平台配置信息
  "win": {
    //  图标
    "icon": "assets/icons/win/icon.ico"
  }
}

在 package.json 的 script 中加入：

"pack": "electron-builder --dir",
"dist": "electron-builder

最终的 package.json 内容如下：

{
  "name": "hello-world",
  "version": "1.0.0",
  "description": "Hello World",
  "main": "main.js",
  "build": {
    "productName": "hello-world",
    "appId": "hello-world",
    "copyright": "暂无版权信息",
    "directories": {
      "output": "dist"
    },
    "win": {
      "icon": "assets/icons/win/icon.ico"
    }
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "author": "Mr Ma",
  "license": "ISC",
  "devDependencies": {
    "electron": "^6.0.9",
    "electron-packager": "^14.0.6"
  }
}

因为我用的是 Win10，所以就不编译其它平台的了。

编译 Windows 应用程序：

electron-builder -w

编译 Mac OS 应用程序：

electron-builder -m

编译 Linux 应用程序：

electron-builder -l

注意！如果要编译其它平台的程序是需要在 package.json 中配置的，我这里只配置了 Windows 的，所以只能编译 Windows 的。

如果需要编译为安装包还需要配置很多信息，我这里只配置了基本的信息，所以编译出来是文件夹。

编译后的文件如下：

.
├── chrome_100_percent.pak
├── chrome_200_percent.pak
├── d3dcompiler_47.dll
├── ffmpeg.dll
├── hello-world.exe
├── icudtl.dat
├── libEGL.dll
├── libGLESv2.dll
├── LICENSE.electron.txt
├── LICENSES.chromium.html
├── locales
│   ├── am.pak
│   ├── ar.pak
│   ├── bg.pak
│   ├── bn.pak
│   ├── ca.pak
│   ├── cs.pak
│   ├── da.pak
│   ├── de.pak
│   ├── el.pak
│   ├── en-GB.pak
│   ├── en-US.pak
│   ├── es-419.pak
│   ├── es.pak
│   ├── et.pak
│   ├── fa.pak
│   ├── fil.pak
│   ├── fi.pak
│   ├── fr.pak
│   ├── gu.pak
│   ├── he.pak
│   ├── hi.pak
│   ├── hr.pak
│   ├── hu.pak
│   ├── id.pak
│   ├── it.pak
│   ├── ja.pak
│   ├── kn.pak
│   ├── ko.pak
│   ├── lt.pak
│   ├── lv.pak
│   ├── ml.pak
│   ├── mr.pak
│   ├── ms.pak
│   ├── nb.pak
│   ├── nl.pak
│   ├── pl.pak
│   ├── pt-BR.pak
│   ├── pt-PT.pak
│   ├── ro.pak
│   ├── ru.pak
│   ├── sk.pak
│   ├── sl.pak
│   ├── sr.pak
│   ├── sv.pak
│   ├── sw.pak
│   ├── ta.pak
│   ├── te.pak
│   ├── th.pak
│   ├── tr.pak
│   ├── uk.pak
│   ├── vi.pak
│   ├── zh-CN.pak
│   └── zh-TW.pak
├── natives_blob.bin
├── resources
│   ├── app.asar
│   └── electron.asar
├── resources.pak
├── snapshot_blob.bin
├── swiftshader
│   ├── libEGL.dll
│   └── libGLESv2.dll
└── v8_context_snapshot.bin

其中的 hello-world.exe 就是可执行程序，整个目录的大小有 140MB。

使用感受

Electron 的出现让 Web前端程序员也能开发跨平台的桌面应用程序，可以说是一个很好的框架。但是因为套了一层 Chromium 浏览器，导致性能和大小的表现都不太好。一个显示 Hello World 的程序大小就达到了 140M，而且在刚进入程序的时候还会有 1 秒左右的空白，如果电脑性能差的话空白的时间可能会更长。

以上就是 Electron 的简单使用感受。因为这里只是简单体验，所以有很多内容还没有写到。更详细的内容以后再写。

本文地址：https://www.misterma.com/archives/824/

如果对本文有什么问题或疑问都可以在评论区留言，我看到后会尽量解答。

开发环境

编写代码

运行

打包

使用感受

发表评论

表情类型

目录