Electron环境部署
1.创建项目文件夹
mkdir electron
cd electron
2.创建package.json
使用默认填写
npm init -y
手动填写package.json相关的配置信息
npm init
本文选择的手动填写
3.在项目工程目录下安装Electron
npm install electron --save-dev
如果需要指定对应版本的Electron(@^版本号)
npm install electron@^12.0.5 --save-dev
安装完后可以在项目工程看到node_modules文件夹和package-lock.json文件
node_modules是运行npm install的时候node自动生成此项目本地存放插件库的文件夹
package-lock.json存储下载地址和相关依赖,当node_modules文件夹被删除后,依然可以执行npm install
目前为止,Electron环境已经创建好了,下面写了一个简单的js应用程序测试
基本应用程序创建
1.创建Electron应用程序的入口
前面生成的package.json相关联的js文件为main.js,因此需要创建main.js
//采用javascript严格模式
'use strict';
// 应用的控制模块
const electron = require('electron');
const app = electron.app;
// 创建原生浏览器窗口的模块
const BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
// 当所有窗口都关闭的时候退出应用
app.on('window-all-closed', function () {
if (process.platform != 'darwin') {
app.quit();
}
});
// 当 Electron 结束的时候,这个方法将会生效
// 初始化并准备创建浏览器窗口
app.on('ready', function () {
// 创建浏览器窗口.
mainWindow = new BrowserWindow({
//窗口大小
width: 800,
height: 600
});
// 载入应用的 main.html
mainWindow.loadURL('file://' + __dirname + '/main.html');
// 打开开发工具
// mainWindow.openDevTools();
//开放控制台
/*mainWindow.webContents.openDevTools({
//控制台位置
mode:'bottom'
});*/
// 窗口关闭时触发
mainWindow.on('closed', function () {
// 想要取消窗口对象的引用,如果你的应用支持多窗口,
// 通常你需要将所有的窗口对象存储到一个数组中,
// 在这个时候你应该删除相应的元素
mainWindow = null;
});
});
2.创建应用网页
写一个简单的helloworld输出
网页文件命名按照上一步创建main.js中加载的html命名,创建main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
</body>
</html>
目前为止,Electron环境和简单的应用程序已经创建好了,只需运行查看效果
3.运行应用网页
electron .
VSCode + Electron运行和调试应用网页
1.用VSCode打开整个项目文件夹后,点击运行和调试按钮或者快捷键Ctrl+Shift+D
2.创建launch.json文件
3.在launch.json文件添加Electron配置
4.切换成Electron配置,点击运行或者F5快捷运行
VSCode + Electron + gulp运行应用网页
1.安装gulp
npm install gulp -save-dev
2.创建gulpfile.js文件,该文件用于创建gulp任务
//获取依赖
var gulp = require('gulp'),
childProcess = require('child_process'),
electron = require('electron');
//创建 gulp 任务(electronDemo: 可以随意命名,gulp执行目标任务的名字)
gulp.task('electronDemo', function () {
childProcess.spawn(electron, ['.'], { stdio: 'inherit' });
});
3.cmd测试gulp运行应用网页
gulp electronDemo
4.VSCode创建gulp任务运行应用网页
查看package.json是否引用gulp
用Ctrl+Shift+P打开运行下拉框找到 任务:运行任务,点击后选择gulp,后续会出现gulp:electronDemo,点击即可运行