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

electron快速入门

news 文章来源：https://blog.csdn.net/qq_36437991/article/details/133280201 2025/4/22 14:13:56

新建electronstu01文件夹

以管理员身份运行powershell，切换到该文件下

npm init -y

在这里插入图片描述
安装依赖包

npm install --save-dev electron

在这里插入图片描述
失败

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install --save-dev electron

在这里插入图片描述
修改 package.json

"start": "electron ."

启动

npm start

此脚本将告诉 Electron 在您项目根目录运行此时，您的应用将立即抛出一个错误提示您它无法找到要运行的应用

在这里插入图片描述
新建index.js，内容为空
新建index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>你好!</title></head><body><h1>你好!</h1>我们正在使用 Node.js <span id="node-version"></span>,Chromium <span id="chrome-version"></span>,和 Electron <span id="electron-version"></span>.</body>
</html>

index.js修改代码

const { app, BrowserWindow } = require("electron");const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,});win.loadFile("index.html");
};app.whenReady().then(() => {createWindow();
});

启动项目
在这里插入图片描述
虽然现在可以打开一个浏览器窗口，但你还需要一些额外的模板代码使其看起来更像是各平台原生的。应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。

当所有窗口都关闭的时候除了macos系统，其他系统应该关闭

app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

macos上如果没有新的窗口则创建一个

app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})

此时窗口控件应功能齐全

js内容动态渲染

不能直接在主进程中编辑DOM，因为它无法访问渲染器doucument上下文。它们存在于完全不同的进程，所以需要预处理
新建preload.js

window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}//访问 Node.js process.versions 对象，并运行一个基本的 replaceText 辅助函数将版本号插入到 HTML 文档中。for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}})

上面的代码要起作用需要在现有的 BrowserWindow 构造器中将路径中的预加载脚本传入 webPreferences.preload 选项。

