React + electronjs 实现桌面软件开发引入 electronjs 及 node api

Posted 2020-11-28 夏秋初的学习笔记

React 与 electronjs 安装及运行请百度。

electronjs中引入 React

// electronjs 目录下的 main.js，loadFile修改为 loadURL
// mainWindow.loadFile(‘index.html‘)
mainWindow.loadURL("http://localhost:3000/");

// electronjs 目录下的 preload.js 最底下追加
// load Api 需要什么 api 就引入什么api
const loadApi = [
  ‘electron‘, // 引入 electron
  ‘mysql‘, // 引入 mysql
];
loadApi.map((item)=>{
  global[item] = require(item);
});

React中调用 preload.js文件中暴露的 api

import React,{Component} from ‘react‘;
import { HashRouter as Router, Link, Route } from ‘react-router-dom‘;
import ‘./App.css‘;
import { Button } from ‘element-react‘;
const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Product = () => (
  <div>
    <h2>Product</h2>
  </div>
)
// const electron = window.electron
class App extends Component {
  Test(){
   
  }
  render(){
     const { electron } = window.electron;
    // console.log(window.electron);
    return (
      <Router>
          <div className="App">
            <Link to="/">Home</Link>
            <Link to="/About">About</Link>
            <Link to="/Product">Product</Link>
            <hr/>
            <Route path="/" exact component={Home}></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/product" component={Product}></Route>
          </div>
        </Router>
    )
  }
}

export default App;