当前位置： 首页 > news >正文

Electron入门，项目运行，只需四步轻松搞定。

news 文章来源：https://blog.csdn.net/qq_41792374/article/details/132357676 2024/11/30 3:30:02

electron 简单介绍：
实现：HTML/CSS/JS桌面程序，搭建跨平台桌面应用。
electron 官方文档：
[https://electronjs.org/docs]
本文是基于以下2篇文章且自行实践过的，可行性真实有效。
文章1： https://www.cnblogs.com/sunshine-blog/p/9915222.html
文章2：https://jingyan.baidu.com/album/9225544671aecf851648f484.html?picindex=2
总结：
1 创建项目文件夹，我随便取名newBing
2 项目初始化，生成package.json。（使用命令npm init -y 初始化生成package.json文件）
3 很重要，就是安装electron的依赖包咯：
项目终端运行：npm install electron -g【加g是全局安装，自动添加到环境变量中】
检查是否安装成功：输入electron回车，出现一个类似浏览器的工具，直接拖进去一个网页即可
（以上操作安装如果不成功，就换代理镜像，切cnpm等操作，安装下来就行，检查是否安装成功：输入electron回车，出现一个类似浏览器的工具：）
在这里插入图片描述

4.第四步，配置必要的文件，下图一是基本的electron可启动的项目结构，完成前三步的应该有以下红框中的文件。我们再手动配2个文件index.html和main.js就能启动了

在这里插入图片描述
index.html代码：

<!DOCTYPE html><html><head><title>桌面应用title</title></head><body><h1>Hello World!</h1>We are using io.js <script>alert('桌面应用')</script>and Electron <script>document.write(process.versions['electron'])</script>.</body></html>

main.js代码：

const electron = require('electron');
const app = electron.app; // 控制应用生命周期的模块。
const BrowserWindow = electron.BrowserWindow;// 创建原生浏览器窗口的模块
// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;
// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function() {// 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前// 应用会保持活动状态if (process.platform != 'darwin') {app.quit();}
});
// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function() {// 创建浏览器窗口。mainWindow = new BrowserWindow({width: 800, height: 600});// 加载应用的 index.htmlmainWindow.loadURL('file://' + __dirname + '/index.html');// 打开开发工具mainWindow.openDevTools();// 当 window 被关闭，这个事件会被发出mainWindow.on('closed', function() {// 取消引用 window 对象，如果你的应用支持多窗口的话，// 通常会把多个 window 对象存放在一个数组里面，// 但这次不是。mainWindow = null;});
});

package.json：

{"name": "new-bing","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"cnpm": "^9.2.0"}
}

要注意下package.json里的mian对应的是main.js还是index.js,名字要和我们目录下的入口文件一样。
接下来就是打开我们新建的应用了，根据图一的相对路径 ，找到electron的绝对路径加空格拼上我们项目的绝对路径，就打开了，我的是cmd运行 （window+R.输入cmd，弹框输入以下命令:）：在这里插入图片描述

C:\Users\Administrator\AppData\Roaming\npm\node_modules\electron\dist\electron.exe C:\Users\Administrator\Desktop\新人资料\NewBing
打开后的效果为：在这里插入图片描述
以上就是新建electron项目及运行的教程，文章到此结束了！
下面是我的参考文章2里的打开方式：
在这里插入图片描述

相关文章：

Electron入门，项目运行，只需四步轻松搞定。

electron 简单介绍&#xff1a; 实现&#xff1a;HTML/CSS/JS桌面程序&#xff0c;搭建跨平台桌面应用。 electron 官方文档&#xff1a; [https://electronjs.org/docs] 本文是基于以下2篇文章且自行实践过的&#xff0c;可行性真实有效。 文章1&#xff1a; https://www.cnbl…...

编程日记 2023/8/22 4:20:00

【C++】visualstudio环境安装

记录了部分安装步骤&#xff0c;可能有点不全&#xff0c;参考下&#xff0c;需要的磁盘空间差不多20GB&#xff1b; 下载 https://visualstudio.microsoft.com/zh-hans/vs/ 下载完成&#xff1a; 双击进入安装状态&#xff1a; 根据自己的需求勾选安装项&#xff1a; 选择…...

编程日记 2023/8/22 4:18:58

使用MySQL:5.6和owncloud镜像搭建个人网盘

拉取镜像 [rootkvm ~]# docker pull mysql:5.6[rootkvm ~]# docker pull owncloud启动mysql容器 [rootkvm ~]# docker run -d --name db1 -e MYSQL_ROOT_PASSWORDroot mysql:5.6 db832e4e4333a0e9a7c152a67272721fdbe5381054090c5eb24f90455390a852 [rootkvm ~]# docker ps …...

编程日记 2023/8/22 4:17:55

php中创建对象时传递的参数是构造方法

