经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » 程序设计 » 编程经验 » 查看文章
基于electron25+vite4创建多窗口|vue3+electron25新开模态窗体
来源：cnblogs　　作者：xiaoyan2017　　时间：2023/5/30 10:22:09　　对本文有异议

在写这篇文章的时候，查看了下electron最新稳定版本由几天前24.4.0升级到了25了，不得不说electron团队迭代速度之快！

前几天有分享一篇electron24整合vite4全家桶技术构建桌面端vue3应用示例程序。

https://www.cnblogs.com/xiaoyan2017/p/17436076.html

这次继续接着上次项目，主要介绍electron25结合vue3技术实现创建多开窗口及窗口间主/渲染进程通信知识。

随着electron快速更新，结合vite的高效构建运行速度，现在新开一个独立窗口，打开速度极快。

electron官网主进程模块BrowserWindow用于创建一个新窗口的方法，提供了非常丰富的API操作用法。

https://www.electronjs.org/docs/latest/api/browser-window

  1. // In the main process.
  2. const { BrowserWindow } = require('electron')
  4. const win = new BrowserWindow({ width: 800, height: 600 })
  6. // Load a remote URL
  7. win.loadURL('https://github.com')
  9. // Or load a local HTML file
  10. win.loadFile('index.html')

如果每次都new一个BrowserWindow窗口，显得有些笨拙且复杂。今天要分享的是封装BrowserWindow方法，只需传入配置参数，即可快速生成一个独立窗口。

  1. createWin({
  2.     title: '关于About.vue',
  3.     route: '/about',
  4.     width: 600,
  5.     height: 400,
  6.     background: '#fafffa',
  7.     resize: true
  8. })

