React Electron生成桌面应用过程
一、创建react项目
首先使用creat-react-app脚手架来创建一个react项目
# 安装 create-react-app 命令,如果已将安装请忽略
npm install -g create-react-app
# 创建 react项目
create-react-app react-electron
# 启动项目( create-react-app 真的超级方便啊)
cd react-electron && npm start
npm start之后浏览器会自动打开网址 http://localhost:3000/ ，出现react项目的页面了
二、安装Electron
#在react-electron项目目录下
npm install -save electron
三、配置文件
1.在项目根目录新建main.js
const { app, BrowserWindow } = require("electron")
const path = require('path')
const url = require('url')
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 800,
minWidth: 800,
minHeight: 800
})
win.loadURL("http://localhost:3000/")
}
app.whenReady().then(() => {
createWindow()
app.on("active", () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
})
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit()
}
})
2.配置package.json
添加如下两项配置：
{
"main": "main.js", // 配置electron的启动文件
"scripts": {
"electron-start": "electron ."
},
}3.启动electron
# 这里要打开两个窗口
# 启动react项目
npm start
# 启动electron
npm run electron-start
npm run electron-start之后会自动出现桌面应用
四、打包Electron桌面应用
安装 electron-packager
npm install electron-packager -D
** 配置homePage字段**在package.json文件中添加如下配置
{
"homepage": "."
}
{
"script": {
"package": "electron-packager ./build react-electron --platform=darwin --arch=x64 --electron-version 17.1.0 --overwrite"
}
}
//mac系统 --platform=darwin
//Windows系统 --platform=win32
然后打包react代码，根目录会多出一个build文件夹
npm run build
将main.js和package.json两个文件复制到build文件夹下，同时修改build文件夹下的main.js
// 加载应用----electron默认的打包入口
win.loadURL(url.format({
pathname: path.join(__dirname, './index.html'), // 修改这里
protocol: 'file:',
slashes: true
}))
在根目录运行打包命令
npm run package
到此这篇关于React Electron生成桌面应用过程的文章就介绍到这了,更多相关React Electron桌面应用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
PixiJS是一个开源的基于web的渲染系统，为游戏、数据可视化和其他图形密集型项目提供了极快的性能，这篇文章主要介绍了用PixiJS实现react图标旋转动效,需要的朋友可以参考下2022-05-05
Immutable.js出自Facebook，是最流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。所有的更新操作都会返回新的值，但是在内部结构是共享的，来减少内存占用2022-09-09
在V6版本中，<Switch>组件被替换成<Routes>组件，同时，component属性被element属性替换，这篇文章主要介绍了react-router v6新特性总结,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了React 如何向url中添加参数，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了react hooks实现原理,文中给大家介绍了useState dispatch函数如何与其使用的Function Component进行绑定，实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了react中使用ant组件库的modal弹窗报错问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
散点图(Scatter Chart),通常是一横一竖两个坐标轴，数据是一组二维坐标，分别对应两个坐标轴，与坐标轴对应的地方打上点。由此可以猜到，需要的元素包括circle(圆)和axis(坐标轴),接下来通过本文大家分享D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本) ，一起看看2019-05-05
在 Vue 中可以简单地使用 watch 来监听数据的变化，还能获取到改变前的旧值，而在 React 中是没有 watch 的，今天通过本文给大家讲解React实现Vue的watch监听属性的方法,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了react使用websocket实时通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了React中的render何时执行过程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论