electron 集成react

1、创建react项目
npx create-react-app 项目名称

2、安装electron
cnpm i electron --save

3、在package.json 中添加
“main”: “main.js”,
“homepage”: “.”,

4、在package.json的script中添加脚本命令
“electron-dev”: “electron . dev”,
“electron”: “electron .”,

这里一个是使用electron运行开发时候的脚本加了 dev的参数，后面会根据传入的这个参数，在主进程中做一层判断
如果是开发环境的话，那么主进程loadURL就会加载 http://localhost:3000/地址
如果是打包之后的环境就会加载打包文件夹的地址（这里打包是放在build文件夹下，所以会加载’./build/index.html’地址）

5、与package.json同级添加main.js文件

// Modules to control application life and create native browser window
const {app,Menu, BrowserWindow,BrowserView,globalShortcut,ipcMain} = require('electron')
const path = require('path')
const url = require('url');// 获取在 package.json 中的命令脚本传入的参数，来判断是开发还是生产环境
const mode = process.argv[2];function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,//弹出的窗口有无边框,默认为有// frame:false,show:false,backgroundColor:'#586148',webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration:true,webviewTag:true},})// and load the index.html of the app.//mainWindow.loadFile('index.html')//判断是否是开发模式 if(mode === 'dev') { mainWindow.loadURL("http://localhost:3000/")} else { mainWindow.loadURL(url.format({pathname:path.join(__dirname, './build/index.html'), protocol:'file:', slashes:true }))}mainWindow.webContents.on("did-finish-load",()=>{})mainWindow.webContents.on('dom-ready',()=>{})mainWindow.once('ready-to-show',function(){mainWindow.show();})}// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
// app.whenReady().then(createWindow)
app.on('ready',()=>{createWindow();});// Quit when all windows are closed.
app.on('window-all-closed', function () {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') app.quit()
})app.on('activate', function () {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (BrowserWindow.getAllWindows().length === 0) createWindow()
})// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

6、和main.js同级添加preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const type of ['chrome', 'node', 'electron']) {replaceText(`${type}-version`, process.versions[type])}
})

7、启动electron项目
(1)npm start 启动react项目
(2)npm run electron-dev 启动electron应用
修改代码react代码会热更新
(3)如果react打包后，运行 npm run electron 这个时候electron 加载的就是 build/index.html文件

8、打包react
npm run-script build
此时npm run electron运行的就是打包后的react项目

9、打包electron
(1)安装electron-packager
npm install electron-packager --save-dev
npm install electron-packager -g

(2)在package.json的"scripts"中添加
“pack”: “electron-packager . 此项目名称 --win --out ./打包后名称 --electron-version=8.2.4(版本号)”

(3)复制main.js和package.json文件到打包react后的build文件下

(4)npm run pack打包最后的应用程序

electron 集成react相关推荐

打造跳跃音波播音乐放器(Electron+Nodejs+React)
Electron可以让我们使用html,css,javascript来搭建跨平台(Windows.macOS.Linux)的桌面应用.下面通过Electron+Nodejs+React来实现一个支持播 ...
混合开发架构|Android工程集成React Native、Flutter、ReactJs
混合开发架构|Android工程集成React Native.Flutter.ReactJs 架构设计说明创建安卓原生工程创建Flutter 集成嵌入原生工程创建React Native 解决R ...
向vue中集成electron（使用electron-builder插件直接将electron集成到自己的项目）
文章目录前言一.创建一个vue项目二.集成electron 三.运行项目前言一个完整的解决方案,用于打包和构建适用于 macOS.Windows 和 Linux 的可分发 Electron ...
electron集成arm64架构的nodejs addon插件
随着macos M1芯片的发布,当前的electron PC应用要适配arm64架构(虽然低版本electron应用也可以在arm64架构上面运行(转译)但是这严重影响电脑性能). 环境搭建 mac上 ...
Electron打包React构建桌面应用
一.Electron简介 Electron是一个能让你使用JavaScript,HTML和CSS来创建桌面应用程序的框架.这些应用程序可以打包后在 macOS.Windows 和 Linux 上直 ...
在原有Android项目中快速集成React Native
前言对于现有的大多数项目来说都不是从头构建的,而要在原有项目的基础上引入React Native则肯定和用react-native init xxx创建工程不同.因此下面就来说下具体操作.不过在真正 ...
electron sqlite3_Electron+React+Antd工程搭建
Electron桌面应用构建指南技术栈 react react-router-dom electron ant design 搭建过程添加镜像源根目录添加 .yarnrc文件 registry ...
ASP.NET Core 集成 React SPA 应用
AgileConfig的UI使用react重写快完成了.上次搞定了基于jwt的登录模式(AntDesign Pro + .NET Core 实现基于JWT的登录认证),但是还有点问题.现在使用reac ...
一招解决BS转CS模式:浏览终端开发-Electron集成打包、本地配置文件及自动更新
将普通的网页转换为桌面应用并兼容现在的H5,基本的思路都是打包封装谷歌公司的开源版Chromium 使其充当与本地应用通讯的媒介: 成本比较低的是electron CefShap(C#) 至于bl ...

electron 集成react

electron 集成react相关推荐

最新文章

热门文章