一.electron版本由13.6.9更新至22.3.27
之前因为remote的原因，electron版本停留在13.6.9，14.x后需要单独处理remote，此次需要Chrome 95以上部分功能，所以需要升级版本到16.x以上，因为本机nodejs版本为16.9.1，不想将nodejs升级到17以上，所以将版本升级到22.x
二.升级变更
1.版本变更
13.6.9改为22.3.27，安装"@electron/remote": "^2.1.2"，还可以将electron-builder版本升级至"electron-builder": "^23.6.0",
2.electron/remote相关
首先需要主程序index.js中在创建窗体new BrowserWindow()后，添加如下
require('@electron/remote/main').initialize()require('@electron/remote/main').enable(mainWindow.webContents)变更前获取窗体信息：
const {BrowserWindow,remote,ipcRenderer} = require('electron')this.win=remote.getCurrentWindow()变更后
const {screen,getCurrentWindow } = require('@electron/remote')
let win=getCurrentWindow()变更前获取屏幕尺寸
const { remote } = require('electron')
const screen = remote.screen;
this.width= screen.getPrimaryDisplay().workAreaSize.width;
this.height= screen.getPrimaryDisplay().workAreaSize.height;变更后
const {screen,getCurrentWindow } = require('@electron/remote')
this.width= screen.getPrimaryDisplay().workAreaSize.width
this.height= screen.getPrimaryDisplay().workAreaSize.height变更前获取app信息
const { app } = require("electron").remote
//使用
let homeDir = path.dirname(app.getPath('exe'))变更后
const { app } = require('@electron/remote')
let homeDir = path.dirname(app.getPath('exe'))3.打开子窗体
升级前打开子窗体
const electron = require('electron')
createBrowserWindow(options){const BrowserWindow = electron.remote.BrowserWindow;let remoteWin=nulllet params={webPreferences: {webSecurity: false,nodeIntegration: true,webviewTag: true,contextIsolation: false,enableRemoteModule:true},useContentSize: true,movable:true,//是否可移动transparent: true,resizable: true,frame:true,//是否显示边缘框skipTaskbar: false,//展示任务栏titleBarStyle: "hidden",fullscreen:false,//是否全屏显示backgroundColor: '#fff',center:true,alwaysOnTop:true,//永远在别的应用上层}params.fullscreen=options.fullscreenif(options.width){params.fullscreen=falseparams.width=options.width}if(options.height){params.fullscreen=falseparams.height=options.height}if(options.x){params.x=options.x}if(options.y){params.width=options.y}if(options.backgroundColor){params.backgroundColor=options.backgroundColor}params.name=new Date().getTime()remoteWin=new BrowserWindow(params)return remoteWin},openUrl(view,url){if(process.env.NODE_ENV === 'production'){view.loadFile('dist/electron/index.html',{hash:url})}else{let toUrl=window.location.protocol+"//"+window.location.host+"/#/"+urlview.webContents.openDevTools();view.loadURL(toUrl)}},//使用
this.fileView=browserWindowUtil.createBrowserWindow()
browserWindowUtil.openUrl(this.fileView,'fileManage/fileApply?type=dir')升级后
需要使用ipcMain，ipcRenderer通信在主程序中创建子窗体
主程序
import {app, BrowserWindow, ipcMain} from 'electron'
ipcMain.on('childWin',(e,message)=>{let view=browserWindowUtil.createBrowserWindow(message)browserWindowUtil.openUrl(view,message.url)
})//工具方法
import {BrowserWindow, ipcRenderer} from 'electron'createBrowserWindow(options){let remoteWin=nulllet params={webPreferences: {webSecurity: false,nodeIntegration: true,webviewTag: true,contextIsolation: false,enableRemoteModule:true},useContentSize: true,movable:true,//是否可移动transparent: true,resizable: true,frame:true,//是否显示边缘框skipTaskbar: false,//展示任务栏titleBarStyle: "hidden",fullscreen:false,//是否全屏显示backgroundColor: '#fff',center:true,alwaysOnTop:true,//永远在别的应用上层}params.fullscreen=options.fullscreenif(options.width){params.fullscreen=falseparams.width=options.width}if(options.height){params.fullscreen=falseparams.height=options.height}if(options.x){params.x=options.x}if(options.y){params.width=options.y}if(options.backgroundColor){params.backgroundColor=options.backgroundColor}params.name=new Date().getTime()remoteWin=new BrowserWindow(params)require('@electron/remote/main').enable(remoteWin.webContents)return remoteWin},openUrl(view,url){if(process.env.NODE_ENV === 'production'){view.loadFile('dist/electron/index.html',{hash:url})}else{//此处升级后不能识别上述window.location等let toUrl='http://localhost:9080'+"/#/"+urlview.webContents.openDevTools();view.loadURL(toUrl)}},渲染页面
import {BrowserWindow, ipcRenderer} from 'electron'
sendMsg(channel,value){ipcRenderer.send(channel,value);
}
)
