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

electron快速入门

news 2025/12/16 23:20:21

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

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/11/27 21:52:13

大话软工笔记—需求分析概述

需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...

编程新知 2025/12/11 23:45:42

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解一、项目概述本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程，并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令，把数据流转换成Message，状态转变流程是：State::Created 》 St…...

编程新知 2025/11/11 23:02:06

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示最终上报fail 解决方法内核升级导致，需要在新内核下重新下载编译安装查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/12/8 9:13:58

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2025/12/9 0:41:46

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2025/12/10 7:13:40

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据准备一个容器,例如: …...

编程新知 2025/12/15 20:41:51

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 （忘了有没有这步了估计有） 刷机程序和镜像就不提供了。要刷的时…...

编程新知 2025/12/15 20:41:49

UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

编程新知 2025/12/14 23:30:26

新建electronstu01文件夹

js内容动态渲染

打包

相关文章：