electron+react+redux+material-ui桌面应用小结

前段时间做了一个桌面应用,用于管理项目的一个menus.json文件。

要求可新增、修改,完成导出、导入功能。由于要对本地文件进行操作,所以就选择了electron这个框架。而对于react和redux,是因为刚开始学习,用来练手的。material-ui则是因为好看

electron 的安装还是有点小麻烦的,npm install -g electron-prebuilt安装比较慢且容易失败,先npm install -g cnpm ,再cnpm install -g electron-prebuilt就容易多了。安装完之后就能先按照官网上的quick start撸个electron的hello world。

electron下分为主进程和渲染进程,要在渲染进程调用主进程下的模块,有两种方法:
一种是通过使用remote;另一种则是ipc,就是在渲染进程发送信号给主进程,主进程接收到做出回应,或主进程发出,渲染进程回应。我用的是第一种,有尝试第二种,不过失败了…囧

还有用到的就是打包了。打包的electron-packager也是要全局安装的。打包的命令大概就是electron-packager ./ –platform=win32 –arch=all –out=../APP –version=1.0.0 –overwrite=true –prune=true 打包的时候经常会断线导致失败,所以可以加多这个ELECTRON_MIRROR=http://npm.taobao.org/mirrors/electron/ 但是这个在win下会报不是内部命令的,所以要先设置。

其他的electron还有很多好用的API,可以把桌面应用做的更炫,只是我水平太菜,还有好多东西还能去做好。如:把默认边框去掉,自己做边框;或者做个通知功能等等。

redux学习过程也是挺吃力的。redux的API不多,就是一些思想比较难理解。网上有很多优秀的教程和讲解,多看和多尝试就能慢慢理解,就算不理解,也能先依葫芦画瓢。平常都是使用jq的我,一开始使用真是捉急,总想去操作dom节点,慢慢的就有点理解,这个是整个视图去render的。使用redux对于这个小的项目感觉还是挺鸡肋的,平常的一个简单的setState,要经过action去触发reducer return一个新的state,再去状态树上取下来渲染。不过这样一来也是挺清晰的。还有就是尽量保持

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 Electron React 项目实例: 1. 创建一个新的项目文件夹并进入该文件夹: ``` mkdir electron-react-app cd electron-react-app ``` 2. 初始化 npm 项目: ``` npm init -y ``` 3. 安装必要的依赖项: ``` npm install --save electron react react-dom npm install --save-dev electron-builder babel-cli babel-preset-env babel-preset-react webpack webpack-cli webpack-dev-server html-webpack-plugin ``` 4. 创建一个 webpack 配置文件 webpack.config.js: ``` const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, '/dist'), filename: 'index_bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'] } } } ] }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html' }) ] }; ``` 5. 创建一个 .babelrc 配置文件: ``` { "presets": ["env", "react"] } ``` 6. 创建一个入口文件 src/index.js: ``` import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render(<h1>Hello, Electron and React!</h1>, document.getElementById('root')); ``` 7. 创建一个 HTML 文件 src/index.html: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Electron React App</title> </head> <body> <div id="root"></div> <script src="index_bundle.js"></script> </body> </html> ``` 8. 创建一个 main.js 文件作为 Electron 主进程文件: ``` const { app, BrowserWindow } = require('electron'); const path = require('path'); const url = require('url'); let mainWindow; function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600 }); mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'dist', 'index.html'), protocol: 'file:', slashes: true })); mainWindow.on('closed', function () { mainWindow = null }); } app.on('ready', createWindow); app.on('window-all-closed', function () { if (process.platform !== 'darwin') { app.quit() } }); app.on('activate', function () { if (mainWindow === null) { createWindow() } }); ``` 9. 在 package.json 中添加以下脚本: ``` "scripts": { "start": "webpack-dev-server --mode development", "build": "webpack --mode production && electron-builder", "electron": "electron ." } ``` 10. 启动项目: ``` npm start ``` 这将启动 Webpack Dev Server 并在浏览器中打开应用程序。在开发期间,每当更改 React 代码时,Webpack Dev Server 会自动重新编译代码并重新加载应用程序。 11. 打包应用程序: ``` npm run build ``` 这将使用 Webpack 和 electron-builder 打包应用程序。打包后的应用程序将在 dist 目录中生成。 12. 运行应用程序: ``` npm run electron ``` 这将启动 Electron 并加载打包后的应用程序。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值