使用electron构建基于html的桌面应用

发表于
字数统计: 1,611 | 阅读时长 ≈ 7 
有一个需求是需要构建系统的桌面的应用，搜索了很多资料发现了electron这个平台。功能非常强大，在git上面也有很多星星。自己研究了一番总结了一些。可以供大家参考。那么electron是如何构建桌面应用的呢？
1、新建项目文件夹 my

8

2、用命令行打开项目文件夹
1
shift +　鼠标右键　　＝》　在此处打开Ｐｏｗｅｒｓｈｅｌｌ窗口
3、创建index.js文件写入如下内容

（官方代码拷贝过去就可以）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
const electron = require('electron');

const {
  app, // 控制应用生命周期的模块
  BrowserWindow, // 创建原生浏览器窗口的模块
} = electron;

// 保持一个对于 window 对象的全局引用，如果不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let mainWindow;

function createWindow() {
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({width: 800, height: 600});

  // 加载应用的 index.html。
  // 这里使用的是 file 协议，加载当前目录下的 index.html 文件。
  // 也可以使用 http 协议，如 mainWindow.loadURL('http://nodejh.com')。
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  // 启用开发工具。
  mainWindow.webContents.openDevTools();

  // 当 window 被关闭，这个事件会被触发。
  mainWindow.on('closed', () => {
    // 取消引用 window 对象，如果你的应用支持多窗口的话，
    // 通常会把多个 window 对象存放在一个数组里面，
    // 与此同时，你应该删除相应的元素。
    mainWindow = null;
  });
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow);

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
  // 否则绝大部分应用及其菜单栏会保持激活。
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // 在 macOS 上，当点击 dock 图标并且该应用没有打开的窗口时，
  // 绝大部分应用会重新创建一个窗口。
  if (mainWindow === null) {
    createWindow();
  }
});
4、在ｐｏｗｅｒｓｈｅｌｌ中使用命令初始化项目
1
npm init
5、拷贝项目的需要的html、css、static等资源到项目目录

9

6、安装项目需要依赖
1
npm install electron --save-dev

故障：

PS C:\Users\lj\Desktop\my> npm install electron-prebuilt –save-dev
npm WARN deprecated electron-prebuilt@1.4.13: electron-prebuilt has been renamed to electron. For more details, see http://electron.atom.io/blog/2016/08/16/npm-install-electron

electron-prebuilt@1.4.13 postinstall C:\Users\lj\Desktop\my\node_modules\electron-prebuilt
node install.js

npm WARN my@1.0.0 No description
npm WARN my@1.0.0 No repository field.

故障解决：

1
2
3
4
5
6
7
8
9
10
11
如果只是在本机上开发可以在 package,json 文件中加入以下字段，
{
.
.
.
"private": true
.
. 
.
}
再次安装时即不会出现此问题
7、运行 命令启动程序

electron 在开发阶段的启动方式

找到node_modules.bin\election.cmd文件执行下面的代码：

1
.\node_modules\.bin\electron .\index.js

可以把上面的命令写入入口文件中的script中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "name": "my",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "electron ."
  },
  "private": true,
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^3.0.5",
    "electron-prebuilt": "^1.4.13"
  }
}

启动方式就变成

1
npm run test 或者 electron .

都可以完成启动。

上面两种方式运行的效果如下图：

7

8、打包
1.方法一

首先进入项目目录找到如图文件夹（省略 ….. 项目文件夹\node_modules\electron ）

1

里面有一个dist文件夹

2

拷贝出来如下图

3

图中标记的文件夹是我们需要操作的文件夹

进入省略……… dist\resources文件夹新建一个文件夹为app或者自己喜欢的名字

4

将我们刚才创建好的能够启动的项目文件拷贝到app文件夹中

5

除上图标记不需要的文件外全部拷贝到app文件夹中拷贝后的结果是：

6

这下我们在回到dist目录能看见一个叫electron.exe的可执行程序，我们双击他就可以运行我们的程序了。

效果如下图：

7

2. 方法二：

安装electron-packager 如果提示没有权限请在命令前面加上sodu

1
lizhonglindeMacBook-Pro:nodetest lizhonglin$ npm install electron-packager --save

安装好之后入下

1
2
3
+ electron-packager@12.2.0
updated 19 packages in 8.189s
lizhonglindeMacBook-Pro:nodetest lizhonglin$

这下我们就可以开始打包了

大概的命令格式是这样的

1
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options> <icon>
1
electron-packager <应用目录> <应用名称> <打包平台> --out <输出目录> <架构> <应用版本> <图标>

命令说明：

  • location of project：项目所在路径
  • name of project：打包的项目名字
  • platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
  • architecture：决定了使用 x86 还是 x64 还是两个架构都用
  • electron version：electron 的版本
  • optional options：可选选项
  • icon : 图标

我目前项目的情况，用终端切换到这个目录

但是这样并不够，会提示：

1
Unable to determine Electron version. Please specify an Electron version

我们需要指明Electron version。这个参数是当前安装Electron的版本，不知道的可以直接electron就能看到了，我这里是1.4.13，经过改进后如下：

1
electron-packager . nodetest --win --out ../demoApp --arch=x64 --electron-version=1.4.13 --icon=./o.ico

为了每次不输入这么多命令 我们可以把写好的命令加入到package.json的配置文件中去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
  "name": "testapp",
  "version": "1.0.0",
  "description": "跨平台应用",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "package": "electron-packager . nodetest --win --out ../demoApp --arch=x64 --electron-version=1.4.13 --icon=./o.ico"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^3.0.5",
    "electron-prebuilt": "^1.4.13"
  },
  "dependencies": {
    "electron-packager": "^12.2.0"
  }
}

使用命令

1
npm run-script package

就可以开始打包了

执行完毕后，看到父级目录下已经产生了我们希望看到的应用文件夹。里面的应用程序demo.exe就可以直接打开桌面应用了。

这样我们就能使用打包好的东西了。如果是windows还可以使用NSIS工具打包成可以安装的桌面应用。见下一篇

欢迎转载收藏。

作者：lizhonglin

github: https://github.com/Leezhonglin/

blog: https://leezhonglin.github.io/

-------------本文结束 感谢您的阅读-------------