PHP中创建对象时&#xff0c;可以通过构造方法的参数来传递参数值。构造方法是一个特殊的方法&#xff0c;在创建对象时会自动调用&#xff0c;用于进行对象的初始化操作。 以下是一个示例代码&#xff0c;展示了如何在PHP中使用构造方法传递参数&#xff1a; class MyClass …...

编程日记 2023/8/22 4:16:53

C++并发及互斥保护示例

最近要写一个多线程的并发数据库&#xff0c;主要是希望使用读写锁实现库的并发访问&#xff0c;同时考虑到其他平台(如Iar)没有C的读写锁&#xff0c;需要操作系统提供&#xff0c;就将读写锁封装起来。整个过程还是比较曲折的&#xff0c;碰到了不少问题&#xff0c;在此就简…...

编程日记 2023/8/22 4:15:51

新手常犯的错误，anzo capital昂首资本一招避免少走弯路

新手是不是经常交易中赚不到钱&#xff0c;今天anzo capital昂首资本就盘点一下新手常犯的错误&#xff0c;一招教你少走弯路。 一.随便选择交易账户 开立实时账户时选择正确的账户类型&#xff0c;anzo capital昂首资本教你比较所有提供的账户类型&#xff0c;选择最符合财务…...

编程日记 2023/8/22 4:14:50

Java Vue (el-date-picker组件) 前后端 关于时间格式数据的处理方法

前端使用 elment-ui 组件 el-date-picker 其中组件需要格式化时间&#xff0c;增加属性 value-format"yyyy-MM-dd" 后端 Java 接收参数类型 后端Dto 使用Date接收&#xff0c;并添加JsonFormat注解 JsonFormat(pattern"yyyy-MM-dd") private Date testTi…...

编程日记 2023/8/22 4:13:48

Python爬虫——scrapy_多条管道下载

定义管道类&#xff08;在pipelines.py里定义&#xff09; import urllib.requestclass DangDangDownloadPipelines:def process_item(self, item, spider):url http: item.get(src)filename ../books_img/ item.get(name) .jpgurllib.request.urlretrieve(url, filename…...

编程日记 2023/8/22 4:12:47

lombok启动不生效（什么方法都试了，可还是不生效怎么办 ？！ 救救我）

使用IntelliJ IDEA 2021.1.3&#xff08;Ultimate Edition&#xff09;时提示Lombok不生效 java: You aren’t using a compiler supported by lombok, so lombok will not work and has been disabled. 方式一&#xff1a;我们手动更新一下版本到以下版本 <!--Lombok--&…...

编程日记 2023/8/22 4:11:44

element文本域禁止手动拉伸、两种方式、textarea

文章目录 style方式element自带的禁止拉伸方法建议 style方式 html <el-inputv-model"content":rows"3"class"r_n"type"textarea"maxlength"40"placeholder""style"height: 100%;" />css style…...

编程日记 2023/8/22 4:10:43

c#中lambda表达式缩写推演

Del<string> ml new Del<string>(Notify);//泛型委托的实例化&#xff0c;并关联Nofity方法 Del<string> ml new Del<string>(delegate (string str) { return str.Length; });//将Nofity变更为匿名函数 Del<string> ml delegate(string str)…...

编程日记 2023/8/22 4:09:39

无涯教程-PHP - 循环语句

PHP中的循环用于执行相同的代码块指定的次数。 PHP支持以下四种循环类型。 for - 在代码块中循环指定的次数。 while - 如果且只要指定条件为真&#xff0c;就会循环遍历代码块。 do ... while - 循环执行一次代码块&#xf…...

编程日记 2023/8/22 4:08:38

思维进化算法(MEA)优化BP神经网络

随着计算机科学的发展,人们借助适者生存这一进化规则,将计算机科学和生物进化结合起来,逐渐发展形成一类启发式随机搜索算法,这类算法被称为进化算法(Evolutionary Com-putation, EC)。最著名的进化算法有:遗传算法、进化策略、进化规划。与传统算法相比,进化算法的特点是群体搜…...

编程日记 2023/8/22 4:07:35

Kotlin 中的 设计模式

单例模式 饿汉模式 饿汉模式在类初始化的时候就创建了对象&#xff0c;所以不存在线程安全问题。 局限性&#xff1a; 1、如果构造方法中有耗时操作的话&#xff0c;会导致这个类的加载比较慢&#xff1b; 2、饿汉模式一开始就创建实例&#xff0c;但是并没有调用&#xf…...

编程日记 2023/8/22 4:05:27

Vulnhub: ICMP: 1靶机

kali&#xff1a;192.168.111.111 靶机&#xff1a;192.168.111.208 信息收集 端口扫描 nmap -A -sC -v -sV -T5 -p- --scripthttp-enum 192.168.111.208 80端口的cms为Monitorr 1.7.6m 搜索发现该版本的cms存在远程代码执行 searchsploit monitorr 漏洞利用 nc本地监听&…...

