zoukankan      html  css  js  c++  java
  • React + electronjs 实现桌面软件开发引入 electronjs 及 node api

    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;
  • 相关阅读:
    Python面向对象5:类的常用魔术方法
    吴恩达机器学习笔记27-样本和直观理解2(Examples and Intuitions II)
    python之面向对象
    python之正则表达式
    python之模块
    python之函数
    python之基础
    python之入门
    Git+码云安装
    python,pycharm环境安装
  • 原文地址:https://www.cnblogs.com/xiaqiuchu/p/12386282.html
Copyright © 2011-2022 走看看