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

electron快速入门

news 2026/3/28 11:06:53

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

Mac视频预览增强工具：解决MKV文件无法预览问题的全方位方案

Mac视频预览增强工具：解决MKV文件无法预览问题的全方位方案【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files. 项目地址: https://g…...

编程新知 2026/3/28 10:57:06

从‘大胖老师’到‘小学霸’：用动态蒸馏拯救被剪枝‘剪残’的小模型

从‘大胖老师’到‘小学霸’：动态蒸馏如何拯救剪枝后的模型性能想象一下，你有一位知识渊博的"大胖老师"——一个经过精心训练的大型神经网络模型。为了让它更轻便、更高效，你决定给它"减肥"（结构化剪枝&…...

编程新知 2026/3/28 10:00:40

Fish Speech-1.5多语种支持实战：阿拉伯语右向文本语音生成注意事项

Fish Speech-1.5多语种支持实战：阿拉伯语右向文本语音生成注意事项 1. 引言语音合成技术正在改变我们与数字世界的交互方式，而多语言支持更是让这项技术真正走向全球化。Fish Speech-1.5作为一款强大的文本转语音模型，支持包括阿拉伯语在内…...

编程新知 2026/3/28 9:56:37

FPGA时序优化全攻略：Vivado 2019.2中的建立与保持时间问题解决

FPGA时序优化全攻略：Vivado 2019.2中的建立与保持时间问题解决在高速FPGA设计中，时序问题往往是工程师面临的最大挑战之一。当设计频率提升到200MHz甚至更高时，建立时间和保持时间的违例会频繁出现，导致设计无法正常工作。本文将…...

编程新知 2026/3/28 9:48:31

granite-4.0-h-350m从部署到应用：Ollama本地大模型在法律文书处理中的案例

granite-4.0-h-350m从部署到应用：Ollama本地大模型在法律文书处理中的案例 1. 快速上手：granite-4.0-h-350m模型部署 granite-4.0-h-350m是一个轻量级的指令跟随模型，专门为本地部署和特定领域应用而设计。这个模型只有3.5亿参数&#xff0…...

编程新知 2026/3/28 9:26:24

Qwen3.5-4B模型Python零基础入门：从环境搭建到第一个AI对话程序

Qwen3.5-4B模型Python零基础入门：从环境搭建到第一个AI对话程序 1. 前言：为什么选择Qwen3.5-4B入门AI开发如果你对AI感兴趣但不知道从何开始，这篇教程就是为你准备的。Qwen3.5-4B是一个非常适合入门的中文大语言模型，它体积适中…...

编程新知 2026/3/28 8:47:57

自定义默认提示词：PandaWiki 问答 “一键贴合业务”，企业降本增效新方案

深耕企业数字化与知识管理 7 年，服务过数百家中大型企业，发现企业知识库普遍存在三大核心痛点：AI 问答泛化、风格混乱、效率低下、人力成本高。PandaWiki 的自定义默认提示词功能，搭配多平台客服开源可控，为企业提供…...

编程新知 2026/3/28 8:19:46

GCC开发者转LLVM必看：模块化设计带来的5个关键工作流变革

GCC开发者转LLVM必看：模块化设计带来的5个关键工作流变革当GCC开发者第一次接触LLVM时，往往会惊讶于其完全不同的设计哲学。就像从单块巨石建筑转向预制模块化结构，LLVM的三段式架构不仅改变了代码的组织方式，更从根本上重塑了编…...

编程新知 2026/3/28 7:41:20

Qwen3-4B-Instruct-2507从入门到精通：Chainlit界面定制化教程

Qwen3-4B-Instruct-2507从入门到精通：Chainlit界面定制化教程 1. 引言：为什么选择Qwen3-4B-Instruct-2507？ 如果你正在寻找一个既强大又轻量、既能快速部署又能灵活定制界面的AI模型，那么Qwen3-4B-Instruct-2507绝对值得你深入了…...

编程新知 2026/3/28 5:09:58

嵌入式C++ RAII互斥锁封装器MutexLocker详解

1. MutexLocker：嵌入式C RAII风格互斥锁封装器深度解析1.1 设计动机与工程价值在基于mbed RTOS（现为Mbed OS中CMSIS-RTOS v2兼容层）的嵌入式实时系统开发中，互斥量（Mutex）是保障多任务共享资源安全访问的核…...

编程新知 2026/3/28 4:56:13

新建electronstu01文件夹

js内容动态渲染

打包

相关文章：