本文用于记录在react-create-app生成的react项目中配置electron的步骤。
完整项目见github
效果:
- 使用react-create-app生成react项目。
- 安装electron:
npm install electron
如果安装过程中在install.js出错,可参考:解决安装electron卡在node install.js 不动问题。 在package.json中的最外层加入:
"homepage": "./", "main": "main.js",
如图:
- 在package.json中的scripts内加入:
"electron": "electron ."
如图: - 使用
npm run build
命令打包,在根目录的build文件夹下生成react项目的index.js文件,用于electron的渲染进程访问。 - 在项目的根目录下(即与src同级处)新建一个文件main.js。文件的内容如下:
// 引入electron并创建一个Browserwindow
const {app, BrowserWindow} = require('electron');
const path = require('path');
const url = require('url');
// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.
let mainWindow
function createWindow () {
//创建浏览器窗口,宽高自定义
mainWindow = new BrowserWindow({width: 800, height: 600})
/*
* 加载应用----- electron-quick-start中默认的加载入口
*/
mainWindow.loadURL(url.format({
//使用npm run build生成的index.html的路径名
pathname: path.join(__dirname, './build/index.html'),
protocol: 'file:',
slashes: true
}))
// 打开开发者工具,默认不打开
// mainWindow.webContents.openDevTools()
// 关闭window时触发下列事件.
mainWindow.on('closed', function () {
mainWindow = null
})
}
// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法
app.on('ready', createWindow)
// 所有窗口关闭时退出应用.
app.on('window-all-closed', function () {
// macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态.
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
// macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口
if (mainWindow === null) {
createWindow()
}
})
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。