基于electron25+vite4创建多窗口|vue3+electron25新开模态窗体

2023-05-30 10:16 由 xiaoyan2017 发表于 #前端开发

在写这篇文章的时候，查看了下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

// In the main process.
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({ width: 800, height: 600 })

// Load a remote URL
win.loadURL('https://github.com')

// Or load a local HTML file
win.loadFile('index.html')

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

createWin({
    title: '关于About.vue',
    route: '/about',
    width: 600,
    height: 400,
    background: '#fafffa',
    resize: true
})

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

/**
 * 封装多窗口管理器
 * @author YXY
 */

const { app, BrowserWindow, ipcMain } = require('electron')
const { join } = require('path')

process.env.ROOT = join(__dirname, '../../')

const isDevelopment = process.env.NODE_ENV == 'development'
// const winURL = isDevelopment ? 'http://localhost:3000/' : join(__dirname, 'dist/index.html')
const winURL = isDevelopment ? process.env.VITE_DEV_SERVER_URL : join(process.env.ROOT, 'dist/index.html')

// 配置参数
const defaultConfig = {
    id: null,               // 窗口唯一id
    background: '#fff',     // 背景色
    route: '',              // 路由地址url
    title: '',              // 标题
    data: null,             // 传入数据参数
    width: '',              // 窗口宽度
    height: '',             // 窗口高度
    minWidth: '',           // 窗口最小宽度
    minHeight: '',          // 窗口最小高度
    x: '',                  // 窗口相对于屏幕左侧坐标
    y: '',                  // 窗口相对于屏幕顶端坐标
    resize: true,           // 是否支持缩放
    maximize: false,        // 最大化窗口
    isMultiWin: false,      // 是否支持多开窗口
    isMainWin: false,       // 是否主窗口
    parent: '',             // 父窗口（需传入父窗口id）
    modal: false,           // 模态窗口（模态窗口是浮于父窗口上，禁用父窗口）
    alwaysOnTop: false      // 置顶窗口
}

class MultiWindows {
    constructor() {
        // 主窗口
        this.mainWin = null
        // 窗口组
        this.winLs = {}

        // ...
    }

    winOpts() {
        return {
            // 窗口图标
            icon: join(process.env.ROOT, 'resource/shortcut.ico'),
            backgroundColor: '#fff',
            autoHideMenuBar: true,
            titleBarStyle: 'hidden',
            width: 1000,
            height: 640,
            resizable: true,
            minimizable: true,
            maximizable: true,
            frame: false,
            show: false,
            webPreferences: {
                contextIsolation: true, // 启用上下文隔离(为了安全性)（默认true）
                // nodeIntegration: false, // 启用Node集成（默认false）
                preload: join(process.env.ROOT, 'resource/preload.js'),
                // devTools: true,
                // webSecurity: false
            }
        }
    }

    // 创建新窗口
    createWin(options) {
        const args = Object.assign({}, defaultConfig, options)
        console.log(args)

        // 判断窗口是否存在
        for(let i in this.winLs) {
            if(this.getWin(i) && this.winLs[i].route === args.route && !this.winLs[i].isMultiWin) {
                this.getWin(i).focus()
                return
            }
        }

        let opt = this.winOpts()
        if(args.parent) {
            opt.parent = this.getWin(args.parent)
        }

        if(typeof args.modal === 'boolean') opt.modal = args.modal
        if(typeof args.resize === 'boolean') opt.resizable = args.resize
        if(typeof args.alwaysOnTop === 'boolean') opt.alwaysOnTop = args.alwaysOnTop
        if(args.background) opt.backgroundColor = args.background
        if(args.width) opt.width = args.width
        if(args.height) opt.height = args.height
        if(args.minWidth) opt.minWidth = args.minWidth
        if(args.minHeight) opt.minHeight = args.minHeight
        if(args.x) opt.x = args.x
        if(args.y) opt.y = args.y

        console.log(opt)

        // 创建窗口对象
        let win = new BrowserWindow(opt)
        // 是否最大化
        if(args.maximize && args.resize) {
            win.maximize()
        }
        this.winLs[win.id] = {
            route: args.route, isMultiWin: args.isMultiWin
        }
        args.id = win.id


        // 加载页面
        let $url
        if(!args.route) {
            if(process.env.VITE_DEV_SERVER_URL) {
                // 打开开发者调试工具
                // win.webContents.openDevTools()
    
                $url = process.env.VITE_DEV_SERVER_URL
            }else {
                $url = winURL
            }
        }else {
            $url = `${winURL}#${args.route}`
        }
        win.loadURL($url)
        /*if(process.env.VITE_DEV_SERVER_URL) {
            win.loadURL($url)
        }else {
            win.loadFile($url)
        }*/
        win.webContents.openDevTools()

        win.once('ready-to-show', () => {
            win.show()
        })

        win.on('close', () => win.setOpacity(0))

        // 初始化渲染进程
        win.webContents.on('did-finish-load', () => {
            // win.webContents.send('win-loaded', '加载完成~！')
            win.webContents.send('win-loaded', args)
        })
    }

