Electron+React 快速搭建一个桌面应用

Posted 2023-03-29

参考技术A

1、Electron： electron是一个使用js，html和css等的web技术创建原生桌面应用的框架，他基于chromium和node.js，构建的应用可以在Mac，windows和Linux三个平台上运行。
2、React和react-router 在该项目中负责构建单页面应用和路由跳转的实现。
3、Antd 作为UI框架。

我们使用目前已经比较成熟的create-react-app脚手架来创建一个react项目，关于这个脚手架的更多资料可以查看： https://facebook.github.io/create-react-app/docs/getting-started。

这里我们使用如下的命令：

如果成功，此时可以打开浏览在 http://localhost:3000/ 上会运行着我们新建的项目。
可以通过npm run eject 弹出内建，方便看出有哪些安装的依赖。

安装成功后还不能直接运行一些命令，需要先进行一些配置，至少要有个electron需要用到的main.js入口文件（根目录下）。

修改启动命令：

这里的dev想要同时执行两个命令，使用了|将两个命令分开。
其中electron . --debug ,是调试命令需要运行项目同时开启开发者工具，入口文件中会对这个命令进行判断，并开启指定工具。

（复制github上electron的demo项目中的main.js做一些修改）
如下是当前全部的main.js内容

如上，注意将主进程的loadUrl设置为localhost:3000，这样可以展示运行在这个地址下的页面。

使用如下命令安装：

安装好后：在main.js中进行配置，参考上面main.js文件中的注释。

项目构建完成后，这里开始讲解一下，react的项目和electron结合使用中的一个应用问题。先把需求提出来，如下图，我们需要在页面中点击右上角最小化时将页面窗口最小化（点击×时的功能以此类推），当点击登录时修改窗口大小，并展示直播页面。

要完成这个功能，要使用到Electron的API，这就要先从electron应用结构来说起，electron结构中分为主进程和渲染器进程，如下是electron官网的一段话。

此时，回想一下需求，点击“—”时最小化，我们发现触发事件的ui在web页面（react组件）中，而想要操作的mainWindow对象（主进程中打开的那个页面）却在主进程中。所以，尝试一个解决方案，让web页面（react组件）和主进程进行通信。
实现进程通信使用到的api有ipcRenderer和ipcMain.

具体运用如下：

如上点击时执行minWindow,引入ipcRender发送一个消息”min”,main.js中有对应的ipcMain进行监听，请看如下：

因此，主进程收到消息后，即可对窗口进行处理为最小化，而登录功能与此类似，传递消息到主进程同时跳转页面，主进程收到消息后执行窗口最大化，因此就实现了最初的需求。
同理，当组件有其他操作需要主进程作出反馈时，也可以使用此方案。

Electron打包React构建桌面应用

一、Electron简介
  Electron是一个能让你使用JavaScript,HTML和CSS来创建桌面应用程序的框架。这些应用程序可以打包后在 macOS、Windows 和 Linux 上直接运行。
  在目前浏览器和移动端盛行的互联网环境下，跨平台的桌面应用开发，也为前端提供了一个新分支方向。

二、搭建准备
1、检查git和node是否安装完成

git --version
node -v
npm -v

2、搭建React
  安装create-react-app

npm install -g create-react-app

  创建my-electron-app项目

create-react-app my-electron-app

  启动项目

cd my-electron-app && npm start

3、安装electron包

npm i --save-dev electron

三、创建基本应用程序
  首先需要了解下Electron，用Electron开发应用程序就像构建一个带有网页界面的Node.js应用程序。同样使用package.json文件作为主入口，主脚本指定了运行主进程的 Electron应用程序的入口，这里是main.js 文件。
1、创建main.js文件

// 导入app、BrowserWindow模块
// app 控制应用程序的事件生命周期。事件调用app.on('eventName', callback)，方法调用app.functionName(arg)
// BrowserWindow 创建和控制浏览器窗口。new BrowserWindow([options]) 事件和方法调用同app
// Electron参考文档 https://www.electronjs.org/docs
const  app, BrowserWindow, nativeImage  = require('electron');
   const url = require('url');
   const path = require('path');

function createWindow () 
  let mainWindow = new BrowserWindow(
    width: 800, // 窗口宽度
    height: 600, // 窗口高度
    title: "Electron", // 窗口标题,如果由loadURL()加载的HTML文件中含有标签<title>，该属性可忽略
    icon: nativeImage.createFromPath('src/public/favicon.ico'), // "string" || nativeImage.createFromPath('src/image/icons/256x256.ico')从位于 path 的文件创建新的 NativeImage 实例
    webPreferences:  // 网页功能设置
      nodeIntegration: true, // 是否启用node集成 渲染进程的内容有访问node的能力
      webviewTag: true, // 是否使用<webview>标签 在一个独立的 frame 和进程里显示外部 web 内容
      webSecurity: false, // 禁用同源策略
      nodeIntegrationInSubFrames: true // 是否允许在子页面(iframe)或子窗口(child window)中集成Node.js
    
  );

  // 加载应用 --打包react应用后，__dirname为当前文件路径
  // mainWindow.loadURL(url.format(
  //   pathname: path.join(__dirname, './build/index.html'),
  //   protocol: 'file:',
  //   slashes: true
  // ));

  // 加载应用 --开发阶段  需要运行 npm run start
  mainWindow.loadURL('http://localhost:3000/');

  // 解决应用启动白屏问题
  mainWindow.on('ready-to-show', () => 
    mainWindow.show();
    mainWindow.focus();
  );

  // 当窗口关闭时发出。在你收到这个事件后，你应该删除对窗口的引用，并避免再使用它。
  mainWindow.on('closed', () => 
    mainWindow = null;
  );


app.whenReady().then(createWindow);

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

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

2、修改package.json文件
主进程文件创建好了，修改package.json文件。
（1）配置启动文件，添加main字段，我们这里也就是main.js文件。如果没有添加，Electron 将尝试加载包含在package.json文件目录中的index.js文件。
（2）配置运行命令，使用"electron-start": "electron ." 。

  "name": "my-electron-app",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",  // 配置启动文件
  "homepage":".", // 设置应用打包的根路径 更多了解参考：https://segmentfault.com/a/1190000021875558
  "dependencies": 
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  ,
  "scripts": 
    "start": "react-scripts start",  // react 启动命令
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron-start": "electron ."  // electron 启动命令
  ,
  "eslintConfig": 
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  ,
  "browserslist": 
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  ,
  "devDependencies": 
    "electron": "^11.1.1"
  

3、启动Electron
  准备工作就完成了，进行启动
  main.js文件中如果设置的mainWindow.loadURL('http://localhost:3000/'); 则需要启动react项目
  启动react项目

npm start

  启动electron

npm run electron-start

四、打包项目
  1、打包react项目

npm run build

  将main文件中注释的mainWindow.loadURL适用于react打包的方法释放开。
  2、打包 electron使用electron-packager依赖

npm install electron-packager --save-dev

  3、package.json配置打包命令

"package": "electron-packager . my-electron-app --platform=win32 --arch=x64 --overwrite --electron-version=11.1.1"

4、  配置解释

electron-packager <应用目录> <应用名称> <打包平台> <架构x86 还是 x64> <架构> <electron版本> overwrite 如果输出目录已经存在，替换它

5、  运行打包命令

npm run package