Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。
前端又打开了一扇通向新世界的大门,通过Electron前端就可以开发桌面应用啦。
先来了解一下框架的基本配置。
安装
npm install electron@6.1.0 -g --save
npm install electron-packager -g --save
后者是electron的打包工具。
最新版本的electron可能会安装失败。
和webpack打包很像,需要package.json和一个入口的js文件。
package.json
start是不打包在测试环境运行,version是查看electron的库版本(这和安装时候的6.1.0版本不一样),package这个比较重要,是专门用来打包的命令其中test是项目的名字,--win是打包windows平台,--out是打包生成的位置,--arch是打包成64位(x64)或32位(ia32),--electron-version是对应的刚才用version查出来的版本库,--icon是logo图标
{
"name": "test",
"version": "0.0.1",
"description": "a simple application",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"version": "electron -v",
"package": "electron-packager . test --win --out ./test --arch=x64 --electron-version=1.6.15 --icon=logo.ico"
},
"author": "test",
"license": "ISC",
"dependencies": {
"iconv-lite": "^0.5.0"
}
}
main.js
这里做工程中相关的配置,包括窗口大小和一些相关的类似生命周期的逻辑处理
const {app,BrowserWindow,ipcMain} = require('electron');
let win;
let windowConfig = {
width: 750,
height: 712,
webPreferences: {
javascript: true,
plugins: true,
nodeIntegration: true, // 是否集成 Nodejs
webSecurity: false,
}
};
function createWindow() {
win = new BrowserWindow(windowConfig);
win.loadURL(`file://${__dirname}/index.html`);//关联的页面文件
//开启调试工具
win.webContents.openDevTools();
win.on('close', () => {
//回收BrowserWindow对象
win = null;
});
win.on('resize', () => {
// win.reload();
})
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
app.quit();
});
app.on('activate', () => {
if (win == null) {
createWindow();
}
})
基本的配置大体就完成了