新建一个windows/index.js文件。

  1. /**
  2.  * 封装多窗口管理器
  3.  * @author YXY
  4.  */
  6. const { app, BrowserWindow, ipcMain } = require('electron')
  7. const { join } = require('path')
  9. process.env.ROOT = join(__dirname, '../../')
  11. const isDevelopment = process.env.NODE_ENV == 'development'
  12. // const winURL = isDevelopment ? 'http://localhost:3000/' : join(__dirname, 'dist/index.html')
  13. const winURL = isDevelopment ? process.env.VITE_DEV_SERVER_URL : join(process.env.ROOT, 'dist/index.html')
  15. // 配置参数
  16. const defaultConfig = {
  17.     id: null,               // 窗口唯一id
  18.     background: '#fff',     // 背景色
  19.     route: '',              // 路由地址url
  20.     title: '',              // 标题
  21.     data: null,             // 传入数据参数
  22.     width: '',              // 窗口宽度
  23.     height: '',             // 窗口高度
  24.     minWidth: '',           // 窗口最小宽度
  25.     minHeight: '',          // 窗口最小高度
  26.     x: '',                  // 窗口相对于屏幕左侧坐标
  27.     y: '',                  // 窗口相对于屏幕顶端坐标
  28.     resize: true,           // 是否支持缩放
  29.     maximize: false,        // 最大化窗口
  30.     isMultiWin: false,      // 是否支持多开窗口
  31.     isMainWin: false,       // 是否主窗口
  32.     parent: '',             // 父窗口（需传入父窗口id）
  33.     modal: false,           // 模态窗口（模态窗口是浮于父窗口上，禁用父窗口）
  34.     alwaysOnTop: false      // 置顶窗口
  35. }
  37. class MultiWindows {
  38.     constructor() {
  39.         // 主窗口
  40.         this.mainWin = null
  41.         // 窗口组
  42.         this.winLs = {}
  44.         // ...
  45.     }
  47.     winOpts() {
  48.         return {
  49.             // 窗口图标
  50.             icon: join(process.env.ROOT, 'resource/shortcut.ico'),
  51.             backgroundColor: '#fff',
  52.             autoHideMenuBar: true,
  53.             titleBarStyle: 'hidden',
  54.             width: 1000,
  55.             height: 640,
  56.             resizable: true,
  57.             minimizable: true,
  58.             maximizable: true,
  59.             frame: false,
  60.             show: false,
  61.             webPreferences: {
  62.                 contextIsolation: true, // 启用上下文隔离(为了安全性)（默认true）
  63.                 // nodeIntegration: false, // 启用Node集成（默认false）
  64.                 preload: join(process.env.ROOT, 'resource/preload.js'),
  65.                 // devTools: true,
  66.                 // webSecurity: false
  67.             }
  68.         }
  69.     }
  71.     // 创建新窗口
  72.     createWin(options) {
  73.         const args = Object.assign({}, defaultConfig, options)
  74.         console.log(args)
  76.         // 判断窗口是否存在
  77.         for(let i in this.winLs) {
  78.             if(this.getWin(i) && this.winLs[i].route === args.route && !this.winLs[i].isMultiWin) {
  79.                 this.getWin(i).focus()
  80.                 return
  81.             }
  82.         }
  84.         let opt = this.winOpts()
  85.         if(args.parent) {
  86.             opt.parent = this.getWin(args.parent)
  87.         }
  89.         if(typeof args.modal === 'boolean') opt.modal = args.modal
  90.         if(typeof args.resize === 'boolean') opt.resizable = args.resize
  91.         if(typeof args.alwaysOnTop === 'boolean') opt.alwaysOnTop = args.alwaysOnTop
  92.         if(args.background) opt.backgroundColor = args.background
  93.         if(args.width) opt.width = args.width
  94.         if(args.height) opt.height = args.height
  95.         if(args.minWidth) opt.minWidth = args.minWidth
  96.         if(args.minHeight) opt.minHeight = args.minHeight
  97.         if(args.x) opt.x = args.x
  98.         if(args.y) opt.y = args.y
  100.         console.log(opt)
  102.         // 创建窗口对象
  103.         let win = new BrowserWindow(opt)
  104.         // 是否最大化
  105.         if(args.maximize && args.resize) {
  106.             win.maximize()
  107.         }
  108.         this.winLs[win.id] = {
  109.             route: args.route, isMultiWin: args.isMultiWin
  110.         }
  111.         args.id = win.id
  114.         // 加载页面
  115.         let $url
  116.         if(!args.route) {
  117.             if(process.env.VITE_DEV_SERVER_URL) {
  118.                 // 打开开发者调试工具
  119.                 // win.webContents.openDevTools()
  120.     
  121.                 $url = process.env.VITE_DEV_SERVER_URL
  122.             }else {
  123.                 $url = winURL
  124.             }
  125.         }else {
  126.             $url = `${winURL}#${args.route}`
  127.         }
  128.         win.loadURL($url)
  129.         /*if(process.env.VITE_DEV_SERVER_URL) {
  130.             win.loadURL($url)
  131.         }else {
  132.             win.loadFile($url)
  133.         }*/
  134.         win.webContents.openDevTools()
  136.         win.once('ready-to-show', () => {
  137.             win.show()
  138.         })
  140.         win.on('close', () => win.setOpacity(0))
  142.         // 初始化渲染进程
  143.         win.webContents.on('did-finish-load', () => {
  144.             // win.webContents.send('win-loaded', '加载完成~！')
  145.             win.webContents.send('win-loaded', args)
  146.         })
  147.     }
  149.     // 获取窗口
  150.     getWin(id) {
  151.         return BrowserWindow.fromId(Number(id))
  152.     }
  154.     // 获取全部窗口
  155.     getAllWin() {
  156.         return BrowserWindow.getAllWindows()
  157.     }
  159.     // 关闭全部窗口
  160.     closeAllWin() {
  161.         try {
  162.             for(let i in this.winLs) {
  163.                 if(this.getWin(i)) {
  164.                     this.getWin(i).close()
  165.                 }else {
  166.                     app.quit()
  167.                 }
  168.             }
  169.         } catch (error) {
  170.             console.log(error)
  171.         }
  172.     }
  174.     // 开启主进程监听
  175.     ipcMainListen() {
  176.         // 设置标题
  177.         ipcMain.on('set-title', (e, data) => {
  178.             const webContents = e.sender
  179.             const wins = BrowserWindow.fromWebContents(webContents)
  180.             wins.setTitle(data)
  182.             // const wins = BrowserWindow.getFocusedWindow()
  183.             // wins.setTitle('啦啦啦')
  184.         })
  185.         // 是否最大化(方法一)
  186.         /*ipcMain.on('isMaximized', e => {
  187.             const win = BrowserWindow.getFocusedWindow()
  188.             e.sender.send('mainReplay', win.isMaximized())
  189.         })*/
  190.         // 是否最大化(方法二)
  191.         ipcMain.handle('isMaximized', (e) => {
  192.             const win = BrowserWindow.getFocusedWindow()
  193.             return win.isMaximized()
  194.         })
  196.         ipcMain.on('min', e => {
  197.             const win = BrowserWindow.getFocusedWindow()
  198.             win.minimize()
  199.         })
  200.         ipcMain.handle('max2min', e => {
  201.             const win = BrowserWindow.getFocusedWindow()
  202.             if(win.isMaximized()) {
  203.                 win.unmaximize()
  204.                 return false
  205.             }else {
  206.                 win.maximize()
  207.                 return true
  208.             }
  209.         })
  210.         ipcMain.on('close', (e, data) => {
  211.             // const wins = BrowserWindow.getFocusedWindow()
  212.             // wins.close()
  213.             this.closeAllWin()
  214.         })
  216.         // ...
  217.     }
  218. }
  220. module.exports = MultiWindows

