Electron + VSCode环境创建运行调试基本应用程序

最新推荐文章于 2024-07-10 03:05:45 发布

离歌漠

最新推荐文章于 2024-07-10 03:05:45 发布

阅读量1.4k

点赞数 3

分类专栏： Electron

本文链接：https://blog.csdn.net/qq_36651243/article/details/116230003

版权

Electron 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Electron环境部署

1.创建项目文件夹

mkdir electron
cd electron

2.创建package.json

使用默认填写

npm init -y

在这里插入图片描述
手动填写package.json相关的配置信息

npm init

在这里插入图片描述
本文选择的手动填写

关于package.json配置信息

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，点击即可运行
在这里插入图片描述

离歌漠

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
Electron + VSCode环境创建运行调试基本应用程序

Electron环境部署1.创建项目文件夹mkdir electroncd electron2.创建package.json使用默认填写npm init -y手动填写package.json相关的配置信息npm init本文选择的手动填写关于package.json配置信息3.在项目工程目录下安装Electronnpm install electron --save-dev如果需要指定对应版本的Electron(@^版本号)npm install electron@^
复制链接

扫一扫