2025超详细Electron Fiddle新手教程：30分钟从零构建桌面应用
项目地址: https://gitcode.com/gh_mirrors/fi/fiddle 你还在为Electron环境配置繁琐而头疼？尝试过多个教程却仍卡在"Hello World"？本文将带你通过Electron Fiddle实现从0到1的桌面应用开发，无需复杂配置，只需跟随步骤操作，30分钟即可完成你的第一个应用。
读完本文你将获得：
- 掌握Electron Fiddle的完整使用流程
- 学会创建、运行和打包Electron应用
- 了解如何利用内置模板快速开发
- 掌握调试和版本管理技巧
关于Electron Fiddle
Electron Fiddle是官方推出的Electron开发工具，旨在简化Electron应用的创建和测试流程。它集成了代码编辑器、运行环境和打包工具，让开发者可以快速上手Electron开发。
项目核心文件结构：
- 主程序入口：src/main/main.ts
- 渲染进程代码：src/renderer/
- 应用配置：package.json
- 打包配置：forge.config.ts
安装Electron Fiddle
系统要求
- Node.js: v22.12.0或更高版本
- 操作系统：Windows 10+, macOS 10.15+, Linux (Ubuntu 20.04+, Fedora 32+)
安装步骤
- 克隆项目仓库：
git clone https://gitcode.com/gh_mirrors/fi/fiddle.git
cd fiddle
- 安装依赖：
yarn install
- 启动应用：
yarn start
项目依赖配置文件：package.json
界面介绍
成功启动后，你将看到Electron Fiddle的主界面，主要分为以下几个区域：
- 菜单栏：包含文件操作、编辑、视图、运行等命令
- 工具栏：快速访问常用功能，如运行、打包、保存等
- 代码编辑区：使用Monaco编辑器（VS Code同款）编写代码
- 版本选择器：选择不同的Electron版本进行开发和测试
- 侧边栏：包含文件树和包管理器
- 输出区：显示应用运行日志和调试信息
主要界面组件代码：src/renderer/components/
创建第一个应用
使用模板创建项目
- 打开Electron Fiddle后，点击欢迎界面的"New Fiddle"按钮
- 选择"Hello World"模板
- 系统会自动生成基础代码结构，包含三个主要文件：
main.js：主进程代码index.html：渲染进程界面preload.js：预加载脚本
模板文件存放路径：static/electron-quick-start/
代码结构解析
生成的基础代码结构如下：
main.js
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
mainWindow.loadFile('index.html')
mainWindow.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
preload.js
window.addEventListener('DOMContentLoaded', () => {
const replaceText = (selector, text) => {
const element = document.getElementById(selector)
if (element) element.innerText = text
}
for (const type of ['chrome', 'node', 'electron']) {
replaceText(`${type}-version`, process.versions[type])
}
})
运行应用
- 在代码编辑区完成代码编写后，点击工具栏上的"Run"按钮（▶️图标）
- 应用将在新窗口中启动，同时输出区会显示运行日志
- 如需调试，可以使用快捷键
Ctrl+Shift+I(Windows/Linux)或Cmd+Opt+I(macOS)打开开发者工具
运行功能实现代码：src/main/runner.ts
版本管理
Electron Fiddle允许你轻松切换不同的Electron版本，以便测试应用在不同版本下的兼容性。
切换Electron版本
- 在界面顶部的版本选择器中点击当前版本号
- 在下拉菜单中选择你需要的版本
- Fiddle会自动下载并配置所选版本的Electron环境
版本管理相关代码：
使用内置模板
Electron Fiddle提供了丰富的示例模板，涵盖各种常用功能，帮助开发者快速实现特定功能。
访问模板库
- 点击菜单栏的"File" -> "New from Template"
- 在模板列表中选择所需功能模板，如：
- BrowserView示例
- 桌面捕获(desktopCapturer)
- 菜单(Menu)示例
- 通知(Notification)示例
模板文件存放路径：static/show-me/
打包应用
完成开发后，可以使用Electron Fiddle的打包功能将应用打包为可执行文件。
打包步骤
- 点击工具栏上的"Package"按钮 📦
- 在弹出的打包配置窗口中选择目标平台（Windows、macOS或Linux）
- 选择打包格式（如.exe、.dmg、.deb等）
- 点击"Package"开始打包过程
- 打包完成后，输出区会显示打包结果和文件保存路径
打包配置文件：forge.config.ts 打包功能实现：src/main/package.ts
高级功能
使用TypeScript开发
Electron Fiddle内置对TypeScript的支持，只需将文件扩展名改为.ts，Fiddle会自动进行类型检查和编译。
类型定义文件配置：src/main/electron-types.ts
主题自定义
你可以通过设置面板自定义编辑器主题：
- 打开设置："File" -> "Settings"
- 在"Appearance"选项卡中选择喜欢的主题
- 支持的主题配置：src/themes-defaults.ts
插件扩展
Fiddle支持通过npm安装第三方插件，扩展开发功能：
- 打开侧边栏的"Package Manager"
- 搜索需要的npm包
- 点击"Install"安装
包管理实现代码：src/main/npm.ts
总结与资源
通过本文的介绍，你已经掌握了Electron Fiddle的基本使用方法，能够创建、运行和打包Electron应用。要进一步提升你的Electron开发技能，可以参考以下资源：
- 官方文档：README.md
- 贡献指南：CONTRIBUTING.md
- 测试用例：tests/
- 更多示例：static/show-me/
如果你在使用过程中遇到问题，可以通过项目的SECURITY.md文件中提供的方式获取支持。
现在，你已经准备好使用Electron Fiddle开发自己的桌面应用了。开始动手尝试吧，创造属于你的第一个Electron应用！
如果你觉得本教程对你有帮助，请点赞收藏，并关注获取更多Electron开发技巧。下期我们将介绍如何使用Electron Fiddle开发跨平台的文件管理器应用。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
