Electron+React轻松开发桌面应用：初探篇

2023-11-15 23:07:59

前言

在当今快速发展的数字时代，桌面应用依然占据着不可替代的地位。无论是办公软件、游戏还是媒体播放器，它们都为我们提供了丰富多样的功能和便捷的操作体验。然而，传统的桌面应用开发往往需要掌握多种语言和工具，耗费大量的时间和精力。

为了简化桌面应用的开发过程，Electron横空出世。Electron是一个开源框架，它允许你使用JavaScript、HTML和CSS来构建跨平台的桌面应用。这使得桌面应用的开发变得更加简单和高效，甚至对于前端开发者来说，Electron也是一个非常友好的选择。

React是一个用于构建用户界面的JavaScript库，它以其声明式编程和组件化的设计理念，深受开发者的喜爱。当Electron与React结合时，它们可以发挥出强大的协同效应，帮助我们快速构建出美观、交互性强的桌面应用。

搭建开发环境

在开始开发之前，我们需要先搭建好开发环境。这里以Windows系统为例，其他系统请自行查找对应教程。

安装Node.js

Node.js是一个跨平台的JavaScript运行环境，它是Electron和React的基础。你可以从Node.js官网下载并安装Node.js。

安装Electron

Electron可以在其官网下载，下载完成后解压即可。

安装React

React可以通过npm安装，打开命令行工具，输入以下命令：

npm install -g create-react-app

创建项目

使用create-react-app创建一个新的React项目，项目名称为my-electron-app：

create-react-app my-electron-app

安装Electron React Boilerplate

Electron React Boilerplate是一个用于快速构建Electron+React项目的脚手架工具，它可以帮助我们快速搭建项目结构。安装方法如下：

cd my-electron-app
npm install electron-react-boilerplate --save-dev

运行项目

项目搭建完成后，我们就可以运行项目了。在命令行工具中，输入以下命令：

npm start

此时，项目将会在浏览器中打开。

构建Electron应用

现在，我们已经成功搭建好了开发环境，接下来就可以开始构建Electron应用了。

创建主进程文件

主进程文件是Electron应用的入口，它负责创建和管理浏览器窗口，并与操作系统进行交互。在项目根目录下，创建一个名为main.js的文件，并输入以下代码：

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

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载index.html文件
  win.loadFile('index.html')

  // 打开开发者工具
  // win.webContents.openDevTools()
}

// 当Electron初始化完成时，创建窗口
app.whenReady().then(() => {
  createWindow()

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

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

创建渲染进程文件

渲染进程文件负责渲染用户界面，它与主进程文件进行通信，并处理用户输入。在项目根目录下，创建一个名为index.js的文件，并输入以下代码：

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => {
  return (
    <div>
      <h1>Hello, Electron!</h1>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));