electron+react
React electron
2023-09-14 08:58:45 时间
yarn create react-app electron-react
cd electron-react
yarn run eject // 修改react-app打包的路径 / -> ./
vi main.js
main.js
const {
app,
BrowserWindow,
ipcMain
} = require('electron')
const path = require('path')
const url = require('url')
//保留窗口对象的全局引用,如果不这样做,窗口将会
//当JavaScript对象被垃圾收集时自动关闭。
let mainWindow = null;
function createWindow() {
//创建浏览器窗口。f12 查看所有的参数
mainWindow = new BrowserWindow({
width: 800,
height: 600,
// backgroundColor: '#f48', // 优雅地显示窗口
// frame: false
});
/**
* ! 优雅地显示窗口
*/
mainWindow.once('ready-to-show', () => {
win.show()
})
/**
* * 加载本地HTML文件
*/
mainWindow.loadURL('http://localhost:3000')
// mainWindow.loadURL(url.format({
// pathname: path.join(__dirname, 'build', 'index.html'),
// protocol: 'file:',
// autoHideMenuBar: true,
// slashes: true
// }))
/**
* * 打开DevTools
*/
mainWindow.webContents.openDevTools()
/**
* * 关闭窗口时发出。
*/
mainWindow.on('closed', function () {
//解引用窗口对象,通常你会存储窗口
//如果您的应用程序支持多窗口,则在数组中,现在是时候了
//当你应该删除相应的元素。
mainWindow = null
});
// menu
// require('./menu.js');
}
// Electron完成后将调用此方法
// 初始化并准备创建浏览器窗口。
// 一些API只能在发生此事件后才能使用。
app.on('ready', createWindow)
//关闭所有窗口时退出。
app.on('window-all-closed', function () {
//在OS X上,应用程序及其菜单栏很常见
//保持活动状态,直到用户使用Cmd + Q显式退出
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', function () {
//在OS X上,通常会在应用程序中重新创建一个窗口
//点击了dock图标,并且没有其他窗口打开。
if (mainWindow === null) {
createWindow()
}
})
package.json
{
"main": "main.js",
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"e-start": "electron .",
"e-build": "npm run build && electron-builder --win --x64",
}
执行 npm run dev
相关文章
- [React Typescript 2022] Use TypeScript to Type a React Class Component
- [React] Use react styled system with styled components
- [React Testing] Test your Custom Hook Module with react-hooks-testing-library
- [React Intl] Format Numbers with Separators and Currency Symbols using react-intl FormattedNumber
- [React Intl] Render Content with Markup Using react-intl FormattedHTMLMessage
- [React Intl] Install and Configure the Entry Point of react-intl
- [React Testing] Conditional className with Shallow Rendering
- [React] Use react styled system with styled components
- [React Testing] Test your Custom Hook Module with react-hooks-testing-library
- [React Testing] Mock react-transition-group in React Component Tests with jest.mock
- [React] Prevent Unnecessary Rerenders of Compound Components using React Context
- [React] Use a Render Porp
- [React Intl] Render Content Based on a Number using react-intl FormattedMessage (plural)
- [React Intl] Format a Date Relative to the Current Date Using react-intl FormattedRelative
- [React Intl] Install and Configure the Entry Point of react-intl
- [React] Setup 'beforeunload' listener
- [Mobi] 移动端应用技术选型的思考, Native, Flutter, Quasar, React Native
- react面试题-setState可能是异步更新(是同步还是异步)?
- React的source code init时会自动检测Chrome dev tool的react extension装了没
- atitit.React 优缺点 相比angular react是最靠谱的web ui组件化方案了
- react解析html标签组成的字符串
- React(二)react脚手架的搭建
- React(一)react概述、组件、事件
- react源码分析:深度理解React.Context