electron笔记：electron更新版本

一.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=null         let 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.fullscreen         if(options.width){             params.fullscreen=false             params.width=options.width         }         if(options.height){             params.fullscreen=false             params.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+"/#/"+url             view.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=null         let 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.fullscreen         if(options.width){             params.fullscreen=false             params.width=options.width         }         if(options.height){             params.fullscreen=false             params.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'+"/#/"+url             view.webContents.openDevTools();             view.loadURL(toUrl)         }     },

渲染页面

import {BrowserWindow, ipcRenderer} from 'electron'     sendMsg(channel,value){         ipcRenderer.send(channel,value); }