之前我们已经用html+css+js创建了一个项目,现在将这个项目用electron以应用程序呈现。
一、创建一个electron应用程序
1,首先新建一个文件夹,从终端进入该文件夹
2,在该文件夹下执行npm init,初始化该项目
主要要填写description、author和name等关键值,不填写的话后面打包会报错,执行完毕,在该文件夹下会多出一个package.json文件。
3,然后在vscode(或其他编辑器)中打开该文件夹,安装electron
使用npm install electron --save-dev 或 yarn add electron --dev安装electron,建议使用yarn。
如果没有报错,可直接到第4步。
如果安装electron报错RequestError: read ECONNRESET,可以参考解决方法:
- 执行npm install electron 后, 当运行到node install.js时(终端会有显示),此时中断执行(ctrl+c)
- 进入 node_modules/electron文件下, 编辑install.js
- 修改downloadArtifact这段代码, 添加淘宝镜像地址
downloadArtifact({
version,
artifactName: 'electron',
force: process.env.force_no_cache === 'true',
cacheRoot: process.env.electron_config_cache,
checksums: process.env.electron_use_remote_checksums ? undefined : require('./checksums.json'),
mirrorOptions:{
mirror:'https://cdn.npm.taobao.org/dist/electron/',
platform,
arch,
}
}).then(extractFile).catch(err => {
console.error(err.stack);
process.exit(1);
});
- 然后在当前目录 的cmd中执行 node install.js
4,打开package.json,将main的值修改为main.js
5,打开main.js:
笔者这里使用win.webContents.openDevTools({ mode: "detach" });,表示在新窗体打开控制台。
const electron = require("electron");
const { app, ipcMain, BrowserWindow, screen } = electron;
const path = require('path');
let win,size;
let isMax = false;
app.on("ready", (e) => {
size = screen.getPrimaryDisplay().workAreaSize;
win = new BrowserWindow({
width: 1366,
height: 768,
resizable: false,
frame: false,
fullscreenable: true,
backgroundColor: "transparent",
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
preload: path.join(__dirname, './preload.js')
},
});
app.setAppUserModelId("zoie");
win.loadURL(__dirname + "/index.html");
win.show();
win.webContents.openDevTools({ mode: "detach" });
});
ipcMain.on("mini-win", () => {
win.minimize();
});
ipcMain.on("toggle-win", () => {
isMaximized = !isMax;
let h = isMax ? size.height : 768;
let w = isMax ? size.width : 1366;
win.setBounds({
height: h,
width: w,
x: Math.floor((size.width - w) / 2),
y: Math.floor((size.height - h) / 2),
});
});
ipcMain.on('close-win', () => {
win.close();
win.destroy();
app.quit();
})
其中preload: path.join(__dirname, './preload.js')表示项目中预加载的文件是preload.js,可以在preload.js文件中引入一些必要的模块,如下:
window.ipcRenderer = require('electron').ipcRenderer;
window.shell = require('electron').shell;
6,在package.json中添加:
"scripts": {
"start": "electron ."
},
7,将html+css+js创建的项目复制到当前文件夹,运行npm start,启动electron应用程序:
二,打包electron
1,在当前项目下运行
npm install --save-dev @electron-forge/cli
npx electron-forge import
此时package.json内容如下:
可以看到script已经被修改为如下命令:
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make"
},
2,打包
运行npm run make
在项目中生成了out文件夹,其中包含两个文件夹,打包成功啦!