electron 开发时最麻烦就是electron版本和node版本的选择和正确安装
electron 用npm安装时太慢容易报错,建议用cnpm i 进行安装
注意最新版渲染进程使用node
nodeIntegration: true, // 渲染进程可用node
contextIsolation: false, // 这个值影响nodeIntegration是否生效
electron 的主进程的创建
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true, // 渲染进程可用node
contextIsolation: false, // 这个值影响nodeIntegration是否生效
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile(path.join(__dirname, 'index.html'))
// Open the DevTools.
mainWindow.webContents.openDevTools()
// 渲染进程使用remote
remote.enable(mainWindow.webContents)//3
require("./ipcMain/menu")
require("./ipcMain/rightMenu")
// 主进程发送消息
mainWindow.webContents.send("mainMag","发财发财")
}
app.on('ready', createWindow);
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!title>
<link rel="stylesheet" href="index.css" />
head>
<body>
<h1> Hello World!h1>
<p>Welcome to your Electron application.p>
<h1>Hello World!h1>
We are using Node.js <span id="node-version">span>,
Chromium <span id="chrome-version">span>,
and Electron <span id="electron-version">span>.
body>
<script>
// 引用node中的函数
require('path')
// 高版本,渲染线程打开新窗口方法,需要在主进程打开
// const {BrowserWindow} = require("@electron/remote")
// const win = new BrowserWindow({
// width:500,
// height:500,
// })
// win.loadURL("https://www.baidu.com")
const { ipcRenderer } = require("electron");
window.addEventListener('contextmenu', (e) => {
e.preventDefault()
// 渲染进程发送消息
ipcRenderer.send('show-context-menu')
})
// 渲染进程接受主进程消息
ipcRenderer.on('context-menu-command', (e, command) => {
// ...
})
ipcRenderer.on('show-context-menu-reply', (e, command) => {
console.log("开心",command)
})
ipcRenderer.on('mainMag', (e, command) => {
console.log(e)
console.log("------------")
console.log(command)
})
script>
html>