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

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

news 2025/9/18 5:34:33

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

  • 大纲
    • 官网
    • 快速入门
      • 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

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/9/9 21:25:50

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/9/7 2:04:00

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

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

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

编程新知 2025/8/30 16:47:37

ETLCloud可能遇到的问题有哪些？常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

编程新知 2025/9/6 15:03:21

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

编程新知 2025/9/12 23:22:06

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/9/9 2:27:37

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

编程新知 2025/8/31 2:33:30