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

Electron入门，项目启动。

news 2025/7/3 2:40:12

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
打开后的效果为：在这里插入图片描述
文章到此结束了、
下面是我的参考文章2里的打开方式：
在这里插入图片描述

相关文章：

Electron入门，项目启动。

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

编程日记 2023/8/19 6:23:26

深入理解索引B+树的基本原理

目录 1. 引言 2. 为什么要使用索引&#xff1f; 3. 索引的概述 4. 索引的优点是什么&#xff1f; 4.1 降低数据库的IO成本&#xff0c;提高数据查找效率 4.2 保证数据库每一行数据的唯一性 4.3 加速表与表之间的连接 4.4 减少查询中分组与排序的执行时间 5. 索引的缺点…...

编程日记 2023/8/19 6:22:25

vue3 简易用对话框实现点击头像放大查看

设置头像悬停手势 img:hover{cursor: pointer;}效果&#xff1a; 编写对话框 <el-dialog class"bigAvatar"style"border-radius: 4px;"v-model"deleteDialogVisible"title"查看头像"top"5px"><div><img src&…...

编程日记 2023/8/19 6:21:24

opencv 矩阵运算

1.矩阵乘&#xff08;*&#xff09; Mat mat1 Mat::ones(2,3,CV_32FC1);Mat mat2 Mat::ones(3,2,CV_32FC1);Mat mat3 mat1 * mat2; //矩阵乘 结果 2.元素乘法或者除法&#xff08;mul&#xff09; Mat m Mat::ones(2, 3, CV_32FC1);m.at<float>(0, 1) 3;m.at…...

编程日记 2023/8/19 6:20:22

第四章 字符串part01

344.反转字符串 public void reverseString(char[] s) {int len s.length;int left 0;int right len-1;while (left < right){char tmp s[right];s[right] s[left];s[left] tmp;left;right--;} }反转字符串II 注意String不可变&#xff0c;因此可使用char数组或者St…...

编程日记 2023/8/19 6:19:21

Python3内置函数大全

吐血整理 Python3内置函数大全 1.abs()函数2.all()函数3.any()函数4.ascii()函数5.bin()函数6.bool()函数7.bytes()函数8.challable()函数9.chr()函数10.classmethod()函数11.complex()函数12.complie()函数13.delattr()函数14.dict()函数15.dir()函数16.divmod()函数17.enumer…...

编程日记 2023/8/19 6:18:19

什么是“新型基础设施”？建设重点是什么？

一是信息基础设施。主要是指基于新一代信息技术演化生成的基础设施&#xff0c;比如&#xff0c;以5G、物联网、工业互联网、卫星互联网为代表的通信网络基础设施&#xff0c;以人工智能、云计算、区块链等为代表的新技术基础设施&#xff0c;以数据中心、智能计算中心为代表的…...

编程日记 2023/8/19 6:17:17

混杂接口模式---vlan

策略在两个地方可以用--1、重发布 2、bgp邻居 2、二层可以干的&#xff0c;三层也可以干 3、未知单播&#xff1a;交换机的MAC地址表的记录保留时间是5分钟&#xff0c;电脑的ARP表的记录保留时间是2小时 4、route recursive-lookup tunnel 华为默认对于bgp学习来的路由不开启标…...

编程日记 2023/8/19 6:16:15

Greenplum多级分区表添加分区报错ERROR: no partitions specified at depth 2

一般来说&#xff0c;我们二级分区表都会使用模版&#xff0c;如果没有使用模版特性&#xff0c;那么就会报ERROR: no partitions specified at depth 2类似的错误。因为没有模版&#xff0c;必须要显式指定分区。 当然我们在建表的时候&#xff0c;如果没有指定&#xff0c;那…...

编程日记 2023/8/19 6:15:13

EV PV AC SPI CPI TCPI

SPI EV / PV CPI EV / ACCPI 1.25 SPI 0.8 PV 10 000 BAC 100 000EV PV * SPI 10 000 * 0.8 8000 AC EV / CPI 8000 / 1.25 6400TCPI (BAC - EV) / (BAC -AC) (100 000 - 8 000) / (100 000 - 6 400) 92 000 / 93 600 0.98290598...

编程日记 2023/8/19 6:14:11

【电商领域】Axure在线购物商城小程序原型图，品牌自营垂直电商APP原型

作品概况 页面数量&#xff1a;共 60 页 兼容软件&#xff1a;Axure RP 9/10&#xff0c;不支持低版本 应用领域&#xff1a;网上商城、品牌自营商城、商城模块插件 作品申明&#xff1a;页面内容仅用于功能演示&#xff0c;无实际功能 作品特色 本作品为品牌自营网上商城…...

编程日记 2023/8/19 6:13:10

Cpp基础Ⅰ之编译、链接

