Los siguientes proyectos están basados en reactla versión 18 y electronla versión 12.
Primero echemos un vistazo al programa de escritorio generado. La página de apertura se ve así y admite la generación de accesos directos en el escritorio.
Esta es la ubicación del exe generado ,
lo empaqueté en la carpeta distwin-unpacked y lo abrí directamente para ejecutarlo.
Primero cree un proyecto de reacción, luego cargue electronlas dependencias
npm i electron --save
Modifique
main.js correspondiente al campo principal del archivo package.json es el archivo de página de inicio del proceso principal de electrones que debe agregarse. La razón es
que, de forma predeterminada, la página de inicio es http://localhost:3000. Después Durante la compilación, todas las rutas de los archivos de recursos son /static. Sin embargo, el punto de entrada llamado por Electron es el archivo: protocolo, y /static se ubicará en el directorio raíz, por lo que no se podrán encontrar archivos estáticos. Después de agregar el campo de la página de inicio en el archivo package.json y configurarlo en ".", la ruta del archivo estático se convierte en una ruta relativa y se puede encontrar correctamente.
"main": "public/electron.js",
"homepage": ".",
Agregar comando de secuencia de comandos
"dist": "cross-env NODE_ENV=production yarn run build && electron-builder",
Entonces también es necesario instalar electron-builderycross-env
"devDependencies": {
"cross-env": "^7.0.3",
"electron": "^12.0.7",
"electron-builder": "^22.11.1",
},
publicelectron.jsCrea un archivo en
// 引入模块
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'),
}));
// 打开开发者工具
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 导入。
publicpreload.jsCrea un archivo en
// 这里是预加载文件, 即使不开启 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
Todo el directorio del proyecto.