编程日记 2023/8/22 4:04:26

我的创作纪念日（C++修仙练气期总结）

分享自己最喜欢的一首歌&#xff1a;空想フォレスト—伊東歌詞太郎 机缘 现在想想自己在CSDN创作的原因&#xff0c;一开始其实就是想着拿着博客当做自己的学习笔记&#xff0c;笔记嘛&#xff0c;随便写写&#xff0c;自己看得懂就ok了的态度凸(艹皿艹 )。也是用来作为自己学习…...

编程日记 2023/8/22 4:03:24

css的常见伪元素使用

1.first-line 元素首行设置特殊样式。 效果演示&#xff1a; <div class"top"><p>可以使用 "first-line" 伪元素向文本的首行设置特殊样式。<br> 换行内容 </p></div> .top p::first-line {color: red;} 2.first-lette…...

编程日记 2023/8/22 4:02:22

91. 解码方法

递归法&#xff1a;超时了 从字符串的后面向前计算&#xff0c;每一次递归都缩小子集 public class Solution {public int NumDecodings(string s) {return RecursiveAdd(s, s.Length - 1);}public int RecursiveAdd(string s, int index) {// 已经到最后一个元素if(index <…...

编程日记 2023/8/22 4:01:21

docker搭建opengrok环境2

引言&#xff1a; 虚拟机关闭后重新开启&#xff0c;理论上是需要重新启动一下docker的&#xff0c;以重新启动其中的服务。 命令基础&#xff1a; docker images&#xff1a;查看docker中现有的镜像 docker container ls -all&#xff1a;查看docker中目前在运行的containe…...

编程日记 2023/8/22 4:00:17

【校招VIP】java语言考点之ConcurrentHashMap1.7和1.8

考点介绍&#xff1a; ConcurrentHashMap是JAVA校招面试的热门考点&#xff0c;主要集中在1.7和1.8的底层结构和相关的性能提高。 理解这个考点要从map本身的并发问题出发&#xff0c;再到hashTable的低性能并发安全&#xff0c;引申到ConcurrentHashMap的分块处理。同时要理解…...

编程日记 2023/8/22 3:59:14

php如何实现5x+2x+1x=100

要实现5x 2x 1x 100的计算&#xff0c;可以使用PHP来解方程。以下是一个简单的PHP代码示例&#xff1a; php <?php $x 1; // 初始化x的值while (5*$x 2*$x 1*$x ! 100) { // 循环直到方程成立$x; // 每次循环增加x的值 }echo "x " . $x; // 输出x的值 ?…...

编程日记 2023/8/22 3:58:13

机器人项目：从 ROS2 切换到 ROS1 的原因

一、说明 机器人操作系统ROS是使用最广泛的机器人中间件平台。它在机器人社区中使用了10多年&#xff0c;无论是在业余爱好者领域还是在工业领域。ROS可用于各种微控制器和计算机&#xff0c;从Arduino到Raspberry Pi再到Linux工作站&#xff0c;它为电机控制器&#xff0c;视觉…...

编程日记 2023/8/22 3:57:11

Vault主题 - UiCore多用途Elementor WordPress主题

你可以使用Vault主题 – UiCore多用途Elementor WordPress主题构建什么&#xff1f; Vault主题拥有专业、像素级完美且干净的现代布局&#xff0c;几乎适合您需要的任何网站&#xff1a; 小型企业网站企业网站着陆页面权威博客销售和营销页面网上商店 自由职业者的最佳选择 …...

编程日记 2023/8/22 3:56:09

G0第26章：微服务概述与gRPCprotocol buffers

Go微服务与云原生 1、微服务架构介绍 单体架构&#xff08;电商&#xff09; SOA架构&#xff08;电商&#xff09; 微服务架构&#xff08;电商&#xff09; 优势 挑战 拆分 发展史 第一代:基于RPC的传统服务架构 第二代:Service Mesh(istio) 微服务架构分层 核心组件 Summar…...

编程日记 2023/8/22 3:55:07

三款远程控制软件对比，5大挑选指标：安全、稳定、易用、兼容、功能

陈老老老板&#x1f934; &#x1f9d9;‍♂️本文专栏&#xff1a;生活&#xff08;主要讲一下自己生活相关的内容&#xff09;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f9d9;‍♂️本文简述&#xff1a;三款远程控制软件对比&#xff0c;5大挑选指标&#xff1…...

编程日记 2023/8/22 3:54:05

Java中static的应用之单例模式