    // 获取窗口
    getWin(id) {
        return BrowserWindow.fromId(Number(id))
    }

    // 获取全部窗口
    getAllWin() {
        return BrowserWindow.getAllWindows()
    }

    // 关闭全部窗口
    closeAllWin() {
        try {
            for(let i in this.winLs) {
                if(this.getWin(i)) {
                    this.getWin(i).close()
                }else {
                    app.quit()
                }
            }
        } catch (error) {
            console.log(error)
        }
    }

    // 开启主进程监听
    ipcMainListen() {
        // 设置标题
        ipcMain.on('set-title', (e, data) => {
            const webContents = e.sender
            const wins = BrowserWindow.fromWebContents(webContents)
            wins.setTitle(data)

            // const wins = BrowserWindow.getFocusedWindow()
            // wins.setTitle('啦啦啦')
        })
        // 是否最大化(方法一)
        /*ipcMain.on('isMaximized', e => {
            const win = BrowserWindow.getFocusedWindow()
            e.sender.send('mainReplay', win.isMaximized())
        })*/
        // 是否最大化(方法二)
        ipcMain.handle('isMaximized', (e) => {
            const win = BrowserWindow.getFocusedWindow()
            return win.isMaximized()
        })

        ipcMain.on('min', e => {
            const win = BrowserWindow.getFocusedWindow()
            win.minimize()
        })
        ipcMain.handle('max2min', e => {
            const win = BrowserWindow.getFocusedWindow()
            if(win.isMaximized()) {
                win.unmaximize()
                return false
            }else {
                win.maximize()
                return true
            }
        })
        ipcMain.on('close', (e, data) => {
            // const wins = BrowserWindow.getFocusedWindow()
            // wins.close()
            this.closeAllWin()
        })

        // ...
    }
}

module.exports = MultiWindows

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

const { app, BrowserWindow, ipcMain } = require('electron')
const { join } = require('path')

const MultiWindows = require('./src/windows')

// 屏蔽安全警告
// ectron Security Warning (Insecure Content-Security-Policy)
process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'

const createWindow = () => {
    let window = new MultiWindows()

    window.createWin({isMainWin: true})
    window.ipcMainListen()
}

app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

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

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

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

/**
 * 创建新窗口
 * @param {object} args | {width: 640, height: 480, route: '/home'}
 */
export function createWin(args) {
    window.electronAPI.send('win-create', args)
}

/**
 * 设置窗口
 * @param {string} type | 'show'/'hide'/'close'/'min'/'max'/'max2min'/'restore'/'reload'
 * @param {number} id
 */
export function setWin(type, id) {
    window.electronAPI.send('win-' + type, id)
}

/**
 * 创建登录窗口
 */
export function loginWin() {
    createWin({
        isMainWin: true,
        title: '登录',
        route: '/login',
        width: 550,
        height: 320,
        resize: false,
        alwaysOnTop: true,
    })
}

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

<template>
    <div class="home">
        ...

        <Button type="success" @click="openWin">打开Manage窗口（设置parent）</Button>
        <Button type="success" @click="openWin1">打开Me窗口（设置resizable/isMultiWin）</Button>
        <Button type="success" @click="openWin2">打开User窗口</Button>
    </div>
</template>

<script>
import { winCfg, createWin } from '@/windows/action'

export default {
    name: 'Home',
    setup() {
        const openWin = () => {
            MessageBox.confirm('提示', '确定打开Manage页面吗？ 【设置parent属性】', {
                callback: action => {
                    if(action == 'confirm') {
                        createWin({
                            title: 'Manage.vue',
                            route: '/manage',
                            width: 600,
                            height: 400,
                            background: '#09f',
                            parent: winCfg.window.id,
                            // modal: true
                        })
                    }else if(action == 'cancel') {
                        Message.info('您已取消！')
                    }
                }
            })
        }

        const openWin1 = () => {
            // 左上角
            // let posX = 0
            // let posY = 0

            // 右下角
            let posX = window.screen.availWidth - 850
            let posY = window.screen.availHeight - 600
            MessageBox.confirm('提示', '确定打开Me页面吗？', {
                callback: action => {
                    if(action == 'confirm') {
                        createWin({
                            title: 'Me.vue',
                            route: '/me?name=Andy',
                            width: 850,
                            height: 600,
                            x: posX,
                            y: posY,
                            background: 'yellow',
                            resize: false,
                            isMultiWin: true,
                            maximize: true
                        })
                    }else if(action == 'cancel') {
                        Message.info('您已取消！')
                    }
                }
            })
        }

        const openWin2 = () => {
            MessageBox.confirm('提示', '确定打开User页面吗？', {
                callback: action => {
                    if(action == 'confirm') {
                        createWin({
                            title: 'User.vue',
                            route: '/user',
                            width: 700,
                            height: 550,
                            minWidth: 300,
                            minHeight: 300,
                            data: {
                                name: 'Andy',
                                age: 20
                            },
                            background: 'green',
                            isMultiWin: true
                        })
                    }else if(action == 'cancel') {
                        Message.info('您已取消！')
                    }
                }
            })
        }

        // ...

        return {
            openWin,
            openWin1,
            openWin2,

            // ...
        }
    }
}
</script>

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

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

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

