electron react

1、先用create-reat-app创建一个程序

在package.json中配置   "homepage": ".", 要可以从本地访问

2、npm i electron --save-dev

3、在package.json中配置入口文件，具体如下：

{

  "name": "myre",

  "version": "0.1.0",

  "private": true,

  "homepage": ".",

  "main": "main.js",

 

并修改启动命令

  "scripts": {

    "start": "react-scripts start",

    "estart": ".\node_modules\.bin\electron .",

4、主进程

const { app, BrowserWindow,ipcMain  } = require('electron')
const path = require('path')function createWindow () {
  const win = new BrowserWindow({
     800,
    height: 600,
    webPreferences: {
     // preload: path.join(__dirname, 'render.js'),
      nodeIntegration: true,
      // 官网似乎说是默认false，但是这里必须设置contextIsolation
      contextIsolation: false      //有这两个 渲染进程才能用window.require 调用nodejs里的包
    }
  })

  win.loadFile('./build/index.html')
}

ipcMain.on("sendMessage",(event,data) => {
  console.log(data);

})


app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

5、渲染进程里通信

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const { ipcRenderer  } = window.require('electron')

console.log(ipcRenderer)


function Welcome(props) {
  return (
   <h1 onClick={()=>{alert(1);ipcRenderer.send("sendMessage","this is render");}} >Hello, {props.count}</h1>
  );
}

下载地址

http://47.99.246.229/myre.7z