门户网站时代,青岛网站seo优化,网站推广具体内容简要说明,爱站网ip反域名查询接上回初始化vue3 electron项目#xff0c;创建完vue3 electron项目后#xff0c;现在要实现在渲染进程中点击按钮创建一个新的子窗口
开始
子窗口创建操作只能在主线程内完成#xff0c;而创建操作是在渲染线程触发#xff0c;因此就需要进行两者间的通讯。
1、创建子窗…接上回初始化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)
}
