码迷,mamicode.com
首页 > Windows程序 > 详细

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

时间:2020-02-29 22:20:13      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:col   bsp   react   link   reload   out   ext   exp   path   

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;

 

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

标签:col   bsp   react   link   reload   out   ext   exp   path   

原文地址:https://www.cnblogs.com/xiaqiuchu/p/12386282.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!