news 2026/4/16 10:42:35

HoRain云--Electron入门:快速搭建桌面应用

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HoRain云--Electron入门:快速搭建桌面应用

🎬 HoRain云小助手:个人主页

🔥 个人专栏: 《Linux 系列教程》《c语言教程》

⛺️生活的理想,就是为了理想的生活!


⛳️ 推荐

前些天发现了一个超棒的服务器购买网站,性价比超高,大内存超划算!忍不住分享一下给大家。点击跳转到网站。

专栏介绍

专栏名称

专栏介绍

《C语言》

本专栏主要撰写C干货内容和编程技巧,让大家从底层了解C,把更多的知识由抽象到简单通俗易懂。

《网络协议》

本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘,一起解密网络协议在运行中协议的基本运行机制!

《docker容器精解篇》

全面深入解析 docker 容器,从基础到进阶,涵盖原理、操作、实践案例,助您精通 docker。

《linux系列》

本专栏主要撰写Linux干货内容,从基础到进阶,知识由抽象到简单通俗易懂,帮你从新手小白到扫地僧。

《python 系列》

本专栏着重撰写Python相关的干货内容与编程技巧,助力大家从底层去认识Python,将更多复杂的知识由抽象转化为简单易懂的内容。

《试题库》

本专栏主要是发布一些考试和练习题库(涵盖软考、HCIE、HRCE、CCNA等)

目录

⛳️ 推荐

专栏介绍

1. 安装前提条件

2. 创建项目目录

3. 初始化项目

4. 安装 Electron

5. 创建基本项目结构

(1) main.js(主进程文件)

(2) index.html(渲染进程文件)

6. 配置启动脚本

7. 运行应用

8. 打包应用(可选)

安装 Electron Forge

打包应用

常见问题


安装 Electron 并创建一个基本的应用程序可以按照以下步骤进行。Electron 是一个基于 Node.js 和 Chromium 的框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。


1. 安装前提条件


2. 创建项目目录

mkdir my-electron-app cd my-electron-app

3. 初始化项目

npm init -y # 生成 package.json 文件

4. 安装 Electron

npm install electron --save-dev

5. 创建基本项目结构

在项目目录下创建以下文件:

(1)main.js(主进程文件)
const { app, BrowserWindow } = require('electron') function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) win.loadFile('index.html') // 加载 HTML 文件 } app.whenReady().then(createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) { createWindow() } })
(2)index.html(渲染进程文件)
<!DOCTYPE html> <html> <head> <title>Hello Electron</title> </head> <body> <h1>Hello from Electron!</h1> </body> </html>

6. 配置启动脚本

package.json中添加启动脚本:

{ "scripts": { "start": "electron ." } }

7. 运行应用

npm start

此时会弹出一个窗口,显示 "Hello from Electron!"。


8. 打包应用(可选)

使用 Electron Forge 打包成安装包:

安装 Electron Forge
npm install --save-dev @electron-forge/cli npx electron-forge import
打包应用
npm run make

打包后的文件会生成在out/目录下。


常见问题


通过以上步骤,你可以快速搭建一个 Electron 应用。如果需要更复杂的功能(如与原生系统交互、调试、发布等),可以进一步查阅 Electron 官方文档。

❤️❤️❤️本人水平有限,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍

🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/12 5:35:35

图像预处理黑科技:让CRNN识别模糊文字的5个技巧

图像预处理黑科技&#xff1a;让CRNN识别模糊文字的5个技巧 &#x1f4d6; 项目背景&#xff1a;OCR 文字识别的现实挑战 在数字化转型浪潮中&#xff0c;光学字符识别&#xff08;OCR&#xff09; 已成为连接物理世界与数字信息的关键桥梁。从发票报销、证件录入到文档归档&…

作者头像 李华
网站建设 2026/4/13 4:29:52

BiliTools跨平台B站下载器:2026年终极使用手册与配置指南

BiliTools跨平台B站下载器&#xff1a;2026年终极使用手册与配置指南 【免费下载链接】BiliTools A cross-platform bilibili toolbox. 跨平台哔哩哔哩工具箱&#xff0c;支持视频、音乐、番剧、课程下载……持续更新 项目地址: https://gitcode.com/GitHub_Trending/bilit/B…

作者头像 李华
网站建设 2026/4/15 6:36:33

CSANMT模型部署避坑指南:常见错误及解决方案

CSANMT模型部署避坑指南&#xff1a;常见错误及解决方案 &#x1f310; AI 智能中英翻译服务 (WebUI API) 项目背景与技术选型动机 随着全球化进程加速&#xff0c;高质量的中英翻译需求日益增长。传统统计机器翻译&#xff08;SMT&#xff09;在语义连贯性和表达自然度上存…

作者头像 李华
网站建设 2026/4/14 15:55:48

零售库存管理:CRNN OCR在商品编码识别

零售库存管理&#xff1a;CRNN OCR在商品编码识别 引言&#xff1a;OCR技术如何重塑零售库存效率 在现代零售与仓储管理中&#xff0c;商品编码&#xff08;如条形码、二维码、SKU编号&#xff09;是实现精细化运营的核心数据载体。传统的人工录入方式不仅效率低下&#xff0c;…

作者头像 李华
网站建设 2026/3/26 18:23:14

缠论量化分析框架实战手册:构建专业级交易系统

缠论量化分析框架实战手册&#xff1a;构建专业级交易系统 【免费下载链接】chan.py 开放式的缠论python实现框架&#xff0c;支持形态学/动力学买卖点分析计算&#xff0c;多级别K线联立&#xff0c;区间套策略&#xff0c;可视化绘图&#xff0c;多种数据接入&#xff0c;策略…

作者头像 李华