需求: 将一个已经上线的后台管理系统(只兼容Chrome)打包成一个不需要谷歌浏览器就可以运行的软件
需要安装:
npm install electron -g
npm install electron-packager -g
- WinRAR解压工具(或者2345等其他解压工具也可以)
- Powershell 3 或 3 以上版本(electron-packager打包需要)
- NET 4.5 或 4.5 以上版本(electron-packager打包需要)
此例只进行最简单的转换,详细electron用法请参考electron中文文档
运行文件
新建文件夹,演示中暂命名为app
,在文件夹中启动cmd
,创建package.json,在package.json中必须有写入
{
"name": "app",
"main": "main.js",
}
在app文件夹中创建main.js
文件,在文件中写入以下内容
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
// 保持一个对于 window 对象的全局引用,不然,当 JavaScript 被 GC,
// window 会被自动地关闭
var mainWindow = null;
// 当所有窗口被关闭了,退出。
app.on('window-all-closed', function () {
// 在 OS X 上,通常用户在明确地按下 Cmd + Q 之前
// 应用会保持活动状态
if (process.platform != 'darwin') {
app.quit();
}
});
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function () {
// 创建浏览器窗口。
mainWindow = new BrowserWindow({ width: 800, height: 600 });
// 加载应用的 index
mainWindow.loadURL("http://www.baidu.com")
// 打开开发工具
// mainWindow.openDevTools();
// 当 window 被关闭,这个事件会被发出
mainWindow.on('closed', function () {
// 取消引用 window 对象,如果你的应用支持多窗口的话,
// 通常会把多个 window 对象存放在一个数组里面,
// 但这次不是。
mainWindow = null;
});
});
如果安装了上边说的 npm install electron -g
,就可以直接在命令窗口运行electron .
,打开窗口了
导出文件
在app文件夹下,安装
npm install electron -D
npm install electron-package -D
安装后,在命令行输入 `electron-packager . app --win --out ./appBox --arch=x64 --version1.0.0 --icon=ico.ico --overwrite --ignore=node_modules`
这句命令的意思是electron-packager .
exe文件名称--win --out ./
文件夹名称--arch=
64位--version
版本号--icon=
打包后文件的图标--
每次调用覆盖文件--ignore=
不打包的内容
可以按照个人需求适当删除内容
注意: electron-packager
必须安装Powershell3或3以上版本和NET4.5或4.5以上版本,否则会报错
如果希望打开内容不是一个URL
而是一个index.html
的本地文件的话,可以使用
// 把
mainWindow.loadURL("http://www.baidu.com")
// 替换为
mainWindowloadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
然后在app文件夹中创建index.html
就可以了
如果需要打开后全屏显示
// 把
mainWindow = new BrowserWindow({ width: 800, height: 600 });
// 替换为
mainWindow = new BrowserWindow({show: false, autoHideMenuBar: true})
mainWindow.maximize()
mainWindow.show()
如果需要删除掉顶部的菜单栏
// 把
mainWindow = new BrowserWindow({ width: 800, height: 600 });
// 替换为
mainWindow = new BrowserWindow({width: 800, height: 600, autoHideMenuBar: true})
打包完成后,打开文件夹中的app.exe就可以运行了
打包
现在已经可以使用了,但是我们的需求是制作成一个
可运行的文件,可以采用把文件夹制作成自解压程序的方式解决这个问题
做成单个的执行文件
现在的文件夹
- 右键已经打包好的文件夹(app-win32-x64),添加到压缩文件,在 常规 选项卡中选择 创建自解压格式压缩文件 (不同的压缩文件按钮的位置可能会不同)
- 在 高级 选项卡中点击 自解压选项 ,在 设置 选项卡中设置 提取后运行 ,输入app.exe的路径
- 在 模式 选项卡中点击 解包到临时文件夹 静默模式 选择 全部隐藏
- 在 更新 选项卡中 覆盖方式 选择 覆盖所有文件
- 在 文本和图标中可以自定义文件的图标等信息(就不放图了)
- 点击确定,开始创建压缩文件
创建完成后,会生成一个exe文件,双击文件就可以打开了~
做成安装包形式
做成单个的执行文件有一个致命的缺点,就是每次打开都相当于重新解压一次文件夹,运行速度缓慢,所以可以做成一个安装包(其实也是自解压格式)
- 前两部和做成单个的执行文件一样,右键已经打包好的文件夹(app-win32-x64),添加到压缩文件,在 常规 选项卡中选择 创建自解压格式压缩文件 (不同的压缩文件按钮的位置可能会不同)
- 在 高级 选项卡中点击 自解压选项 ,在 设置 选项卡中设置 提取后运行 ,输入app.exe的路径
- 在 常规 选项卡中可以设置自解压路径,解压路径是设置的默认解压时解压在你设置的文件夹下
如果设置 在“Program Files”中创建 的话,安装时的默认路径会在C盘的Program Files中
- 在 更新 选项卡中 覆盖方式 选择 覆盖所有文件
- 如果想自动创建桌面快捷方式的话,可以在 高级 选项卡中选中 请求管理员密码 ,并点击 添加快捷方式 按钮,在里边设置相应的参数(注意源文件名要加路径)
- 点击确定,开始创建压缩文件
创建完成后,会生成一个exe文件,双击文件安装