Electron Fiddle 快速入门教程

Electron Fiddle 快速入门教程

fiddle:electron: 🚀 The easiest way to get started with Electron项目地址:https://gitcode.com/gh_mirrors/fi/fiddle

1. 项目目录结构及介绍

Electron Fiddle 的目录结构如下：

Electron-Fiddle
├── .gitignore
├── LICENSE
├── package-lock.json
├── package.json
├── README.md
├── templates
│   ├── basic
│   │   └── main.js
│   └── ...
└── user-fiddles
    └── default.vdf

• templates: 存放各种模板，如基本（basic）模板，包含了项目的基本结构。
• user-fiddles: 用户创建的Fiddles存储在这里，.vdf 文件是Fiddle的保存格式。

2. 项目的启动文件介绍

在 templates 目录下的各个模板中，main.js 是核心的启动文件。例如，在 basic 模板中，main.js 包含了Electron应用的基本逻辑。当运行Fiddle时，这个文件会被执行来启动应用程序。

例如，一个简单的 main.js 可能如下所示：

const { app, BrowserWindow } = require('electron')
require('./menu')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: process.env.ELECTRON_PRELOAD_PATH
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed.
app.on('window-all-closed', function () {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') app.quit()
})

3. 项目的配置文件介绍

Electron Fiddle 使用 package.json 文件作为主要配置文件，它记录了项目的依赖和元数据。此外，Fiddle 使用 .vdf 文件来保存用户的代码和设置。.vdf 文件是序列化的 JSON 对象，通常包括以下关键部分：

• metadata: 应用的元数据，如名称、作者等。
• main: 主文件路径，对应于上述提到的 main.js。
• files: 应用包含的所有文件列表。
• preferences: 用户的配置偏好，如运行时选项、开发者工具的状态等。

例如，一个简化版的 .vdf 文件可能看起来像这样：

{
  "schemaVersion": 4,
  "metadata": {
    "name": "My First Fiddle",
    "version": "0.0.1"
  },
  "main": "./src/main.js",
  "files": [
    "./src/main.js",
    "./src/index.html"
  ],
  "preferences": {
    "showDevTools": true
  }
}

在这个例子中，main 指定了主进程脚本，files 列出了项目中的文件，而 preferences.showDevTools 控制是否显示开发者工具。

以上就是关于Electron Fiddle 的目录结构、启动文件和配置文件的简介。现在你已经有了基础的理解，可以开始你的Electron开发之旅了！

fiddle:electron: 🚀 The easiest way to get started with Electron项目地址:https://gitcode.com/gh_mirrors/fi/fiddle