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

Electron -- Electron Fiddle（一）

article 2024/12/22 6:08:20

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、预览应用：