【Electron】【React】在jsx文件中使用electron的remote模块

前言：

remote模块很重要呀！

首先，安装@electron/remote依赖

cnpm install @electron/remote --save-dev

在main.js中书写如下代码：

注意：必须要initialize和enable

require('@electron/remote/main').initialize()
const path = require('path')

webPreferences:{
            devTools:true, //是否开启调试
            nodeIntegration: true,  //开启主进程和渲染进程之间的通信
            enableRemoteModule:true,
            preload:path.join(__dirname,'/preload.js'),
            contextIsolation: false,
            nodeIntegrationInSubFrames: true
        }
 require("@electron/remote/main").enable(mainWin.webContents)

main.js完整代码

const { app ,BrowserWindow } = require('electron')
require('@electron/remote/main').initialize()
const isDev = require('electron-is-dev')
const path = require('path')

function createWindow(){
    let mainWin = new BrowserWindow({
        height:680,
        width:1024,
        show:false,
        autoHideMenuBar:true,
        // frame:false,
        title:'芊芊静听',
        icon:path.join(__dirname,'/earphone.png'),
        webPreferences:{
            devTools:true, //是否开启调试
            nodeIntegration: true,  //开启主进程和渲染进程之间的通信
            enableRemoteModule:true,
            preload:path.join(__dirname,'/preload.js'),
            contextIsolation: false,
            nodeIntegrationInSubFrames: true
        }
    })

    require("@electron/remote/main").enable(mainWin.webContents)
    mainWin.loadURL(isDev ? 'http://localhost:3000' : 'dummyurl')
    mainWin.on('ready-to-show',()=>{
        mainWin.show()
    })
    mainWin.on('close',()=>{
        mainWin = null
    })

}

app.on('ready', () => {
    createWindow()
})

preload.js

window.electron = require('electron')
window.remote = require('@electron/remote')
console.log('electron injection fin...')

jsx文件对remote的使用

let remote = window.remote

在开发工具中打印remote，会输出一个对象

大功告成！