当前位置: 首页 > Web前端 > vue.js

electron-vue跨平台桌面应用开发实战教程(二)-主进程常用配置

时间:2023-03-31 15:12:53 vue.js

上一篇我们搭建了一个electron和vue集成的项目。本文主要针对electron的background.js,主要是介绍了流程,同时也介绍了渲染流程。Electron主要分为主进程(background.js)、渲染进程(即Vue开发的页面)和GPU进程等,不过我们主要用到主进程和渲染进程,其他进程就不研究了暂时深入。主进程:一个应用程序中只有一个主进程所有的系统事件,比如窗口的创建,都必须在主进程中进行渲染进程:每创建一个网页,都会创建一个渲染进程每个网页都在自己的运行渲染进程每个渲染进程都是独立的,它只关心其运行的页面主进程的主要功能:创建渲染进程来管理应用程序的生命周期并与底层系统进行交互。这里主要说明一下在主进程中可以设置什么。常用配置配置。1.设置渲染进程的大小和外观win=newBrowserWindow({width:1200,//设置窗口的宽度height:620,//设置窗口的高度webPreferences:{webSecurity:false,//是否禁用跨浏览器域安全特性nodeIntegration:true//是否全面支持node}})这里只设置了几个基本属性,更多属性请参考:https://www.w3cschool.cn/elec...2.设置菜单函数createMenu(){//darwin表示macOS,针对macOS的设置if(process.platform==='darwin'){consttemplate=[{label:'AppDemo',submenu:[{role:'about'},{role:'quit'}]}]constmenu=Menu.buildFromTemplate(template)Menu.setApplicationMenu(menu)}else{//windows和linux系统Menu.setApplicationMenu(null)}}注意这里,MacOS和windows以及Linux的处理是不同的3.当应用程序启动时(初始化完成),要做一些事情app.on('ready',async()=>{if(isDevelopment&&!process.env.IS_TEST){if(isDevelopment&&!process.env.IS_TEST){//安装VueDevtoolstry{awaitinstallVueDevtools()}catch(e){console.error('VueDevtools安装失败:',e.toString())}}}globalShortcut.register('CommandOrControl+Shift+i',function(){win.webContents.openDevTools()})createWindow()})执行完app模块的ready方法后,就可以创建渲染进程了。该方法如果是开发环境默认自动安装VueDevTools,方便开发者调试。同时也全局注册了使用Ctrl+Shift+i调出VueDevTool。设置好这些插件后,创建一个渲染进程。一些应用程序的初始化工作通常会在这里完成,例如:提前加载一些数据,等待渲染进程渲染页面并直接调用,加快应用程序加载速度等。4.当所有窗口都完成时要做的事情closedapp.on('window-all-closed',()=>{//在macOS上,应用程序及其菜单栏通常保持活动状态//直到用户使用Cmd+Q显式退出if(process.platform!=='darwin'){app.quit()}})当应用程序的所有窗口关闭时调用此方法。在这个方法中可以添加和释放资源,也可以删除一些临时文件5.与渲染进程通信官方有很多通信方式。这里介绍最常用的ipcRenderer(渲染进程使用的对象)和ipcMain(主进程使用的对象)。例如,渲染进程要求主进程关闭当前窗口。渲染过程const{ipcRenderer}=require('electron')ipcRenderer.send('close');主进程import{ipcMain}from'electron'ipcMain.on('close',e=>win.close());本文先介绍常用配置,在实战项目中使用时,高级用法,会在实战项目中进行讲解。更多内容请关注公众号