Electron的入门介绍与使用React18+Vite+Electron（2）共30节

最新推荐文章于 2024-08-18 10:41:40 发布

weifont

最新推荐文章于 2024-08-18 10:41:40 发布

阅读量1k

点赞数 18

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/feixin369/article/details/140733443

版权

上一篇讲了如何安装Electron和简单例子，Electron的入门介绍与使用（1）共30节

让我们回顾一下Electron的发展历史，Electron 最初由 GitHub 公司开发，最早用于构建 GitHub Desktop。随着其成功，Electron 逐渐成为一个受欢迎的开发框架，许多知名应用程序如 Visual Studio Code、Slack、WhatsApp 等也使用 Electron 构建。 基本原理 Electron 使用 Chromium 渲染引擎来显示 Web 内容，同时结合 Node.js 来提供对操作系统的访问和控制。

跨平台： Electron 应用程序可以在多个操作系统（如 Windows、macOS、Linux）上运行，因为它们在不同平台上共享相同的核心代码。
前端技术：开发者可以使用熟悉的前端技术，如 HTML、CSS 和 JavaScript，来构建用户界面。
Node.js 集成：通过 Node.js，开发者可以在应用程序中使用 JavaScript 来处理文件系统、网络通信、操作系统 API 等等。
自定义性：开发者可以通过使用原生的 Web 技术和样式，创建非常定制化的用户界面。
社区支持：有一个活跃的社区，提供了大量的插件和库，以帮助开发者构建更强大、更高效的应用程序。

核心组件

主进程（Main Process）：这是应用程序的主要控制中心，运行 Node.js 环境，负责管理和控制所有的渲染进程和窗口。
渲染进程（Renderer Process）：每个 Electron 窗口对应一个独立的渲染进程，它们运行在 Chromium 渲染引擎中，负责显示用户界面。
主窗口（Main Window）：主窗口是应用程序的主界面，通常是一个 Chromium 窗口，用来显示 Web 内容。
系统托盘图标（Tray）：允许在桌面右下角显示小图标，提供应用程序的快速访问和交互。

ok ,回归正传，今天我们讲解Electron和React18的结合。

一、使用vite初始化项目

pnpm create vite

....

接下来就是项目命名之类的，跟着提示操作即可。

接下来安装Electron

要安装预编译的 Electron 二进制文件，请使用 npm。首选方法是在你的应用程序中安装 Electron 作为开发依赖：

npm install electron --save-dev

查看versioning doc获取如何在你的应用中管理Electron的相关信息。

运行 Electron ad-hoc

如果你不想在本地工程上使用 npm install 同时又没用其它选择时，你也可以使用 npm 捆绑的 npx 命令来运行 Electron ad-hoc：

npx electron .

上面的命令会在当前工作目录下运行Electron。需要注意的是，你的应用中的任何依赖将不会被安装。

二、配置项目

在 package.json 中指定的 main 文件是 Electron 应用的入口。这个文件控制 主程序 (main process)，它运行在 Node.js 环境里，负责控制您应用的生命周期、显示原生界面、执行特殊操作并管理渲染器进程 (renderer processes)，稍后会详细介绍。

在继续编写您的 Electron 应用之前，您将使用一个小小的脚本来确保主进程入口点已经配置正确。在根目录的 main.js 文件中写一行代码：

main.js

console.log('Hello from Electron 👋')

由于 Electron 的主进程是一个 Node.js 运行时，您可以使用 electron 命令执行任意的 Node.js 代码 (甚至可以将其作为 REPL 使用)。要执行这个脚本，需要在 package.json 的 scripts 字段中添加一个 start 命令，内容为 electron . 。这个命令会告诉 Electron 在当前目录下寻找主脚本，并以开发模式运行它。

修改mian的代码：

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 800,
    height: 600
  })

  win.loadFile('../public/index.html') //此处为react项目打包后的入口文件
}

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

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

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

OK，接下来我们修改package.json

  "main": "dist-electron/index.js",
  "scripts": {
    "dev:electron": "cross-env NODE_ENV=development vite",
    "start:electron": "electron .",
    "build:win": "electron-builder --win --x64",
    "build:mac": "electron-builder --mac --x64",
    "build:linux": "electron-builder --linux --x64",
    "build:all": "npm run build:win && npm run build:mac && npm run build:linux",
    "test:electron": "echo \"Error: no test specified\" && exit 1",
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

修改vite.config.js代码

import electron from 'vite-plugin-electron'
　...
  //多余代码没写
  plugins: [react(), electron({
    entry: 'electron/index.js'
  })],
...

好了，这样就可以启动试下

pnpm run dev