Sugar-Electron 项目教程

Sugar-Electron 项目教程

Sugar-Electron项目地址:https://gitcode.com/gh_mirrors/su/Sugar-Electron

1. 项目的目录结构及介绍

Sugar-Electron 项目的目录结构如下：

Sugar-Electron/
├── docs/
├── test/
├── .eslintrc.js
├── .gitignore
├── .npmignore
├── LICENSE
├── README.en.md
├── README.md
├── _config.yml
├── index.js
├── jest.config.js
├── main.js
├── package-lock.json
├── package.json
├── render.js
├── update.md

目录结构介绍

• docs/: 存放项目文档。
• test/: 存放测试文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: NPM 忽略文件配置。
• LICENSE: 项目许可证。
• README.en.md: 英文版 README 文件。
• README.md: 中文版 README 文件。
• _config.yml: 配置文件。
• index.js: 项目入口文件。
• jest.config.js: Jest 测试框架配置文件。
• main.js: 主进程文件。
• package-lock.json: NPM 锁定文件。
• package.json: 项目依赖和脚本配置文件。
• render.js: 渲染进程文件。
• update.md: 更新日志文件。

2. 项目的启动文件介绍

主进程启动文件

main.js 是 Sugar-Electron 的主进程启动文件。它负责创建和管理渲染进程，并处理应用的生命周期事件。

// main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  win.loadURL('https://github.com');
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

渲染进程启动文件

render.js 是 Sugar-Electron 的渲染进程启动文件。它负责渲染页面内容。

// render.js
const { ipcRenderer } = require('electron');

ipcRenderer.send('message', 'Hello from renderer process!');

3. 项目的配置文件介绍

package.json

package.json 是 NPM 项目的配置文件，包含了项目的依赖、脚本和其他元数据。

{
  "name": "sugar-electron",
  "version": "1.0.0",
  "description": "基于Electron的轻量级开发框架",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "test": "jest"
  },
  "dependencies": {
    "electron": "^10.0.0",
    "sugar-electron": "^1.0.0"
  },
  "devDependencies": {
    "jest": "^26.0.0"
  },
  "author": "SugarTurboS Team",
  "license": "MIT"
}

.eslintrc.js

.eslintrc.js 是 ESLint 的配置文件，用于代码风格检查和格式化。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: 'eslint:recommended',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    // 自定义规则
  },
};

.gitignore

`.gitignore

Sugar-Electron项目地址:https://gitcode.com/gh_mirrors/su/Sugar-Electron