1. 安装node
作为一个前端应该都知道node,这里久不介绍了
2. 全局安装electron
这里使用的是npm的方式安装
# 全局安装 electron
npm install -g electron
3. 创建我们的项目文件
这里我们创建一个空的demo文件夹
4. 初始化npm
npm init -y
5. 安装Electron
这一步可能会非常慢,可能会失败,推荐大家使用cnpm
安装,如果安装失败可以将整个文件夹删掉重新操作一遍
# 开发环境安装 Electron
npm install electron --save-dev
# 检查安装,低版本node不支持
npmx electron -v
6. 创建入口文件
创建一个index.html
文件和index.js
文件,这里要注意,js
文件的文件名要和package.json
文件下的文件名一致,如下图:
7. 添加index.js
中的代码
var electron = require('electron');
var app = electron.app;
// 窗口对象
var BrowserWindow = electron.BrowserWindow;
// 声明打开的主窗口
var mainWindow = null;
// 主进程
app.on("ready", ()=> {
mainWindow = new BrowserWindow({
width: 1200,
height:800,
// 使用nodeapi
webPreferences: {
nodeIntegration: true
}
})
mainWindow.loadFile('/index.html');
// 监听关闭窗口
mainWindow.on("closed", ()=> {
mainWindow = null
})
})
这里如果我们要使用线上域名的话把mainWindow.loadFile('/index.html');
改成mainWindow.loadURL('http://www.xxx.cn');
就可以了
8. 运行
electron .
看看效果:
9. 调试
直接上图
10. 打包发布
# 安装打包工具
npm install --save-dev @electron-forge/cli
npx electron-forge import
# 打包
npm run make
到这里我们的应用就打包完成了,有问题欢迎大家留言哦