Electron + React + Antd

Electron + React + Antd

Electron 安装

1.安装命令
$ npm install electron --save-dev
2.打包插件
$ npm install electron-builder --save-dev
3.注意事项
  electron 需要翻墙下载 （失败的概率很大）

React 安装

1.npm 版本 npm@5.2.0 及以上版本安装命令
$ npx create-react-app my-app
2.npm@5.2.0 以下
$ npm install create-react-app -g
$ create-react-app my-app

Antd

1.安装命令
$ npm install antd
2.React 项目引入 （src/index.js）css文件
import 'antd/dist/antd.css'

React 打包

1. package.json  增加以下配置
    "main": "main.js",
    "homepage": ".",
    "build": {
        "extends": null
    }
2.⨯ Application entry file "build/electron.js" in the "/Users/***/earth.app/Contents/Resources/app.asar" does not exist. Seems like a wrong configuration.  stackTrace= 
	以上错误加入 "build": {
        "extends": null
    } 即可解决
3.修改完以上步骤，开始执行打包命令
$ npm run build

React路由的配置注意事项

1.注意必须为 HashRouter 相对路径，否则打包出来的文件会打不开，出现白屏
import React, { Component } from "react";
import { Route, Switch, withRouter, HashRouter } from "react-router-dom";
import {
	Login,
  Home
} from "./pages/index";
import zh_CN from "antd/es/locale-provider/zh_CN";
import { ConfigProvider } from "antd";

class Router extends Component {
	constructor(props) {
		super(props);
		this.UpDate = this.props.UpDate;
		this.state = {};
	}

	render() {
		return (
			<ConfigProvider locale={zh_CN}>
				<HashRouter basename='.'>
					<Switch>
						<Route exact path="/" component={withRouter(Home)} />
						<Route exact path="/login" component={withRouter(Login)} />
					</Switch>
				</HashRouter>
			</ConfigProvider>
		);
	}
}
export default Router;

混合打包

1.将 main.js 和 package.json 复制到 react 打包好的目录中 即 build 目录
2.开始打包
$ npm run electronbuild
3.注意 main.js 加载文件配置
 mainWindow.loadURL(path.join('file://', __dirname, './index.html'))

main.js

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url')
let mainWindow = null;

function makeSingleInstance () {
    if (process.mas) return;
    app.requestSingleInstanceLock();
    app.on('second-instance', () => {
        if (mainWindow) {
            if (mainWindow.isMinimized()) mainWindow.restore()
            mainWindow.focus()
        }
    })
}

function createWindow () {
    const windowOptions = {
        width: 1024,
        height: 768,
        frame: true,
    };
    mainWindow = new BrowserWindow(windowOptions);
    // 加载开发
    // mainWindow.loadURL("http://localhost:3000/");
    // 加载打包
    mainWindow.loadURL(path.join('file://', __dirname, './index.html'));

    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
    mainWindow.on('closed', () => {
        mainWindow = null
    })
}
makeSingleInstance();
//app主进程的事件和方法
app.on('ready', () => {
    createWindow();
});
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
});
app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});
module.exports = mainWindow;

package.json

{
  "name": "earth_roaming",
  "version": "0.1.0",
  "private": true,
  "main": "main.js",
  "homepage": ".",
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "antd": "^4.16.6",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "url": "^0.11.0",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "electron": "electron .",
    "dev": "electron . --debug  | react-scripts start",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "electronbuild": "electron-builder",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "devtron": "^1.4.0",
    "electron": "^13.1.6",
    "electron-builder": "^22.11.7"
  },
  "build": {
    "extends": null
  }
}

运行界面

运行界面

打包界面

源码百度网盘 包含node_modules

链接: https://pan.baidu.com/s/1Rlq1Hy3DVzjciMUpdfuVbg
提取码: qvkx