electron官网:
https://electronjs.org/docs/tutorial/about
关于electron
Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中,并将其打包为Mac,Windows和Linux系统下的应用来实现这一目的。
electron创建
第一种方式创建
# 克隆这仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入仓库
$ cd electron-quick-start
# 安装依赖库
$ npm install
# 运行应用
$ npm start
第二种方式创建:
- 新建一个空文件夹后,运行npm init --yes,会自动创建package.json的文件,此文件需要微调为如下方式,其中main字段是启动主进程入口。
如下
{
"name": "electron1",
"version": "1.0.0",
"description": "",
"main": "main.js",//启动入口文件
"scripts": {
"start": "electron ."//此处原先的node修改electron
},
"keywords": [],
"author": "",
"license": "ISC",
}
- 执行如下语句安装electron,则自动添加到package.json的开发依赖项中 “devDependencies”: {
“electron”: “^7.1.2”
},
npm install --save-dev electron
- 新建main.js文件
//electron模块引入
const electron = require('electron');
//创建electron的引用
const app = electron.app;
//创建browserwindow类引用
var BrowserWindow = electron.BrowserWindow;
/**注意
* electron.app负责管理Electron 应用程序的生命周期
* electron.BrowserWindow类负责创建窗口
*/
var mainWindow = null;
/**
*保持对window对象的全局引用,如果不这么做的话,当JavaScript对象被
*垃圾回收的时候,window对象将会自动的关闭
*/
//当准备就绪时,就会创建400*400窗口
app.on('ready', function () {
var mainWindow = null;
mainWindow = new BrowserWindow({
width: 400, height: 400,
//添加webPreferences属性才能获取node操作,如文件读取
webPreferences: {
nodeIntegration: true
}
}
);
mainWindow.webContents.openDevTools()//打开开发者工具
mainWindow.loadFile('index.html');//加载本地文件
//mainWindow.loadURL('http://www.baidu.com')//加载远程文件
mainWindow.on('closed', () => {
mainWindow = null;
})
})
运行结果