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

Electron Fiddle终极指南：30分钟从零构建你的第一个桌面应用

news 2026/6/19 8:37:38

Electron Fiddle终极指南：30分钟从零构建你的第一个桌面应用

【免费下载链接】fiddle:electron: 🚀 The easiest way to get started with Electron项目地址: https://gitcode.com/gh_mirrors/fi/fiddle

还在为Electron复杂的开发环境配置而烦恼吗？想要快速尝试桌面应用开发却不知从何下手？今天我要向你介绍一款革命性的工具——Electron Fiddle，它能让你在30分钟内完成从零到一的桌面应用开发，无需复杂的配置，无需繁琐的搭建过程！

为什么你需要Electron Fiddle？

想象一下这样的场景：你有一个绝妙的桌面应用创意，但一想到要配置Node.js、Electron、Webpack等一系列工具就望而却步。或者你只是想快速验证一个想法，却被繁琐的环境搭建消耗了所有热情。这正是Electron Fiddle诞生的意义——它让你专注于创意本身，而不是工具链。

Electron Fiddle是Electron官方推出的轻量级开发工具，专为快速原型设计和实验而生。它内置了完整的开发环境、代码编辑器和运行环境，让你能够：

🚀零配置启动：无需安装任何额外依赖
📝即时编辑运行：所见即所得的开发体验
🎯多版本测试：轻松切换不同Electron版本
📦一键打包：快速生成可执行文件

核心功能亮点：不只是"Hello World"

1. 一体化开发环境

从上图可以看到，Electron Fiddle的界面设计极其直观，分为四个主要区域：

区域	功能	特点
左侧边栏	文件管理和包管理器	清晰展示项目结构，支持npm包安装
中央编辑区	代码编写	基于VS Code的Monaco编辑器，支持智能提示
顶部工具栏	运行和版本控制	一键运行，版本切换
底部控制台	调试输出	实时查看运行日志和错误信息

2. 内置丰富示例

Electron Fiddle内置了数十个现成的示例代码，覆盖了Electron的所有核心API：

BrowserView：创建复杂窗口布局
桌面捕获：实现屏幕录制功能
菜单系统：构建原生应用菜单
通知系统：发送系统通知
剪贴板：访问系统剪贴板

这些示例存放在static/show-me/目录中，你可以直接加载学习，或者基于它们进行二次开发。

3. 智能版本管理

你是否担心应用在不同Electron版本下的兼容性？Electron Fiddle内置了版本管理功能：

点击顶部工具栏的版本号
选择目标Electron版本
工具会自动下载并配置对应环境
立即测试你的应用在不同版本下的表现

三步上手：你的第一个桌面应用

第一步：环境准备

确保你的系统满足以下要求：

Node.js v22.12.0或更高版本
Windows 10+/macOS 10.15+/Linux (Ubuntu 20.04+)

然后执行以下命令：

git clone https://gitcode.com/gh_mirrors/fi/fiddle cd fiddle yarn install yarn start

第二步：创建你的第一个Fiddle

启动Electron Fiddle后，你会看到欢迎界面。点击"New Fiddle"，选择"Hello World"模板。系统会自动生成三个核心文件：

main.js- 主进程文件

const { app, BrowserWindow } = require('electron') function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: 'preload.js' } }) win.loadFile('index.html') } app.whenReady().then(createWindow)

index.html- 渲染进程界面

<!DOCTYPE html> <html> <body> <h1>Hello Electron!</h1> <p>欢迎使用Electron Fiddle</p> </body> </html>

preload.js- 预加载脚本

// 在这里安全地暴露Node.js API给渲染进程

第三步：运行和调试

点击工具栏上的"Run"按钮（▶️图标），你的应用就会在新窗口中启动！如果遇到问题，可以：

按Ctrl+Shift+I(Windows/Linux)或Cmd+Opt+I(macOS)打开开发者工具
查看底部控制台的错误信息
在src/main/runner.ts中查看运行逻辑的实现

进阶技巧：提升开发效率

1. 使用TypeScript开发

Electron Fiddle原生支持TypeScript，只需将文件扩展名改为.ts即可享受完整的类型检查和智能提示。类型定义文件位于src/main/electron-types.ts。

2. 自定义主题

厌倦了默认的深色主题？通过以下步骤自定义界面：

点击"File" → "Settings"
进入"Appearance"选项卡
选择你喜欢的主题配色
主题配置参考src/themes-defaults.ts

3. 扩展功能

Electron Fiddle支持通过npm包扩展功能：

打开左侧边栏的"Package Manager"
搜索需要的npm包（如axios、lodash等）
点击"Install"安装
包管理逻辑实现位于src/main/npm.ts

打包发布：分享你的作品

当你完成开发后，Electron Fiddle提供了一键打包功能：

点击工具栏上的"Package"按钮（📦图标）
选择目标平台：Windows/macOS/Linux
选择打包格式：.exe/.dmg/.deb等
点击"Package"开始打包

打包配置文件位于forge.config.ts，你可以根据需要进行自定义配置。

与其他工具对比

特性	Electron Fiddle	传统Electron开发
启动速度	⚡️ 立即启动	⏳ 需要配置环境
学习曲线	📈 平缓友好	📉 陡峭复杂
适合场景	原型设计、快速验证	大型项目、生产环境
打包功能	✅ 内置一键打包	🔧 需要手动配置