const { app, BrowserWindow } = require("electron");
//引入nodejs的path模块
const path = require("node:path");
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, "preload.js"),},});win.loadFile("index.html");
};app.whenReady().then(() => {createWindow();app.on("activate", () => {if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});app.on("window-all-closed", () => {if (process.platform !== "darwin") app.quit();
});

__dirname:字符串指向当前正在执行脚本的路径 (在本例中，它指向你的项目的根文件夹)。
path.join :将多个路径联结在一起，创建一个跨平台的路径字符串。

index.html引入

<script src="./renderer.js"></script>

启动应用
在这里插入图片描述

打包

使用 Electron Forge
添加依赖

# cnpm install --save-dev @electron-forge/cli
# npx electron-forge import
# 上面代码失败，下面可以
npm config set ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/
npm config ls
# C:\Users\16471\.npmrc 修改npmrc即可
npx electron-forge import

在这里插入图片描述

在这里插入图片描述
一直失败可以直接复制package.json

{"name": "electronstu01","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "electron-forge start","package": "electron-forge package","make": "electron-forge make"},"keywords": [],"author": "","license": "ISC","devDependencies": {"@electron-forge/cli": "^6.4.2","@electron-forge/maker-deb": "^6.4.2","@electron-forge/maker-rpm": "^6.4.2","@electron-forge/maker-squirrel": "^6.4.2","@electron-forge/maker-zip": "^6.4.2","@electron-forge/plugin-auto-unpack-natives": "^6.4.2","electron": "^26.2.2"},"dependencies": {"electron-squirrel-startup": "^1.0.0"}
}

使用 Forge 的 make 命令来创建可分发的应用程序：

npm run make

在这里插入图片描述
添加上配置

进入文件夹之后有一个exe双击运行即可

electron快速入门

新建electronstu01文件夹以管理员身份运行powershell，切换到该文件下 npm init -y安装依赖包 npm install --save-dev electron失败 npm install -g cnpm --registryhttps://registry.npm.taobao.org cnpm install --save-dev electron修改 package.json &qu…...

编程日记 2023/9/27 8:00:11

C语言的stdio.h的介绍

C语言的stdio.h的介绍 C语言的stdio.h的介绍 C语言的stdio.h的介绍C语言stdio.h的介绍 C语言stdio.h的介绍这个含义是导入标准输入输出库包含头文件.h，std标准库，io是input output输入输出库 <>代表系统库，自定义的话用""…...

编程日记 2023/9/27 7:59:10

使用香橙派在Linux环境中安装并学习Python

前言在实际项目中，经常会遇到需要使用人工智能的场景，如人脸识别，车牌识别等...其一般的流程就是由单片机采集数据发送给提供人工智能算法模型的公司（百度云，阿里云...），然后人工智能将结果回…...

编程日记 2023/9/27 7:57:08

如何开发物联网 APP?

如何开发物联网 APP? 这个问题本身是不严谨的，APP只是手机端的一个控制或者用于显示的人机交互页面，物联网是通过传感器，物联网卡等模块把物体接入网络以方便远程监控或者控制等。你问的应该是怎么开发出来一个远程控制物体的APP吧&#x…...

编程日记 2023/9/27 7:55:06

配置pytorchGPU虚拟环境-python3.7

cuda版本的pytorch包下载地址戳这里 winR->输入cmd->输nvcc -V回车 cuda 11.0 输入以下命令来查找 CUDA 的安装路径： Windows: where nvcc 输入以下命令来查找 cuDNN 的版本号： Windows: where cudnn* cuDNN 8.0 本机安装的是cuda 11.0&…...

编程日记 2023/9/27 7:54:06

Logic Pro X10.7.9(mac乐曲制作软件)

Logic Pro X是由苹果公司开发的一款专业音频制作软件，主要用于音乐制作、录音、混音和母带处理等方面。以下是Logic Pro X的特点： 强大的音频编辑功能：Logic Pro X提供了丰富的音频编辑工具，包括波形编辑器、音频自动化、时间拉伸…...

编程日记 2023/9/27 7:53:05

第一部分：HTML5

目录一：网页 1.1：什么是网页？ 1.2：什么是HTML？ 1.3：网页的形成二：常用浏览器三：Web标准 3.1：为什么需要Web标准？ 3.2：Web标准的构成四&a…...

编程日记 2023/9/27 7:51:03

Linux 基础入门

目录一、计算机 1、组成 2、功能二、操作系统 1、定义 2、主要工作 3、操作系统内核功能 4、常见的操作系统三、Linux的组成四、搭建Linux学习环境五、安装远程连接Linux的软件 1、安装xshell 2、安装mobaxterm 六、Linux操作系统学习大纲一、计算机 1、组…...

编程日记 2023/9/27 7:50:02

【数据结构】插入排序：直接插入排序、折半插入排序、希尔排序的学习知识总结

目录 1、排序的基本概念 2、直接插入排序 2.1 算法思想 2.2 代码实现 3、折半插入排序 3.1 算法思想 3.2 代码实现 4、希尔排序 4.1 算法思想 4..2 代码实现 1、排序的基本概念排序是将一组数据按照预定的顺序排列的过程，排序的基本概念包括以下内容…...

编程日记 2023/9/27 7:49:01

Magic Battery for Mac：让你的设备电量管理变得轻松简单

Mac电脑用户们，你们是否曾经为了给设备充电而感到烦恼？是否希望能够方便地查看连接设备的电量情况？现在，有了Magic Battery for macOS，这些问题都将成为过去！ Magic Battery是一个实用的应用程序&#xff…...

编程日记 2023/9/27 7:48:00

nodejs+vue大学食堂订餐系统elementui

可以查看会员信息，录入新的会员信息，对会员的信息进行管理。网站管理模块对整个网站中的信息进行管理，可以查看会员留在留言栏中的信息，设置网站中的参数等。用户管理模块主要实现用户添加、用户修改、用户删除等功能。近年来&…...

编程日记 2023/9/27 7:45:58

nat综合实验

路漫漫其修远兮,吾将上下而求索。实验目的如图实验思路：配置内网，再配置外网，再做nat clien1配置 clien2配置 pc3配置 lsw1配置 sysname lsw1 # vlan batch 10 20 30 # interface MEth0/0/1 # interface Eth-Trunk1port link-type trunkp…...

编程日记 2023/9/27 7:44:57

【iOS逆向与安全】好用的一套 TCP 类

初始化 //页面 %hook xxxxxxxViewController//- (void)viewWillAppear:(BOOL)animated{ //NSLog("View Will Appear，再次进入刷新"); - (void)viewDidLoad{//启动tcp[[Xddtcp sharedTcpManager] connectServer] ;} 发送数据 //发送数据 [[Xddtcp shared…...

编程日记 2023/9/27 7:43:56

Ubuntu Kafka开机自启动服务

1、创建service文件在/lib/systemd/system目录下创建kafka.service文件 [Unit] DescriptionApache Kafka Server Documentationhttp://kafka.apache.org/documentation.html Requireszookeeper.service[Service] Typesimple Environment"JAVA_HOME/usr/local/programs/j…...

编程日记 2023/9/27 7:42:55

c#实现单例模式的两种方法（饿汉式、懒汉式）

在C#中，可以使用以下几种方式来实现单例模式： 饿汉式单例模式（Eager Singleton）： 在类加载时就创建实例。私有化构造函数，防止外部实例化。提供一个静态的只读属性来获取实例。代码示例： // 在C…...

编程日记 2023/9/27 7:39:53

Git与Repo：开源开发的得力工具组合

Git与Repo：开源开发的得力工具组合 1. 引言开源开发在当今的软件行业中扮演着至关重要的角色。它不仅推动了技术的创新和进步，也促进了开发者之间的合作与共享。随着越来越多的开源项目的涌现，有效的代码管理和版本控制成为了必不可少的工…...

编程日记 2023/9/27 7:38:51

centos7 添加网卡设置动态ip，修改网卡为任意名称

centos7 添加网卡并设置动态ip，重命名为任意名称本文记录如何在centos环境上增加两个网卡，并设置为动态获取ip，以及修改网卡名称为任意名称 1、centos7添加两个网卡动态获取ip 1.1 vmvare上添加网络适配器 1、关闭虚拟机 2、添加网络适…...

编程日记 2023/9/27 7:36:49

计算机竞赛深度学习人脸表情识别算法 - opencv python 机器视觉

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 🔥 优质竞赛项目系列，今天要分享的是 🚩 深度学习人脸表情识别系…...

编程日记 2023/9/27 7:35:48

nvm安装后node或npm不是内部或外部命令

nvm安装后出现node或npm不是内部或外部命令进行以下步骤解决找到nvm安装所在位置，新建一个空的nodejs文件夹打开 windowr —> sysdm.cpl —> 高级 —>环境变量将下图中两个位置的地址改成刚刚新建的nodejs空文件夹所在的位置 nvm安装后都是会自动添加…...

编程日记 2023/9/27 7:33:46

Kafka数据可靠性保证

1.生产者发送数据到Topic partition的可靠性保证为保证producer发送的数据，能可靠的发送到指定的topic，topic的每个partition收到producer发送的数据后，都需要向producer发送ack（acknowledgement确认收到）&#xff0c…...

编程日记 2023/9/27 7:32:45

基于R的linkET包qcorrplot可视化Mantel test相关性网络热图分析correlation heatmap

写在前面需求是对瘤胃宏基因组结果鉴定到的差异菌株与表观指标、瘤胃代谢组、血清代谢组、牛奶代谢组中有差异的部分进行关联分析，效果图如下： 数据准备逗号分隔的csv格式文件，两个表格，一个是每个样本对应的表观指标数据&…...

编程日记 2023/9/27 7:31:44

IOTDB的TsFile底层设计

目录概述数据模型数据结构元数据注册读取和写入设计思想主要过程...

编程日记 2023/9/27 7:29:43

MATLAB算法实战应用案例精讲-【人工智能】边缘计算（补充篇）

目录前言算法原理传统边缘检测算子构建通用的边缘检测算子图...

编程日记 2023/9/27 7:28:42

Linux学习-HIS系统部署（1）

Git安装 #安装中文支持（选做） [rootProgramer ~]# echo $LANG #查看当前系统语言及编码 en_US.UTF-8 [rootProgramer ~]# yum -y install langpacks-zh_CN.noarch #安装中文支持 [rootProgramer ~]# vim /etc/locale.co…...

编程日记 2023/9/27 7:27:41

Cairo介绍及源码构建安装（3）

接前一篇文章：Cairo介绍及源码构建安装（2） 四、Cairo构建与安装 2. 配置 BLFS中给出的命令为： ./configure --prefix/usr \--disable-static \--enable-tee 这里将“--prefix”选项由“/usr”调整为“/usr/local”&#x…...

编程日记 2023/9/27 7:26:40

Mac电脑信息大纲记录软件 OmniOutliner 5 Pro for Mac中文

OmniOutliner 5 Pro是一款专业级的Mac大纲制作工具，它可以帮助用户更好地组织和管理信息，以及制作精美的大纲。以下是OmniOutliner 5 Pro的主要功能和特点： 强大的大纲组织和管理功能。OmniOutliner 5 Pro为用户提供了多层次的大纲结构&…...

编程日记 2023/9/27 7:25:39

linux设置应用开机自启（通用：mysql、jar、nginx、solr...）

1. 业务场景用于单机生产环境，防止服务器断电或者强制重启导致的服务下线。 2. 实现方案对于无状态服务，可容器部署设置 restart: always，systemctl eable docker对于有状态服务，可编写自启脚本，如下 ① 编写执行…...

编程日记 2023/9/27 7:22:37

Offset Explorer(Kafka消息可视化工具)报invalid hex digit ‘{‘错误解决方法

解决办法： 根据代码的实际情况，设置成对应的值。设置完成后点update、refresh更新。...

编程日记 2023/9/27 7:21:36

深度学习：模型训练过程中Trying to backward through the graph a second time解决方案

1 问题描述在训练lstm网络过程中出现如下错误： Traceback (most recent call last):File "D:\code\lstm_emotion_analyse\text_analyse.py", line 82, in <module>loss.backward()File "C:\Users\lishu\anaconda3\envs\pt2\lib\site-packag…...

编程日记 2023/9/27 7:20:35

【数值计算方法】非线性方程（组）和最优化问题的计算方法：非线性方程式求根的二分法、迭代法、Newton 迭代法及其Python实现

目录一、非线性方程式求根 1、二分法（Bisection Method、对分法） a. 理论简介 b. python实现 2、迭代法（Iterative Method） a. 理论简介 b. python实现 3、Newton 迭代法（Newtons Method） a. 理论…...

编程日记 2023/9/27 7:18:33

新建electronstu01文件夹

js内容动态渲染

打包

相关文章：