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=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);
}