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

electron快速入门

news 2026/2/7 20:39:11

新建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

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令范围操作示例指定行范围处理复合命令示例实用技…...

编程新知 2025/11/16 8:24:16

【Java学习笔记】Arrays类

Arrays 类 1. 导入包：import java.util.Arrays 2. 常用方法一览表方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序（自然排序和定制排序）Arrays.binarySearch()通过二分搜索法进行查找（前提：数组是…...

编程新知 2025/12/3 9:38:15

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型项目截图项目简介社会医疗保险是国家通过立法形式强制实施，由雇主和个人按一定比例缴纳保险费，建立社会医疗保险基金，支付雇员医疗费用的一种医疗保险制度， 它是促进社会文明和进步的…...

编程新知 2026/1/24 14:59:08

UDP(Echoserver)

网络命令 Ping 命令检测网络是否连通使用方法: ping -c 次数网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态常用选项： n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

el-switch文字内置

el-switch文字内置效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

编程新知 2026/1/26 10:00:16

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2026/1/28 9:04:29

OpenLayers 分屏对比(地图联动)

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能，和卷帘图层不一样的是，分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2026/1/21 19:46:26

Selenium常用函数介绍

目录一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口四，弹窗五，等待六，导航七，文件上传 …...

编程新知 2026/1/29 3:55:23

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

编程新知 2025/10/31 16:09:12

新建electronstu01文件夹

js内容动态渲染

打包

相关文章：