process.env.NODE_ENV
process.env.VITE_DEV_SERVER_URL

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

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

Vue自定义指令-让你的业务开发更简单

## 1、使用场景在日常开发中，我们会将重复代码抽象为一个函数或者组件，然后在需要时调用或者引入。但是，对于某些功能，这种方法可能不够优雅或者不够灵活。例如，我们可能需要在DOM元素上添加一些自定义属性或者绑定一些事件，这些操作可能难以通过函数或组件来实现。这时，[自定义指令](https://v ...阅读全文

React学习时，自己拟定的一则小案例（table表格组件，含编辑）

某次在Uniapp群看到有人问uniapp如何操作dom元素。 ![](https://img2023.cnblogs.com/blog/3112483/202306/3112483-20230605170528006-986335874.png) 他想对这张表标红的区域，做dom元素获取，因为产品 ...阅读全文

帮你梳理了一份前端知识架构图

列一份前端知识架构图在上一篇文章中，我们简要地总结了前端的学习路径与方法，我们提到的第一个学习方法就是：建立知识框架。那么，今天我们就一起来列一份前端的知识框架图。在开始列框架之前，我想先来谈谈我们的目标。实际上，我们在网上可以找到很多参考资料，比如 MDN 这样的参考手册，又比如一份语言标准， ...阅读全文

【一步步开发AI运动小程序】十一、人体关键点跳跃追踪

> 随着人工智能技术的不断发展，阿里体育等IT大厂，推出的“乐动力”、“天天跳绳”AI运动APP，让**云上运动会、线上运动会、健身打卡、AI体育指导**等概念空前火热。那么，能否将这些在APP成功应用的场景搬上小程序，分享这些概念的红利呢？本系列文章就带您一步一步从零开始开发一个AI运动小程序，本 ...阅读全文

如何制作 Storybook Day 网页上的 3D 效果？

Storybook 刚刚达到了一个重要的里程牌：7.0 版本！为了庆祝，该团队举办了他们的第一次用户大会 - [Storybook Day](https://storybook.js.org/day)。为了更特别，在活动页面中添加了一个视觉上令人惊叹的 3D 插图。原文：[How we built ...阅读全文

记录--手把手教你Vue+ECharts+高德地图API实现天气预报数据可视化

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前言所谓数据可视化，我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比，走向。对于数据可视化，很多互联网公司是很看重这一块的，包括大厂；就比如阿里的淘宝，双十一的时候往往就需要将消费者的一些数据通过图的形式展现出来。接下来我们就来 ...阅读全文

从0搭建Vue3组件库(十三):引入Husky规范git提交

## 为什么要引入 husky? 虽然我们项目中引入了`prettier`和`eslint`对代码格式进行了校验,但是多人开发的时候难免依然会有人提交不符合规范的代码到仓库中,如果我们拉取到这种代码还得慢慢对其进行修改,这是一件很麻烦的事情,同时也为了避免团队成员提交五花八门message,因此我们 ...阅读全文

记录--让URL地址都变成了"ooooooooo"

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助发现一个很有创意的小工具网站，如封面图所示功能很简单，就是将一个URL地址转换为都是 ooooooooo 的样子，通过转换后的地址访问可以转换回到原始地址，简单流程如下图所示。转换的逻辑有点像短链平台一样，只不过这个是将你的URL地址变的 ...阅读全文

各大免费托管平台体验有感

**历时一年多，我也体验了不少的静态博客托管服务了，这里进行一下对比吧。主要列举一下优缺点，所有的内容基于该平台免费版，并且不添加任何增值服务的情况。速度体验基于浙江电信的个人测试结果。** # GitHub Pages > 速度：尚可，并不很慢，但有时候会抽风。自定义域名：一个。限制：单个 ...阅读全文

各大建站方案

# 如何在 CloudFlare Pages 上建站？ > 几分钟、零基础搭建个人网页！- 高速直连，基于Cloudflare Page: `https://zhuanlan.zhihu.com/p/416269228` 使用 Cloudflare Worker 免费搭建网址导航网站 `https: ...阅读全文