在主进程入口background.js文件引入封装窗口。

  1. const { app, BrowserWindow, ipcMain } = require('electron')
  2. const { join } = require('path')
  4. const MultiWindows = require('./src/windows')
  6. // 屏蔽安全警告
  7. // ectron Security Warning (Insecure Content-Security-Policy)
  8. process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
  10. const createWindow = () => {
  11.     let window = new MultiWindows()
  13.     window.createWin({isMainWin: true})
  14.     window.ipcMainListen()
  15. }
  17. app.whenReady().then(() => {
  18.     createWindow()
  19.     app.on('activate', () => {
  20.         if (BrowserWindow.getAllWindows().length === 0) createWindow()
  21.     })
  22. })
  24. app.on('window-all-closed', () => {
  25.     if (process.platform !== 'darwin') app.quit()
  26. })

在主进程中做一个ipcMain监听，用来创建独立窗口。

  1. ipcMain.on('win-create', (event, args) => this.createWin(args))

新建windows/action.js文件，处理渲染器进程到主进程的异步通信，可以发送同步或异步的消息到主进程，也可以接收主进程发送的消息。

  1. /**
  2.  * 创建新窗口
  3.  * @param {object} args | {width: 640, height: 480, route: '/home'}
  4.  */
  5. export function createWin(args) {
  6.     window.electronAPI.send('win-create', args)
  7. }
  9. /**
  10.  * 设置窗口
  11.  * @param {string} type | 'show'/'hide'/'close'/'min'/'max'/'max2min'/'restore'/'reload'
  12.  * @param {number} id
  13.  */
  14. export function setWin(type, id) {
  15.     window.electronAPI.send('win-' + type, id)
  16. }
  18. /**
  19.  * 创建登录窗口
  20.  */
  21. export function loginWin() {
  22.     createWin({
  23.         isMainWin: true,
  24.         title: '登录',
  25.         route: '/login',
  26.         width: 550,
  27.         height: 320,
  28.         resize: false,
  29.         alwaysOnTop: true,
  30.     })
  31. }

