光谷 网站建设公司免费b2b推广网站大全
Electron Fiddle 是一个由 Electron 团队开发的开源工具，它允许开发者快速创建、运行和调试 Electron 应用。这个工具提供了一个简洁的界面，使用户无需配置复杂的开发环境，就能快速体验和学习 Electron。强烈建议将其安装为学习工具。
学习它的理由：
-
探索 Electron：Electron Fiddle 允许你在不安装任何依赖的情况下尝试 Electron APIs，并且包含了 Electron 中每个 API 的示例，方便你快速查看特定功能如何工作。
-
代码与类型：Fiddle 包含了微软的 Monaco 编辑器（也是 Visual Studio Code 使用的编辑器），并且会自动安装当前选择的 Electron 版本的类型定义，确保你始终能够快速访问所有 Electron APIs。
-
编译和打包：Electron Fiddle 可以自动将你的实验转换成可分享的二进制文件，通过 electron-forge 实现打包，支持 Windows、macOS 或 Linux 平台。
-
从 Fiddle 开始，随处继续：Electron Fiddle 不是一个 IDE，但它是一个很好的起点。一旦你的代码成熟，你可以将其导出为带有或不带有 electron-forge 的项目，然后使用你最喜欢的编辑器继续开发。
下载Electron Fiddlehttps://github.com/electron/fiddle/releases/download/v0.36.5/electron-fiddle-0.36.5-win32-x64-setup.exe
创建和运行应用
1、安装Fiddle应用程序后， 创建和运行应用：
- 在 Electron Fiddle 的欢迎界面，点击“Create a new fiddle”按钮。
- 你也可以通过点击界面右上角的“New Fiddle”按钮来创建新项目。
2、配置项目：
- 在新项目中，你可以看到三个部分：JavaScript、HTML 和 CSS。
- 在这些部分中编写你的应用代码。例如：
- JavaScript：用于处理逻辑和 Electron API 的调用。
- HTML：用于定义应用的布局和结构。
- CSS：用于设置应用的样式。
示例代码：
// 示例代码：main.js
const { app, BrowserWindow } = require('electron')function createWindow () {const win = new BrowserWindow({width: 800,height: 600,webPreferences: {nodeIntegration: true}})win.loadFile('index.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()}
})3、预览应用：
- 使用界面右上角的“Preview”按钮预览你的应用。
- 这将在一个新的 Electron 窗口中打开你的应用，以便你可以测试和查看应用的外观和行为。
4、打包和分享
- 点击界面右上角的“Save”按钮保存你的项目。
- 你可以将项目保存到本地，或者通过点击“Save to GitHub”将其保存到 GitHub
- 在 Electron Fiddle 中，点击“Package”按钮来打包你的应用。
- 这将为你的应用创建一个可分发的版本，你可以将其分享或部署到不同的平台上。
- 打包完成后，你可以下载应用的安装包。
- 将安装包分享给用户或上传到应用商店。
END.