Electron 介绍
Electron是一个能够使用HTML、CSS和JavaScript构建跨平台桌面应用的开源框架。它是由GitHub开发并维护的，最初是为了构建GitHub的桌面客户端而创建的。
Electron基于Node.js和Chromium项目，通过将这两个技术结合起来，它能够在桌面环境中运行Web技术。而且，它提供了丰富的API和工具，使开发者能够轻松地创建跨平台的桌面应用。
使用Electron，开发者可以使用熟悉的Web技术进行应用开发，无需学习新的编程语言或工具。应用程序可以在Windows、Mac和Linux等多个操作系统上运行，而且具有与原生应用相似的外观和性能。
Electron的应用程序由两部分组成：主进程和渲染进程。主进程是一个Node.js进程，负责管理应用的生命周期和与操作系统的交互，而渲染进程是一个Chromium渲染进程，负责显示应用的用户界面。
除了基本的UI显示功能，Electron还提供了一系列强大的API，用于实现文件系统访问、网络通信、系统通知、菜单、快捷键等功能。开发者还可以使用Electron的插件机制来扩展应用的功能。
总的来说，Electron是一个强大且易于使用的框架，能够让开发者用Web技术构建跨平台的桌面应用。它被广泛应用于各种应用领域，如代码编辑器、图形设计工具、聊天应用、音乐播放器等。
remote 模块介绍
Electron的remote模块是Electron提供的一个功能强大且方便的API，用于在主进程和渲染进程之间进行通信和调用。
在Electron中，主进程和渲染进程是分离的，它们运行在不同的上下文中。主进程负责管理应用的生命周期和与操作系统的交互，而渲染进程则负责显示应用的用户界面。
remote模块允许在渲染进程中访问主进程中的对象和方法。在渲染进程中，可以像访问本地对象一样直接访问主进程中的对象，而无需通过IPC（进程间通信）进行复杂的消息传递。
通过remote模块，开发者可以使用一些预定义的模块，如BrowserWindow、app、Menu等，直接在渲染进程中调用它们的方法。
需要注意的是，使用remote模块访问主进程中的对象会涉及到一些安全性和性能方面的考虑。因此，在使用remote模块时需要谨慎处理，避免出现潜在的安全漏洞或性能问题。
总的来说，Electron的remote模块提供了一个简单而强大的方式，在主进程和渲染进程之间进行通信和调用。它能够帮助开发者更方便地实现不同进程之间的交互，提高应用的开发效率和用户体验。
Electron 14 之前版本使用 remote 模块
main.js
// 导入 app, BrowserWindow 模块
const {
app, BrowserWindow, ipcMain } = require('electron')
app.on('ready', () => {
let mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
mainWindow.loadFile('index.html')
mainWindow.webContents.openDevTools()
ipcMain.on('message', (event, arg) => {
console.log('arg:' + arg)
event.reply('reply', 'hello from main process')
})
})
renderer.js
/**
* This file is loaded via the <script> tag in the index.html file and will
* be executed in the renderer process for that window. No Node.js APIs are
* available in this process because `nodeIntegration` is turned off and
* `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
* to expose Node.js functionality from the main process.
*/
// 引入模块
const {
ipcRenderer} = require('electron');
const {
BrowserWindow } = require('electron').remote;
window.addEventListener('DOMContentLoaded', () => {
document.getElementById('node-version').innerHTML = process.versions.node
document.getElementById('send').addEventListener('click', () => {
ipcRenderer.send('message', 'hello from renderer')
let win = new BrowserWindow({
width: 800, height: 600})
win.loadURL('https://baidu.com')
})
ipcRenderer.on('reply', (event, arg) => {
document.getElementById('message').innerHTML = arg
})
})
Electron 14 之后版本使用 remote 模块
因 remote 模块移除，所以需额外安装该模块。
进入项目目录，安装 remote 模块
npm install --save @electron/remote
main.js
// 导入 app, BrowserWindow 模块
const {
app, BrowserWindow, ipcMain } = require('electron')
// 第一步：引入remote
const remote = require('@electron/remote/main');
// 第二步： 初始化remote
remote.initialize();
app.on('ready', () => {
let mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false
}
})
mainWindow.loadFile('index.html')
mainWindow.webContents.openDevTools()
ipcMain.on('message', (event, arg) => {
console.log('arg:' + arg)
event.reply('reply', 'hello from main process')
})
// 第三步： 开启remote服务
remote.enable(mainWindow.webContents);
renderer.js
/**
* This file is loaded via the <script> tag in the index.html file and will
* be executed in the renderer process for that window. No Node.js APIs are
* available in this process because `nodeIntegration` is turned off and
* `contextIsolation` is turned on. Use the contextBridge API in `preload.js`
* to expose Node.js functionality from the main process.
*/
const {
ipcRenderer} = require('electron')
// 引入remote远程操作窗口，新版本需要下载@electron/remote
const {
BrowserWindow} = require('@electron/remote');
window.addEventListener('DOMContentLoaded', () => {
document.getElementById('node-version').innerHTML = process.versions.node
document.getElementById('send').addEventListener('click', () => {
ipcRenderer.send('message', 'hello from renderer')
let win = new BrowserWindow({
width: 800, height: 600})
win.loadURL('https://baidu.com')
})
ipcRenderer.on('reply', (event, arg) => {
document.getElementById('message').innerHTML = arg
})
})