electronjs设置宽度_electron基本配置

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();

}

})

基本的配置大体就完成了