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.htmlindex.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.jsonscript 中加入:

"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 的简单使用感受。因为这里只是简单体验,所以有很多内容还没有写到。更详细的内容以后再写。


版权声明:本文为原创文章,版权归 Mr. Ma's Blog 所有,转载请联系博主获得授权!
本文地址:https://www.misterma.com/archives/824/
如果您对本文有什么问题或疑问都可以在评论区留言,我看到后会尽量解答。

发表评论

正在加载 Emoji
×