1 C是如何工作的 工具&#xff1a;Visual Studio 1.1 预处理语句 在.cpp源文件中&#xff0c;所有#字符开头的语句为预处理语句 例如在下面的 Hello World 程序中 #include<iostream>int main() {std::cout <"Hello World!"<std::endl;std::cin.get…...

编程日记 2023/8/19 6:12:09

用户新增预测（Datawhale机器学习AI夏令营第三期）

文章目录 简介任务1&#xff1a;跑通Baseline实操并回答下面问题&#xff1a;如果将submit.csv提交到讯飞比赛页面&#xff0c;会有多少的分数&#xff1f;代码中如何对udmp进行了人工的onehot&#xff1f; 任务2.1&#xff1a;数据分析与可视化编写代码回答下面的问题&#xf…...

编程日记 2023/8/19 6:11:08

RGOS日常管理操作

RGOS日常管理操作 一、前言二、RGOS平台概述2.1、锐捷设备的常用登陆方式2.2、使用Console登入2.3、Telnet远程管理2.4、SSH远程管理2.5、登陆软件&#xff1a;SecureCRT 三、CLI命令行操作3.1、CLI命令行基础3.2、CLI模式3.3、CLI模式互换3.4、命令行特性3.4.1、分屏显示3.4.2…...

编程日记 2023/8/19 6:10:07

阿里云使用WordPress搭建个人博客

手把手教你使用阿里云服务器搭建个人博客 一、免费创建服务器实例 1.1 点击试用 点击试用会需要你创建服务器实例&#xff0c;直接选择默认的操作系统即可&#xff0c;点击下一步 1.2 修改服务器账号密码 二、创建云数据库实例 2.1 免费获取云数据库使用 2.2 实例列表页 在…...

编程日记 2023/8/19 6:09:05

供应链安全和第三方风险管理：讨论如何应对供应链中的安全风险，以及评估和管理第三方合作伙伴可能带来的威胁

第一章&#xff1a;引言 在当今数字化时代&#xff0c;供应链的安全性越来越受到重视。企业的成功不仅仅依赖于产品和服务的质量&#xff0c;还取决于供应链中的安全性。然而&#xff0c;随着供应链越来越复杂&#xff0c;第三方合作伙伴的参与也带来了一系列安全风险。本文将…...

编程日记 2023/8/19 6:08:04

《Java极简设计模式》第04章：建造者模式(Builder)

作者&#xff1a;冰河 星球&#xff1a;http://m6z.cn/6aeFbs 博客&#xff1a;https://binghe.gitcode.host 文章汇总&#xff1a;https://binghe.gitcode.host/md/all/all.html 源码地址&#xff1a;https://github.com/binghe001/java-simple-design-patterns/tree/master/j…...

编程日记 2023/8/19 6:07:02

Go download

https://go.dev/dl/https://golang.google.cn/dl/...

编程日记 2023/8/19 6:06:01

2023年Java核心技术面试第四篇（篇篇万字精讲）

目录 八. 对比Vector&#xff0c;ArrayList, LinkedList有何区别&#xff1f; 8.1 典型回答 8.1.1 Vector&#xff1a; 8.1.2 ArrayList &#xff1a; 8.1.3 LinkedList 8.2 考察点分析&#xff1a; 8.2.1 不同容器类型适合的场景 八. 对比Vector&#xff0c;ArrayList, Linke…...

编程日记 2023/8/19 6:04:59

数字化时代，数据仓库和商业智能BI系统演进的五个阶段

数字化在逐渐成熟的同时&#xff0c;社会上也对数字化的性质有了进一步认识。当下&#xff0c;数字化除了前边提到的将复杂的信息、知识转化为可以度量的数字、数据&#xff0c;在将其转化为二进制代码&#xff0c;引入计算机内部&#xff0c;建立数据模型&#xff0c;统一进行…...

编程日记 2023/8/19 6:03:58

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/7/1 4:28:17

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/6/19 11:42:45

K8S认证|CKS题库+答案| 11. AppArmor

目录 11. AppArmor 免费获取并激活 CKA_v1.31_模拟系统 题目 开始操作&#xff1a; 1&#xff09;、切换集群 2&#xff09;、切换节点 3&#xff09;、切换到 apparmor 的目录 4&#xff09;、执行 apparmor 策略模块 5&#xff09;、修改 pod 文件 6&#xff09;、…...

编程新知 2025/7/2 19:20:58

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2025/7/1 2:57:55

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

编程新知 2025/6/25 2:27:15

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/6/22 9:08:50

Leetcode 3577. Count the Number of Computer Unlocking Permutations

Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接&#xff1a;3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯&#xff0c;要想要能够将所有的电脑解锁&#x…...

编程新知 2025/6/23 6:42:53

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

编程新知 2025/6/26 10:09:35

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/6/25 14:59:03

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/6/21 13:17:52