在vue页面中调用上面封装的方法。

  1. <template>
  2.     <div class="home">
  3.         ...
  5.         <Button type="success" @click="openWin">打开Manage窗口（设置parent）</Button>
  6.         <Button type="success" @click="openWin1">打开Me窗口（设置resizable/isMultiWin）</Button>
  7.         <Button type="success" @click="openWin2">打开User窗口</Button>
  8.     </div>
  9. </template>
  10.  
  11. <script>
  12. import { winCfg, createWin } from '@/windows/action'
  14. export default {
  15.     name: 'Home',
  16.     setup() {
  17.         const openWin = () => {
  18.             MessageBox.confirm('提示', '确定打开Manage页面吗？ 【设置parent属性】', {
  19.                 callback: action => {
  20.                     if(action == 'confirm') {
  21.                         createWin({
  22.                             title: 'Manage.vue',
  23.                             route: '/manage',
  24.                             width: 600,
  25.                             height: 400,
  26.                             background: '#09f',
  27.                             parent: winCfg.window.id,
  28.                             // modal: true
  29.                         })
  30.                     }else if(action == 'cancel') {
  31.                         Message.info('您已取消！')
  32.                     }
  33.                 }
  34.             })
  35.         }
  37.         const openWin1 = () => {
  38.             // 左上角
  39.             // let posX = 0
  40.             // let posY = 0
  41.  
  42.             // 右下角
  43.             let posX = window.screen.availWidth - 850
  44.             let posY = window.screen.availHeight - 600
  45.             MessageBox.confirm('提示', '确定打开Me页面吗？', {
  46.                 callback: action => {
  47.                     if(action == 'confirm') {
  48.                         createWin({
  49.                             title: 'Me.vue',
  50.                             route: '/me?name=Andy',
  51.                             width: 850,
  52.                             height: 600,
  53.                             x: posX,
  54.                             y: posY,
  55.                             background: 'yellow',
  56.                             resize: false,
  57.                             isMultiWin: true,
  58.                             maximize: true
  59.                         })
  60.                     }else if(action == 'cancel') {
  61.                         Message.info('您已取消！')
  62.                     }
  63.                 }
  64.             })
  65.         }
  67.         const openWin2 = () => {
  68.             MessageBox.confirm('提示', '确定打开User页面吗？', {
  69.                 callback: action => {
  70.                     if(action == 'confirm') {
  71.                         createWin({
  72.                             title: 'User.vue',
  73.                             route: '/user',
  74.                             width: 700,
  75.                             height: 550,
  76.                             minWidth: 300,
  77.                             minHeight: 300,
  78.                             data: {
  79.                                 name: 'Andy',
  80.                                 age: 20
  81.                             },
  82.                             background: 'green',
  83.                             isMultiWin: true
  84.                         })
  85.                     }else if(action == 'cancel') {
  86.                         Message.info('您已取消！')
  87.                     }
  88.                 }
  89.             })
  90.         }
  92.         // ...
  93.  
  94.         return {
  95.             openWin,
  96.             openWin1,
  97.             openWin2,
  99.             // ...
  100.         }
  101.     }
  102. }
  103. </script>

设置 frame: false 创建无边框窗口。

设置 -webkit-app-region: drag 来实现自定义拖拽区域。设置后的按钮操作无法响应其它事件，只需设置 -webkit-app-region: no-drag 即可实现响应事件。

electron+vite提供的一些环境变量。

  1. process.env.NODE_ENV
  2. process.env.VITE_DEV_SERVER_URL

在开发环境，加载vite url，生产环境，则加载vite build出来的html。

Ok，综上就是electron25+vite4结合构建跨端应用的一些分享，希望对大家有所帮助哈~~

 

原文链接：https://www.cnblogs.com/xiaoyan2017/p/17442502.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

编程经验热门文章

  • Prometheus监控之SNMP Exporter介绍和数据展现
  • Intel 82599网卡异常挂死原因
  • 腾讯防水墙的分析识别与破解
  • 桌面应用自动化WinAppDriver入门
  • 文档在线预览（三）使用js前端实现word、excel、pdf、ppt 在线预览
  • 「教程」如何下载AcFun网站上的视频、A站视频下载工具
  • 基于Hi3559AV100的SVP(NNIE)开发整体流程
  • GBDT(梯度提升树)scikit-klearn中的参数说明及简汇
  • antd之RangePicker设置默认值方式
  • 决胜经典算法之插入排序

    • 编程经验推荐文章

  • wifi基础(一)：无线电波与WIFI信号干扰、衰减
  • 甲方扔给两个存在包名与类名均相同的Jar包，要在工程中同时使用怎么办？
  • 《花100块做个摸鱼小网站! 》第三篇—热搜表结构设计和热搜数据存储
  • Fluent Editor：一个基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
  • 方法的三种调用形式
  • 《花100块做个摸鱼小网站! 》第二篇—后端应用搭建和完成第一个爬虫
  • 《熬夜整理》保姆级系列教程-玩转Wireshark抓包神器教程(4)-再识Wireshark - 北京-宏哥
  • 《软件性能测试分析与调优实践之路》(第2版) 读书笔记（二）总体介绍（下）-真正从性能分析与调优来看性能测试
  • 架构知识点（三）
  • 《花100块做个摸鱼小网站! 》第一篇—买云服务器和初始化环境

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号