商城网站验收乐山网站seo

接上回初始化vue3 electron项目，创建完vue3 electron项目后，现在要实现在渲染进程中点击按钮创建一个新的子窗口

开始

子窗口创建操作只能在主线程内完成，而创建操作是在渲染线程触发，因此就需要进行两者间的通讯。

1、创建子窗口

background.js

//引入ipcMain
import { app, protocol,nativeImage, BrowserWindow,ipcMain } from 'electron'
...
...
// 创建提醒窗口function openChildWindow(e) {var childWin = new BrowserWindow ({width: 330,height:170,title:'待办提醒',alwaysOnTop:true,x:e.screenWidth-330,y:e.screenHeight-170,autoHideMenuBar: true,webPreferences: {nodeIntegration: true,contextIsolation: false,}})if (process.env.WEBPACK_DEV_SERVER_URL) {// 开发环境跳转路由，/remind就是配置的路由地址，并携带参数childWin.loadURL(process.env.WEBPACK_DEV_SERVER_URL + `#/remind?id=${e.id}`)if (!process.env.IS_TEST) childWin.webContents.openDevTools()} else {// 打包后跳转地址 /remind就是配置的路由地址createProtocol('app')childWin.loadURL(`app://./index.html#/remind?id=${e.id}`);}childWin.on("close", function(){childWin = null;})}// ipc通讯，触发创建操作ipcMain.on('on-open-event', (e,data) => {openChildWindow(JSON.parse(data))})

2、新建preload.js

const { ipcRenderer } = require('electron');window.myApi = {openWindow: (e) => {console.log(e);ipcRenderer.send('on-open-event',JSON.stringify(e))},
}

3、在background.js的创建主窗口配置中引入preload.js文件

...
...
const win = new BrowserWindow({width: 400,height: 700,title:'待办记事本',frame: false, // 去掉窗口边框 // 取消默认的头部；自定义头部autoHideMenuBar: true, // 隐藏菜单栏autoHideMenuBar: true,icon:path.join(__dirname, '../public/logo.ico'),webPreferences: {nodeIntegration: true,contextIsolation: false,enableRemoteModule: true,preload: path.resolve(__dirname, "./preload.js")},})
...
...

4、在vue页面中调用，创建子窗口方法

// 打开子窗口
function open(e){e.screenHeight = window.screen.heighte.screenWidth = window.screen.width// e是我带过去的一些参数，不需要可以不用管，自行调整一下window.myApi.openWindow(e)
}