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

Electron构建桌面应用程序，服务于项目的自主学习记录(持续更新...

news 2026/4/2 10:32:05

无所畏惧地面对未知，并将其视为成长的机会

  • 大纲
    • 官网
    • 快速入门
      • 1.安装node.js -- 这里推荐用nvm管理
      • 2.脚手架创建
      • 3.electron 包安装到应用的开发依赖
      • 4.创建主进程(main.js)并启动项目
        • 1.创建页面
        • 2.配置main.js
        • 3.启动项目 -- 效果
    • 进阶 -- 基于项目场景功能使用
      • 场景一：web交互打开文件系统
      • 场景二：区分开发和生产环境处理开发者工具
      • 持续更新...

大纲

官网

中文官网：https://www.electronjs.org/zh

快速入门

1.安装node.js – 这里推荐用nvm管理

一.nvm安装node方式以及可能出现问题的解决方案
1.window下安装并使用nvm
2.nvm安装及安装后node不能使用
3.node.js安装后在命令行输入“node -v ” 查看版本提示：‘node‘ 不是内部或外部命令，也不是可运行的程序的解决方法
4.检查node/npm是否正确安装 node -v && npm -v

2.脚手架创建

mkdir my-electron-app && cd my-electron-app
npm init

//npm init 后 package.json
{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js",  //!!!main代表主进程文件，需要根据配置的新建主进程文件名(这里init会存在为index.js情况，手动改为main.js)"author": "Jane Doe","license": "MIT"
}

3.electron 包安装到应用的开发依赖

npm install --save-dev electron//package.json 修改
{"scripts": {"start": "electron ."}
}//首次启动 
//此时main.js主进程未创建，Electron应用在启动时找不到指定的入口文件，在package.json配置的main
npm start

main.js未创建启动错误

4.创建主进程(main.js)并启动项目

1.创建页面
<!-- index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --><meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'"><title>Hello World!</title></head><body><h1>Hello World!</h1></body>
</html>
2.配置main.js

新建main.js文件 此时 npm start 不会抛出异常

const { app, BrowserWindow } = require('electron')
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,show: false, //ready-to-show 解决闪烁autoHideMenuBar: true, // 隐藏顶部file menubackgroundColor: '#fff', //对于一个复杂的应用，ready-to-show 可能发出的太晚，会让应用感觉缓慢。 在这种情况下，建议立刻显示窗口，并使用接近应用程序背景的 backgroundColor})//优雅地显示窗口 -- 解决窗口闪烁问题win.once('ready-to-show', () => {win.show()win.webContents.openDevTools({ mode: 'detach' }) //开发者工具})win.loadFile('index.html') // 加载项目使用loadURLwin.maximize() //窗口最大化
}//在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。 您可以通过使用 app.whenReady() API来监听此事件
app.whenReady().then(() => {createWindow()// 处理 macOS 特有的行为，提供一致的用户体验app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})//关闭所有窗口时退出应用 (Windows & Linux)
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

加载嵌入项目

3.启动项目 – 效果

在这里插入图片描述

进阶 – 基于项目场景功能使用

场景一：web交互打开文件系统

// main.js 
const { app, BrowserWindow,dialog,ipcMain } = require('electron') 
// ipcMain 从主进程到渲染进程的异步通信
// dialog 显示用于打开和保存文件、警报等的!!本机系统!!对话框
const path = require('path')
const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,show: false,backgroundColor: '#fff',autoHideMenuBar: true,webPreferences: {// 网页功能设置preload: path.join(__dirname, 'preload.js')// 在页面运行其他脚本之前预先加载指定的脚本}})win.once('ready-to-show', () => {win.show()win.webContents.openDevTools({ mode: 'detach' })})win.loadFile('index.html')//ipcMain，用于在主进程中处理渲染进程（即前端页面）发送的异步消息。具体来说，这个方法的作用是监听名为 dialog:openProject 的事件(preload.js发送)，并在事件触发时执行指定的回调函数。ipcMain.handle('dialog:openProject', async () => {const { canceled, filePaths } = await dialog.showOpenDialog(win, {properties: ['openFile'],filters: [{ name: 'Project Files', extensions: ['db'] },]})if (canceled) {return} else {return filePaths[0]}})
}
app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

// preload.js
// contextBridge 和 ipcRenderer 结合使用的主要目的是在 Electron 应用程序中实现安全的进程间通信（Inter-Process Communication, IPC）。
// contextBridge 用于在渲染进程和主进程之间安全地传递数据和函数
// ipcRenderer 用于在渲染进程中与主进程进行通信
const {contextBridge, ipcRenderer} = require('electron')
//exposeInMainWorld(key,api) -- 将api注入到window，web通过window.myAPI.selectProject于主进程通信
contextBridge.exposeInMainWorld('myAPI', {selectProject: () => ipcRenderer.invoke('dialog:openProject'), 
})

场景二：区分开发和生产环境处理开发者工具

win.once('ready-to-show', () => {win.show()if (!app.isPackaged) {console.log(`[main] open dev tools`)mainWindow.webContents.openDevTools({ mode: 'detach' })}
}

持续更新…

相关文章：

Electron构建桌面应用程序，服务于项目的自主学习记录(持续更新...

无所畏惧地面对未知&#xff0c;并将其视为成长的机会 大纲官网快速入门1.安装node.js -- 这里推荐用nvm管理2.脚手架创建3.electron 包安装到应用的开发依赖4.创建主进程(main.js)并启动项目1.创建页面2.配置main.js3.启动项目 -- 效果 进阶 -- 基于项目场景功能使用场景一&am…...

编程日记 2024/10/9 19:09:32

linux Load Average 计算

在内核代码 kernel/sched/loadavg.c 中有一个公式: a1 a0 * e a * (1 - e) 此算法是指数加权移动平均法&#xff08;Exponential Weighted Moving Average&#xff0c;EMWA&#xff09;&#xff0c;是一种特殊的加权移动平均法&#xff0c;它考虑当前和历史的所有数据&#…...

编程日记 2024/10/9 19:07:31

pandas常用数据格式IO性能对比

前言 本文对pandas支持的一些数据格式进行IO&#xff08;读写&#xff09;的性能测试&#xff0c;大数据时代以数据为基础&#xff0c;经常会遇到操作大量数据的情景&#xff0c;数据的IO性能尤为重要&#xff0c;本文对常见的数据格式csv、feather、hdf5、jay、parquet、pick…...

编程日记 2024/10/9 19:05:29

【D3.js in Action 3 精译_031】3.5.2 DIY实战：在 Observable 平台实现带数据标签的 D3 条形图并改造单元测试模块

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可…...

编程日记 2024/10/9 19:04:27

华为OD机试真题-字符串分割

题目描述&#xff1a; 给定非空字符串s&#xff0c;将该字符串分割成一些子串&#xff0c;使每个子串的ASCII码值的和均为水仙花数。 1、若分割不成功&#xff0c;则返回0。 2、若分割成功且分割结果不唯一&#xff0c;则返回-1。 3、若分割成功且分割结果唯一&#xff0c;则返…...

编程日记 2024/10/9 19:02:25

编程技巧：提高代码健壮性与可维护性的关键方法（以 Shell 为例）

在脚本编写和自动化工作中，良好的编程技巧对于确保代码的健壮性和可维护性至关重要。以下是一些关键的编程技巧，包括模块化设计、单元测试、版本控制、处理边界条件、错误处理、中间值保存和创建 Flag。本文将通过 Shell 脚本示例来阐述这些技巧的应用。 1. 模块化设计 **定…...

编程日记 2024/10/9 18:59:21

【无标题】ReadableStream is not defined

升级 node 版本到 18 及以上即可解决...

编程日记 2024/10/9 18:57:18

【JVM】高级篇

1 GraalVM 1.1 什么是GraalVM GraalVM是Oracle官方推出的一款高性能JDK&#xff0c;使用它享受比OpenJDK或者OracleJDK更好的性能。 GraalVM的官方网址&#xff1a;https://www.graalvm.org/ 官方标语&#xff1a;Build faster, smaller, leaner applications。 更低的CPU…...

编程日记 2024/10/9 18:55:17

nacos1.4源码-服务发现、心跳机制

nacos的服务发现主要采用服务端主动推送客户端定时拉取&#xff1b;心跳机制通过每5s向服务端发送心跳任务来保活&#xff0c;当超过15s服务端未接收到心跳任务时&#xff0c;将该实例设置为非健康状态&#xff1b;当超过30s时&#xff0c;删除该实例。 1.服务发现 nacos主要采…...

编程日记 2024/10/9 18:54:15

C++ 2D平台游戏开发案例

关于2D平台游戏的C开发案例&#xff0c;包括游戏设计、实现细节、图形渲染和音效处理等内容。虽然无法一次性提供3000字&#xff0c;但我会尽量详细描述各个部分&#xff0c;并确保有足够的深度和广度。 2D平台游戏开发案例 一、游戏设计 游戏概述 游戏名称&#xff1a;“冒险…...

编程日记 2024/10/9 18:52:12

【Webpack--019】TreeShaking

&#x1f913;&#x1f60d;Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主 &#x1f431;‍&#x1f409;若此文你认为写的不错&#xff0c;不要吝啬你的赞扬&#xff0c;求收藏&#xff0c;求评论&#xff0c;求一个大大的赞&#xff01;&#x1f44d;* &#x…...

编程日记 2024/10/9 18:46:04

Docker基本操作命令

Docker 是一个开源的应用容器引擎&#xff0c;允许开发者打包应用以及其依赖包到一个可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&#xff0c;也可以实现虚拟化。容器是完全使用沙箱机制&#xff0c;相互之间不会有任何接口。主要功能是为开发者提供一个简单…...

编程日记 2024/10/9 18:45:03

开源计算器应用的全面测试计划：确保功能性和可靠性

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2024/10/9 18:43:01

uni.requestPayment 支付成功之后会走 wx.onAppRoute

uni.requestPayment 是用于发起微信支付的统一接口&#xff0c;而 wx.onAppRoute 是用于监听小程序的路由变化。当 uni.requestPayment 支付成功后&#xff0c;如果发生了页面跳转或者其他路由变化&#xff0c;wx.onAppRoute 会被触发。这个行为是正常的&#xff0c;因为支付成…...

编程日记 2024/10/9 18:42:00

统⼀服务入口 - Gateway

网关介绍 问题 在 spring cloud 体系中我们通过 Eureka,Nacos 解决了服务注册,服务发现的问题,使⽤Spring Cloud LoadBalance解决了负载均衡的问题,使⽤ OpenFeign 解决了远程调⽤的问题. 但是当前所有微服务的接⼝都是直接对外暴露的,可以直接通过外部访问.为了保证对外服务的…...

编程日记 2024/10/9 18:38:56

QGraphicsWidget Class

Header：#include < QGraphicsWidget > qmake：QT += widgets Since：Qt 4.4 Inherits：QGraphicsObject and QGraphicsLayoutItem Inherited By：QGraphicsProxyWidget This class was introduced in Qt 4.4. Public Types enum anonymous {Type }Properties autoFi…...

编程日记 2024/10/9 18:37:55

探讨最好用的AI工具：从日常到创新的应用

文章目录 引言常用AI工具1. 语音助手2. 图像识别软件3. 机器翻译工具4. 智能客服系统 创新AI应用1. 自动驾驶汽车2. 虚拟试衣间3. 医疗影像分析4. 个性化推荐系统 个人体验分享1. 通义灵码2. 文心一言3. 智能写作助手4. 智能家居设备5. DALLE6. Whisper7. Codex8. Gym9. ChatGP…...

编程日记 2024/10/9 18:36:54

Python系统教程005（字符串的格式化输出）

知识回顾 1、默认情况下&#xff0c;input函数接收的数据是字符串类型。 2、字符串类型的关键词是str。 3、\n和\t都是转义字符&#xff0c;\n用来换行&#xff0c;\t用来留出一段固定长度的空白。 4、type函数能够用来查看变量的数据类型 5、数据类型的转换&#xff0c;举…...

编程日记 2024/10/9 18:35:52

六款电脑远程控制软件分享，2024最热门软件合集，总有一款适合你！速来看！

想要随时随地控制自己的电脑&#xff1f; 无论你是办公需求&#xff0c;还是要远程协助他人&#xff0c;一款好用的远程控制软件绝对少不了。 2024年最热门的六款远程控制软件已经为你准备好&#xff0c;总有一款适合你&#xff0c;赶快往下看吧&#xff01; 1. 安企神系统—…...

编程日记 2024/10/9 18:34:50

优质微信群不再难寻！掌握这些技巧就够了！

在当今信息爆炸的时代&#xff0c;微信群已成为人们交流思想、分享知识、建立人脉的重要平台。无论是专业领域的深入探讨&#xff0c;还是兴趣爱好的自由交流&#xff0c;微信群都能为你提供一个即时互动的虚拟空间。然而&#xff0c;面对海量的微信群信息&#xff0c;如何高效…...

编程日记 2024/10/9 18:32:47

Wan2.2-I2V-A14B开源模型：支持LoRA微调的私有化训练环境准备

Wan2.2-I2V-A14B开源模型&#xff1a;支持LoRA微调的私有化训练环境准备 1. 镜像概述与核心特性 Wan2.2-I2V-A14B是一款强大的文生视频开源模型&#xff0c;本镜像为其提供了完整的私有化部署解决方案。基于RTX 4090D 24GB显存显卡深度优化&#xff0c;内置所有必要组件&…...

编程新知 2026/4/2 10:17:58

Phi-3-mini-4k-instruct-gguf快速部署：7860端口网页服务+独立venv隔离环境实录

Phi-3-mini-4k-instruct-gguf快速部署&#xff1a;7860端口网页服务独立venv隔离环境实录 1. 模型简介 Phi-3-mini-4k-instruct-gguf 是微软 Phi-3 系列中的轻量级文本生成模型 GGUF 版本。这个模型特别适合以下场景&#xff1a; 智能问答文本改写与润色内容摘要生成简短创意…...

编程新知 2026/4/2 10:05:49

OpenClaw与Qwen3-14B联调指南：解决模型响应超时与截断问题

OpenClaw与Qwen3-14B联调指南&#xff1a;解决模型响应超时与截断问题 1. 问题背景与挑战 上周我在尝试用OpenClaw自动化处理一批技术文档时&#xff0c;遇到了一个棘手的问题&#xff1a;当任务链超过5个步骤时&#xff0c;Qwen3-14B模型经常出现响应超时或输出截断。这直接…...

编程新知 2026/4/2 9:31:07

RT-Thread线程管理实战技巧与常见问题解析

1. RT-Thread线程管理实战指南在嵌入式系统开发中&#xff0c;线程管理是RTOS&#xff08;实时操作系统&#xff09;最核心的功能之一。作为一名长期使用RT-Thread的开发者&#xff0c;我发现很多初学者在掌握了线程理论后&#xff0c;在实际应用中仍然会遇到各种问题。本文将深…...

编程新知 2026/4/2 9:20:58

小白也能懂：雪女-斗罗大陆-造相Z-Turbo文生图模型使用详解

小白也能懂&#xff1a;雪女-斗罗大陆-造相Z-Turbo文生图模型使用详解 1. 模型介绍 1.1 什么是雪女-斗罗大陆-造相Z-Turbo 雪女-斗罗大陆-造相Z-Turbo是一款专门用于生成《斗罗大陆》风格图片的AI模型&#xff0c;特别擅长创作与"雪女"角色相关的精美图像。这个模…...

编程新知 2026/4/2 8:58:32

MRIcroGL：3步掌握开源医学影像3D可视化工具，让诊断更直观

MRIcroGL&#xff1a;3步掌握开源医学影像3D可视化工具&#xff0c;让诊断更直观 【免费下载链接】MRIcroGL v1.2 GLSL volume rendering. Able to view NIfTI, DICOM, MGH, MHD, NRRD, AFNI format images. 项目地址: https://gitcode.com/gh_mirrors/mr/MRIcroGL 想要…...

编程新知 2026/4/2 8:50:15

阿里小云KWS模型多语言支持实战：中英文混合唤醒

阿里小云KWS模型多语言支持实战&#xff1a;中英文混合唤醒 1. 引言 语音唤醒技术正在变得越来越智能&#xff0c;但有一个问题一直困扰着开发者&#xff1a;怎么让设备既能听懂中文&#xff0c;又能响应英文&#xff1f;想象一下&#xff0c;你对着智能音箱说"小云小云…...

编程新知 2026/4/2 8:48:11

你那点芯片技术，撑不过35岁

很多搞芯片的人&#xff0c;30岁左右会有一段很舒服的时光。RTL写得顺手&#xff0c;时序约束能搞定&#xff0c;综合流程跑起来没问题&#xff0c;偶尔能查出几个难定位的bug&#xff0c;感觉自己挺能打的。但大概从32、33岁开始&#xff0c;一些很微妙的事情发生了。项目变复…...

编程新知 2026/4/2 7:55:33

AQ智商测试

AQ逆商测试结果分析&#xff08;PSYTOPIC版&#xff09; Psytopic分析&#xff1a;您的AQ得分是 168 &#xff0c;在人群中属较高水平 。 以下是PSYTOPIC为您提供的分析参考&#xff1a; 你能面对现实&#xff0c;对来自工作和生活中的困难应对自如&#xff0c;并敢于迎接逆境…...

编程新知 2026/4/2 6:48:40

Ubuntu下USRP X300 FPGA固件降级实录：从‘need 38 but got 39’报错到完美兼容GNURadio

Ubuntu下USRP X300 FPGA固件降级实战&#xff1a;从版本冲突到完美兼容GNURadio的完整指南 当USRP X300的FPGA固件版本与GNURadio所需的版本不匹配时&#xff0c;终端里那个刺眼的"need 38 but got 39"报错足以让任何软件无线电开发者抓狂。这种版本冲突问题在Ubuntu…...

编程新知 2026/4/2 5:56:02