Electron + React 搭配创建 PC桌面 程序
1.Electron 介绍
简介： 使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序
-
快速启动 应用程序
# 克隆示例项目的仓库 $ git clone https://github.com/electron/electron-quick-start # 进入这个仓库 $ cd electron-quick-start # 安装依赖并运行 $ npm install && npm start #OR $ yarn $ yarn start- 上面只是 demo 演示一下 electron 的使用，在实际项目中这里仅供参考。
2. React 介绍
官方文档： https://reactjs.org/
介绍： A JavaScript library for building user interfaces
-
快速启动 应用程序
- 官方提供快速脚手架 create-react-app
- 可以使用 yarn 也可以使用 npm 进行安装
- 也可以使用 淘宝 镜像，如何设置自行百度
- create-react-app 初始化的项目 默认监听 3000 端口
- 如果能正常访问 http://localhost:3000 ,则说明初始化成功。
# 全局安装 create-react-app yarn add global create-react-app # OR npm install -g create-react-app #安装完成之后，初始化项目 my-app 是自己要新建项目的目录名称 yarn create react-app my-app # OR npm install create-react-app my-app # 安装完成之后，进入 my-app 目录 cd my-app # 启动 项目 yarn start # OR npm start
3. Electron + React 项目实战
-
步骤 2 中 初始化 完成的项目目录
- my-demo -- node_modules -- public -- src -- packager.json -- 等其他文件 -
在初始化好的react项目中引入electron
# 安装 electron yarn add electron --dev # OR npm install electron --dev -
在 public 文件夹下， 新增 electron.js 和 preload.js
# electron.js electron启动的入口文件 // 引入模块 const url = require('url'); const path = require('path'); const { app, BrowserWindow } = require('electron'); // 开发环境 const isDev = process.env.NODE_ENV === 'development'; // 保持对window对象的全局引用，如果不这么做的话，当JavaScript对象被 // 垃圾回收的时候，window对象将会自动的关闭 let win = null; function createWindow() { // 创建浏览器窗口。 win = new BrowserWindow({ width: 800, height: 600, webPreferences: { // 使用 preload 预加载模块, 可以把 nodeIntegration 禁用掉, 在 preload 阶段是可以访问 node 的, // 这样做是因为即使启用了 node, webpack 在进行打包的时候也不会识别 node 模块和 electron 模块, // nodeIntegration: true, // 使用 proload 预加载注入的模块, 参看下方的 preload.js 文件 preload: path.join(__dirname, './preload.js'), }, }); // 删除菜单 // win.removeMenu(); // 加载index.html文件 win.loadURL(isDev ? 'http://localhost:3000' : url.format({ protocol: 'file', slashes: true, pathname: path.join(__dirname, 'index.html'), })); // 打开开发者工具 isDev && win.webContents.openDevTools(); // 当 window 被关闭，这个事件会被触发。 win.on('closed', () => { // 取消引用 window 对象，如果你的应用支持多窗口的话， // 通常会把多个 window 对象存放在一个数组里面， // 与此同时，你应该删除相应的元素。 win = null; }); } // Electron 会在初始化后并准备 // 创建浏览器窗口时，调用这个函数。 // 部分 API 在 ready 事件触发后才能使用。 app.on('ready', createWindow); // 当全部窗口关闭时退出。 app.on('window-all-closed', () => { // 在 macOS 上，除非用户用 Cmd + Q 确定地退出， // 否则绝大部分应用及其菜单栏会保持激活。 if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // 在macOS上，当单击dock图标并且没有其他窗口打开时， // 通常在应用程序中重新创建一个窗口。 if (win === null) { createWindow(); } }); // 在这个文件中，你可以续写应用剩下主进程代码。 // 也可以拆分成几个文件，然后用 require 导入。// 这里是预加载文件, 即使不开启 nodeIntegration 也可以使用 node 模块, // 我们将需要的模块, 添加到 window 上, 然后再页面中可以从 window 对象上取到需要的模块. window.electron = require('electron'); window.fs = require('fs'); window.express = require('express'); // https://www.dotcoo.com/create-react-app-electron-electron-builder-
修改 packager.json 文件
# 要为 项目 添加 *author*， *description* 等必要的属性，否则 electron 打包时候 会报错 # 修改后的 （已包含了打包的指令） package.json 如下 { "name": "my-demo", "version": "0.1.0", "private": true, "author": { "name": "York Lau", "email": "Liuzq811@163.com" }, "description": "a electron react app", "main": "public/electron.js", "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "electron": "cross-env NODE_ENV=development electron .", "pack": "cross-env NODE_ENV=production yarn run build && electron-builder --dir", "dist": "cross-env NODE_ENV=production yarn run build && electron-builder" }, "homepage": ".", "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": { "cross-env": "^7.0.3", "electron": "^12.0.7", "electron-builder": "^22.11.1" } } 启动
yarn electron # OR npm run electron- 打包 使用 electron-builder 进行打包成 exe 文件
# 安装 依赖 yarn add --dev electron-builder cross-env # 安装 完成 之后 参考上面的 packager.json 文件的配置 # 打包命令 yarn dist # 正常生成 exe 安装包 -
