Electron API 演示应用中文版教程

最新推荐文章于 2024-09-05 11:24:38 发布

焦习娜Samantha

最新推荐文章于 2024-09-05 11:24:38 发布

阅读量388

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00748/article/details/141010606

版权

Electron API 演示应用中文版教程

electron-api-demos-Zh_CN这是 electron-api-demos 的中文版本, 更新至 v2.0.2项目地址:https://gitcode.com/gh_mirrors/el/electron-api-demos-Zh_CN

1. 项目目录结构及介绍

Electron API Demos 中文版的项目目录结构如下：

├── assets                   # 应用中的图片和其他资源
├── build                    # 构建相关脚本和配置
├── common                   # 公共模块，如主进程和渲染进程共享的代码
│   ├── main                 # 主进程（Electron后台）代码
│   └── renderer             # 渲染进程（前端界面）代码
├── docs                     # 文档文件
├── package.json             # 项目依赖和脚本配置
├── public                    # 静态公共文件，如HTML、CSS和JavaScript
└── scripts                   # 构建和开发脚本

assets: 包含应用图标和其他图形资源。
build: 存放构建过程相关的设置和工具。
common: 含有主进程和渲染进程共用的代码模块。
docs: 相关文档。
package.json: 项目依赖和npm脚本定义。
public: 应用程序的静态资源，例如HTML、CSS和JavaScript。
scripts: 开发和构建过程的命令脚本。

2. 项目的启动文件介绍

主进程 (`main.js`)

在 common/main 目录下的 main.js 文件是 Electron 应用的主入口点，它负责初始化Electron应用，设置窗口以及管理应用生命周期。

// 导入Electron模块
const { app, BrowserWindow } = require('electron')

// 创建应用窗口
function createWindow() {
  // ...
}

// 当 Electron 完成初始化且准备创建浏览器窗口时执行
app.whenReady().then(() => {
  createWindow()
  
  //...
});

// 当所有窗口都关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 当激活事件发生时重新显示已最小化的应用窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

渲染进程 (`renderer/index.html` 和 `renderer/index.js`)

public/renderer/index.html: 这是主界面的HTML模板，包含了加载JavaScript和CSS的标签。
common/renderer/index.js: 用于处理用户界面交互和展示API示例的JavaScript代码。

3. 项目的配置文件介绍

主要的配置文件是 package.json，它定义了项目的元数据，包括名称、版本、描述和依赖项。此外，package.json 文件还包含一些npm脚本，比如启动、构建和调试应用的命令：

{
  "name": "electron-api-demos-zh_cn",
  "version": "2.0.2",
  "description": "这是一份 Electron API 演示的中文版本",
  "scripts": {
    "start": "npm run compile && electron .",
    "dev": "concurrently \"npm run watch\" \"npm start\"",
    "compile": "rimraf dist && tsc --project tsconfig.renderer.json",
    "watch": "tsc --project tsconfig.renderer.json --watch",
    "postinstall": "install-app-deps"
  },
  "dependencies": {
    "electron": "^18.1.0",
    "electron-builder": "^23.4.2",
    "typescript": "^4.7.4"
  },
  "devDependencies": {
    "@types/electron": "^18.0.0",
    "concurrently": "^7.4.0",
    "ts-node": "^10.9.1",
    "typescript": "^4.7.4"
  }
}

上述脚本中：