文章目录
  1. 1.安装#
  2. 2.创建入口配置 main.js#
  3. 3.创建打包配置 package.json#
  4. 4.打包#

使用Electron快速将B/S应用构建为桌面应用

借助Electron可以用来非常轻易的构建跨平台桌面应用,因为你只需要熟悉htmlcssjavascript这些基本技能就可以快速构建一个简单应用。
这意味着我们可以借助Electron来打包我们的B/S应用伪装成一个本地应用,这不仅可以提高传统用户的亲和度还可以免去不要用ie装谷歌; 怎么装谷歌,360可以吗?的烦恼\扩大可视区域(免去地址栏 菜单栏等)\快速打开应用(无需打开浏览器翻收藏夹)等一系列好处。
那么下面的内容就是告诉你如何快速打包一个伪桌面应用

前提:

  • nodejs
  • yarn

1.安装#

可以执行如下命令,更多详细内容可以查看官网安装文档

1
yarn global add electron

2.创建入口配置 main.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
54
55
56
57
const electron = require('electron');
// 控制应用生命周期的模块
const {app} = electron;
// 创建本地浏览器窗口的模块
const {BrowserWindow} = electron;

// 指向窗口对象的一个全局引用,如果没有这个引用,那么当该javascript对象被垃圾回收的
// 时候该窗口将会自动关闭
let win;

function createWindow() {
// 创建一个新的浏览器窗口
win = new BrowserWindow();
// 打开后最大化窗口
win.maximize();
// 并且装载应用的index.html页面
win.loadURL(`http://localhost:8000/#/user/login`);

// 如果是前后端分离得项目可以按如下方式书写
win.loadURL(`file://${__dirname}/index.html`);
// 打开开发工具页面
//win.webContents.openDevTools();

// 当窗口关闭时调用的方法
win.on('closed', () => {
// 解除窗口对象的引用,通常而言如果应用支持多个窗口的话,你会在一个数组里
// 存放窗口对象,在窗口关闭的时候应当删除相应的元素。
win = null;
});
}

// 当Electron完成初始化并且已经创建了浏览器窗口,则该方法将会被调用。
// 有些API只能在该事件发生后才能被使用。
app.on('ready', createWindow);
/* var mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
}); */
// 当所有的窗口被关闭后退出应用
app.on('window-all-closed', () => {
// 对于OS X系统,应用和相应的菜单栏会一直激活直到用户通过Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit();
}
});

app.on('activate', () => {
// 对于OS X系统,当dock图标被点击后会重新创建一个app窗口,并且不会有其他
// 窗口打开
if (win === null) {
createWindow();
}
});

// 在这个文件后面你可以直接包含你应用特定的由主进程运行的代码。
// 也可以把这些代码放在另一个文件中然后在这里导入。

3.创建打包配置 package.json#

可以通过 yarn init或新建文件得方式创建此文件

1
2
3
4
5
6
7
8
{
"name": "Evatron",
"version": "1.0.0",
"description": "Eva desktop",
"main": "main.js",
"author": "PKAQ",
"license": "MIT"
}

4.打包#

安装打包管理器

1
2
3
4
5
6
7
8
9
10
11
yarn global add electron-packager
```
执行打包
```bash
electron-packager . Evatron
--win --out=release
--arch=x64
--version=1.0.0
--electron-version=2.0.0
--overwrite
--icon=./favicon.ico

命令解释

  • . :打包入口
  • Evatron : 打包文件名
  • --win --out=release --arch=x64 : 生成win64类型文件
  • --version=1.0.0 :生成的文件版本
  • --electron-version=2.0.0 :electron版本,可以通过electron --version查看
  • --overwrite :是否覆盖之前的打包文件
  • --icon=./favicon.ico :favicon

打包后会在命令目录生成一个release文件夹 点击里面生成的exe可以查看我们的桌面程序

p.s:如果你的react项目index页面死活出不来,可能是你使用了react-router的BroswerHistory,换成HashHistory就可以了。

参考:https://segmentfault.com/a/1190000014030465

支持一下
您得支持,是我前进的动力.