npm install electron -g
npm install electron-packager -g
此例只进行最简单的转换,详细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 .
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),添加到压缩文件,在 常规 选项卡中选择 创建自解压格式压缩文件 (不同的压缩文件按钮的位置可能会不同)
在 更新 选项卡中 覆盖方式 选择 覆盖所有文件
在 文本和图标中可以自定义文件的图标等信息(就不放图了)
点击确定,开始创建压缩文件
做成单个的执行文件有一个致命的缺点,就是每次打开都相当于重新解压一次文件夹,运行速度缓慢,所以可以做成一个安装包(其实也是自解压格式)
创建完成后,会生成一个exe文件,双击文件安装