单例模式是一种创建对象的设计模式&#xff0c;它保证一个类只有一个实例&#xff0c;并提供一个全局访问点。由于单例模式只允许存在一个实例&#xff0c;因此它可以节省系统资源并提高程序的性能。在许多情况下&#xff0c;单例模式在应用程序中都是非常有用的&#xff0c;例…...

编程日记 2023/8/22 3:53:04

TypeError: Cannot read properties of undefined (reading ‘container‘)

问题环境&#xff1a; element项目 el-table的错误 项目是由 webpack项目迁移为 vite项目 问题描述&#xff1a; errorLog.js?t1692581753160:17 TypeError: Cannot read properties of undefined (reading container) at unbind (infinite-scroll.js:259:31) …...

编程日记 2023/8/22 3:51:59

Vue--BM记事本

效果如下&#xff1a; 用到了如下的技术&#xff1a; 1.列表渲染&#xff1a;v-for key的设置 2.删除功能&#xff1a;v-on调用参数 fliter过滤 覆盖修改原数组 3.添加功能&#xff1a;v-model绑定&#xff0c;unshift修改原数组添加 html文件如下&#xff1a; <!DOCTYPE …...

编程日记 2023/8/22 3:50:57

openpnp - 板子上最小物料封装尺寸的选择

文章目录 openpnp - 板子上最小物料封装尺寸的选择概述END openpnp - 板子上最小物料封装尺寸的选择 概述 现在设备调试完了, 用散料飞达载入物料试了一下. 0402以上贴的贴别准, 贴片流程也稳, 基本不需要手工干预. 0201可以贴, 但是由于底部相机元件视觉识别成功率不是很高…...

编程日记 2023/8/22 3:49:54

什么是非功能性需求，它们如何影响产品开发？

我们在选购新车时&#xff0c;会预设一些选购的标准&#xff0c;比如GPS导航必须能够保存目的地&#xff0c;或者必须要买黑色的车。我们可能下意识以为这些是功能性需求&#xff0c;但实际上这些特性都是与用户体验相关的非功能性需求。 一、什么是非功能性需求(NFR)? 非功…...

编程日记 2023/8/22 3:48:53

linux虚机 wordpress/百度认证考试

一般图像数据都是以RGBRGBRGB……字节流的方式&#xff08;解码完成后的原始图像流&#xff09;&#xff0c;我说成字节流&#xff0c;那就表明R&#xff0c;G&#xff0c;B的值各占一个字节&#xff0c;在编程时表示的就是unsigned char * data。 我们先来看一下QT中的QImage对…...

编程日记 2024/11/30 1:58:45

网站重构/百度搜索风云榜小说

1、x-xt&#xff0c;ut&#xff0c;h0.1&#xff0c;t[0,10]&#xff0c;在MATLAB语言环境下构造m文件&#xff0c;编写RK4算法程序进行求解&#xff0c;绘图显示运算结果。参考程序&#xff1a;x1;yx;h0.1;Nround(10/h);t0;T0;for i1:Nk1-xt;k2-(xh*k1/2)th/2;k3-(xh*k2/2)th/…...

编程日记 2024/11/30 0:20:08

响应式网站的设计趋势/百度关键词多少钱一个月

冒泡排序 让编程改变世界 Change the world by program [caption id"attachment_576" align"aligncenter" width"300"]冒泡排序[/caption] 好了&#xff0c;我们回到正题&#xff0c;这次的阶段性上机实践小甲鱼想让大家学点”骨髓”的东西&…...

编程日记 2024/11/29 23:51:48

石家庄城市建设档案馆网站/成都网站建设公司

有时&#xff0c;使用临时的windows机子&#xff0c;要进行ftp简单操作&#xff0c;但又不想装其它的ftp-client&#xff0c;可以直接使用windows command中的命令ftp来操作。 通常&#xff0c;ftp服务器按标准&#xff0c;使用utf8编码格式发送文件名&#xff0c;而widows自带…...

编程日记 2024/11/29 23:48:45

晋城两学一做网站/四川省人民政府官网

让大家对IPv6 有初步了解IPv6诞生的背景和解决的问题IPv6的地址和地址类型IPv6的过渡技术和部署ipv4是2的32次方也就4G多个IP地址&#xff0c;大部份地址都在美国占了70%其它国家只有30%&#xff0c;中国只份了5A9B190C &#xff0c;中国20几人才一个IP地址而美国1人9个&#…...

编程日记 2024/11/29 22:28:07

沈阳德泰诺网站建设公司/建站

那个身高不足一米六零的东方小个子&#xff0c;这次很有可能又搞了一笔大买卖。 据多家外媒报道&#xff0c;日本软银已同意以234亿英镑收购芯片巨头ARM。软银将为每股ARM股票现金支付17英镑&#xff0c;较ARM上周收盘价溢价43%。目前官方还未公开确认。 在此之前&#xff0c;软…...

编程日记 2024/11/29 19:50:33