您现在的位置是:首页 >技术教程 >React+Electron搭建桌面应用方法和步骤网站首页技术教程

React+Electron搭建桌面应用方法和步骤

搬砖的前端 2024-10-20 12:01:04
简介React+Electron搭建桌面应用方法和步骤

React+Electron搭建桌面应用方法和步骤

步骤:

【一: 构建、配置入口】

  1. 创建react 项目应用
  2. 安装 Electron 依赖项
  3. 修改 package.json 文件
  4. 新建主线程文件 main.js 主线程文件
  5. 运行项目

【二: 改造配置、环境域名】

  1. 非必须:添加 合并启动执行命令 ,(有配置环境,不要用)
  2. 非必须:安装 cross-env 环境变量,(根据环境请求不同域名和内容)

具体步骤如下:

【一: 构建、配置入口】

【1.1】创建react 项目应用

创建 react 应用:

// 安装react脚手架
npm install -g create-react-app

// 创建项目(projectname替换自己的项目名,不能有横杠大写,可以用下划线)
create-react-app projectname

// 打开目录
cd projectname

//启动测试是否正常
npm start

详见我另一个博客:
react+js或react+ts(tsx)使用creat-react-app、yarn搭建步骤

【1.2】react 项目内安装 Electron 依赖项

// 优先使用这个
npm i --save-dev electron

// 或者(node版本过低的不能用):
npm install electron

【1.3】修改 package.json 文件

  • 添加 定义执行命令,详见【1.5】
  • 实际需要 删除package.json内的 所有注释。对象数组最后一个元素结尾不能有逗号
{
  "name": "my-electron",
  "version": "0.1.0",
  "private": true,
  "main": "main.js", // 配置启动文件 -- 需新建
  "homepage": ".", // 设置应用打包的根路径
  "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": "^18.0.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start", // 【原始】react 启动命令,需要额外执行 electron。同时启动这两个
    "electron": "electron .", // 【添加】electron 启动命令,需要额外执行 start。同时启动这两个
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "react-scripts start | electron . --debug", // 【2.1介绍】合并命令,若有环境变量配置,不能使用
    "dev:debug": "react-scripts start | electron . --debug", // 【2.1介绍】合并命令,debug 模式。若有环境变量配置,不能使用
    "start:dev": "cross-env MODE_ENV=development react-scripts start", // 【2.2介绍】配置环境变量
    "electron:dev": "cross-env MODE_ENV=development electron ." // 【2.2介绍】配置环境变量
  },
  "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": "^18.1.0"
  }
}

【1.4】新建 main.js 主线程文件

路径:与package.json 同层次

// 导入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: 1000, // 窗口宽度
    height: 800, // 窗口高度
    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
    }
  });

// --------------------------------------------------------------------------------------------

  // 【二选一:打包时候使用】__dirname为当前文件路径
  // mainWindow.loadURL(url.format({
  //   pathname: path.join(__dirname, './build/index.html'),
  //   protocol: 'file:',
  //   slashes: true
  // }));

  // 【二选一:开发时候使用】
  //需要和本地项目启动会端口号一致,一般不需要改。多项目启动会有端口被占用而 改变情况
  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()
  }
});

【1.5】 运行项目

【改造前】开发阶段,原本需要启动两个终端(react + electron),同时跑起来

// 第一个
npm run start

// 第二个
npm run electron

.

【二: 改造配置、环境域名】

【2.1】非必须: 添加 合并启动执行命令
若配置环境变量【2.2】,此步骤忽略

位置:package.json / scripts。详见:【1.3】

"dev": "react-scripts start | electron .", // 【2.1介绍】合并命令,若有环境变量配置,不能使用
"dev:debug": "react-scripts start | electron . --debug" // 【2.1介绍】合并命令,debug 模式。若有环境变量配置,不能使用

执行命令

npm run dev
// 或:
npm run dev:debug

若空白页刷新下,react的本地服务没有启动好就打开了客户端

【2.2】非必须: 配置环境变量,区分开发和打包模式,使用不同环境接口地址

  • 若不嫌弃麻烦,自己手动注释切换也行

详见:我的另一个博客: React自定义node、cross-env、webpack等方式不同环境配置命令整理https://blog.csdn.net/weixin_44461275/article/details/122988359

  • 安装:cross-env
npm方式:
	npm install --save cross-env

cnpm方式:
	cnpm install --save cross-env

yarn方式:
	yarn add cross-env
  • 配置执行命令:详见【1.3】package.json 文件
"start:dev": "cross-env MODE_ENV=development react-scripts start",
"electron:dev": "cross-env MODE_ENV=development electron .",
  • 修改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: 1000, // 窗口宽度
    height: 800, // 窗口高度
    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
    }
  });

  // -----------------------------------------------------------------------------

  console.log('process.env.MODE_ENV--------------');
  console.log(process.env.MODE_ENV);

  if (process.env.MODE_ENV === 'development') {
    // 【开发时候使用】
    //需要和本地项目启动会端口号一致,一般不需要改。多项目启动会有端口被占用而 改变情况
    mainWindow.loadURL('http://localhost:3000/'); 
  } else {
    // 【打包时候使用】__dirname为当前文件路径
    mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, './build/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  }

  // -----------------------------------------------------------------------------

  // 解决应用启动白屏问题
  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()
  }
});
  • 运行:(都要执行)
npm run start:dev
// +
npm run electron:dev

.

【3】打包项目

【3.1】核对package.json中: homepage: “.” 配置信息,若无则添加,详见【1.3】

  • react项目打包后,所有资源文件路径都是 /static,而 Electron 调用的入口是 file :协议,/static
    就会定位到根目录去,所以找不到静态文件。
  • package.json 文件中 homepage 字段设置为"."后,静态文件的路径就变成了相对路径。

【3.2】修改 main.js 打包项

  • 若配置了【2.2】环境变量,此步骤省略。已经配置更好的方式,不需要手动注释解开代码再执行
  • 详见:【1.4】
  // 【二选一:打包时候使用】__dirname为当前文件路径
   mainWindow.loadURL(url.format({
     pathname: path.join(__dirname, './build/index.html'),
     protocol: 'file:',
     slashes: true
   }));

  // 【二选一:开发时候使用】
  //需要和本地项目启动会端口号一致,一般不需要改。多项目启动会有端口被占用而 改变情况
  // mainWindow.loadURL('http://localhost:3000/'); 

【3.3】 安装 electron-packager 打包依赖

npm install electron-packager --save-dev
或:
npm install electron-packager -g

【3.4】 安装 electron-packager 打包依赖

还没写完,待完结

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。