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

参考:https://www.it1352.com/2061659.html

electronjs中引入 React,以及暴露js的文件,main.js

复制代码
...
function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      // 引入暴露文件
      preload: path.join(__dirname, "preload.js")
    }
  })
  // win.loadFile('src/index.html')
  win.loadURL('http://localhost:5000');
  // 控制台
  win.webContents.openDevTools() 
}
...
复制代码
preload.js
复制代码
// electronjs 目录下的 preload.js 最底下追加
// load Api 需要什么 api 就引入什么api
const loadApi = [
    'electron', // 引入 electron
    'fs',
];
loadApi.map((item) => {
    global[item] = require(item);
});
复制代码

React中调用 preload.js(无需引入文件,直接在window对象获取)文件中暴露的 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;
复制代码

 

posted @   夏秋初  阅读(1659)  评论(0编辑  收藏  举报
编辑推荐:
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
阅读排行:
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!
点击右上角即可分享
微信分享提示