news 2026/9/11 9:50:12

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/9/9 2:17:04

李跳跳自定义规则完全指南:告别手机弹窗烦恼

李跳跳自定义规则完全指南&#xff1a;告别手机弹窗烦恼 【免费下载链接】LiTiaoTiao_Custom_Rules 李跳跳自定义规则 项目地址: https://gitcode.com/gh_mirrors/li/LiTiaoTiao_Custom_Rules 还在为手机上不断弹出的广告、更新提示和各种权限请求而烦恼吗&#xff1f;每…

作者头像 李华
网站建设 2026/9/9 22:00:48

AltStore侧载神器:iOS应用自由安装的终极方案

AltStore侧载神器&#xff1a;iOS应用自由安装的终极方案 【免费下载链接】AltStore AltStore is an alternative app store for non-jailbroken iOS devices. 项目地址: https://gitcode.com/gh_mirrors/al/AltStore 想要摆脱App Store的限制&#xff0c;在iPhone上安装…

作者头像 李华
网站建设 2026/9/7 8:09:12

PyTrees实战指南:3步构建革命性Python决策系统

PyTrees实战指南&#xff1a;3步构建革命性Python决策系统 【免费下载链接】py_trees Python implementation of behaviour trees. 项目地址: https://gitcode.com/gh_mirrors/py/py_trees 你是否在为复杂的AI决策逻辑而头疼&#xff1f;当机器人需要同时处理传感器数据…

作者头像 李华
网站建设 2026/9/7 20:09:21

BongoCat桌面伴侣完整指南:让你的键盘操作充满乐趣

BongoCat桌面伴侣完整指南&#xff1a;让你的键盘操作充满乐趣 【免费下载链接】BongoCat 让呆萌可爱的 Bongo Cat 陪伴你的键盘敲击与鼠标操作&#xff0c;每一次输入都充满趣味与活力&#xff01; 项目地址: https://gitcode.com/gh_mirrors/bong/BongoCat 还在为单调…

作者头像 李华
网站建设 2026/9/8 17:39:42

3分钟掌握JPEGsnoop:终极图像解码分析工具完整指南

3分钟掌握JPEGsnoop&#xff1a;终极图像解码分析工具完整指南 【免费下载链接】JPEGsnoop JPEGsnoop: JPEG decoder and detailed analysis 项目地址: https://gitcode.com/gh_mirrors/jp/JPEGsnoop 想要深入了解JPEG图像的内部结构吗&#xff1f;JPEGsnoop就是你的专业…

作者头像 李华