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