前不久有给大家分享一款vue3+vant3开发仿制抖音短视频项目，今天带来的是最新开发的vue3+electron跨平台仿QQ/微信聊天应用实战。

vue3.0-electron-chat 基于vue3全家桶和electron跨平台技术相结合开发的一款聊天软件。使用了vue3+electron11+antdv+v3scroll等技术，支持打开多个窗口和换肤功能。

运用技术

vue3全家桶：vue3.0+vuex4+vue-router@4
跨平台框架：electron11.2.3
打包器：vue-cli-plugin-electron-builder
组件库：ant-design-vue (蚂蚁金服桌面端vue3组件库)
对话框组件：v3layer (vue3桌面端弹窗组件)
滚动条组件：v3scroll (vue3自定义美化滚动条)
字体图标：阿里iconfont图标

项目目录结构

项目中使用到的electron版本为v11.2.3，目前最新稳定版为11.3.0，更新迭代比较频繁。

大家如果对electron跨平台技术还不熟悉的话，可以去查阅文档资料。

https://www.electronjs.org/docs

electron创建无边框导航栏

为了让项目整体更加美观，只能采用无边框模式。在创建窗口的时候设置frame: false，即可去掉系统顶部菜单栏。最大化/最小化及关闭按钮也需自定义开发。

css3样式 -webkit-app-region: drag 可控制可拖拽区域，可拖拽区域里面的元素不能点击，可通过设置 -webkit-app-region: no-drag 来解决。

在拖拽区右键会出现如上图系统菜单，为了让项目更加高逼格，可通过如下方法快速屏蔽掉。

win.hookWindowMessage(278, () => {
    win.setEnabled(false)
    setTimeout(() => {
        win.setEnabled(true)
    }, 100)

    return true
})

至于如何自定义导航栏和右上角关闭按钮，大家可以去看看之前的这篇分享。

vue3+electron构建无边框导航条|最大/小化/关闭按钮

electron创建托盘图标|托盘闪烁

electron如何创建类似QQ系统托盘图标呢，官网有详细文档说明。

https://www.electronjs.org/docs/api/tray

const handleWinClose = () => {
    if(winCfg.window.isMainWin) {
        let $el = v3layer({
            type: 'android',
            content: '是否最小化至托盘，不退出程序？',
            btns: [
                {
                    text: '残忍退出',
                    style: 'color:#ff5438',
                    click: () => {
                        $el.close()
                        store.commit('LOGOUT')
                        setWin('close')
                    }
                },
                {
                    text: '最小化至托盘',
                    style: 'color:#00d2ff',
                    click: () => {
                        $el.close()
                        win.hide()
                    }
                }
            ]
        })
    }else {
        setWin('close', winCfg.window.id)
    }
}

/**
 * @Desc     electron创建系统托盘图标
 * @Time     andy by 2021-02  Q：282310962  wx：xy190310
 */

let tray = null
let flashTimer = null
let trayIco1 = path.join(__dirname, '../static/tray.ico')
let trayIco2 = path.join(__dirname, '../static/tray-empty.ico')

createTray() {
    const trayMenu = Menu.buildFromTemplate([
        {
            label: '我在线上', icon: path.join(__dirname, '../static/icon-online.png'),
            click: () => {...}
        },
        {
            label: '忙碌', icon: path.join(__dirname, '../static/icon-busy.png'),
            click: () => {...}
        },
        {
            label: '隐身', icon: path.join(__dirname, '../static/icon-invisible.png'),
            click: () => {...}
        },
        {
            label: '离开', icon: path.join(__dirname, '../static/icon-offline.png'),
            click: () => {...}
        },
        {type: 'separator'},
        {
            label: '关闭所有声音', click: () => {...},
        },
        {
            label: '关闭头像闪动', click: () => {
                this.flashTray(false)
            }
        },
        {type: 'separator'},
        {
            label: '打开主窗口', click: () => {
                try {
                    for(let i in this.winLs) {
                        let win = this.getWin(i)
                        if(!win) return
                        if(win.isMinimized()) win.restore()
                        win.show()
                    }
                } catch (error) {
                    console.log(error)
                }
            }
        },
        {
            label: '退出', click: () => {
                try {
                    for(let i in this.winLs) {
                        let win = this.getWin(i)
                        if(win) win.webContents.send('win-logout')
                    }
                    app.quit()
                } catch (error) {
                    console.log(error)
                }
            }
        },
    ])
    this.tray = new Tray(this.trayIco1)
    this.tray.setContextMenu(trayMenu)
    this.tray.setToolTip(app.name)
    this.tray.on('double-click', () => {
        // ...
    })
}
// 托盘图标闪烁
flashTray(flash) {
    let hasIco = false

    if(flash) {
        if(this.flashTimer) return
        this.flashTimer = setInterval(() => {
            this.tray.setImage(hasIco ? this.trayIco1 : this.trayIco2)
            hasIco = !hasIco
        }, 500)
    }else {
        if(this.flashTimer) {
            clearInterval(this.flashTimer)
            this.flashTimer = null
        }
        this.tray.setImage(this.trayIco1)
    }
}
// 销毁托盘图标
destoryTray() {
    this.flashTray(false)
    this.tray.destroy()
    this.tray = null
}

调用 flashTray(false|true) 即可快速关闭/开启托盘闪烁功能。

另外在创建托盘的时候，需要注意ico图标路径问题。可以通过 console.log(__dirname) 来打印输出路径来调试开发。

vue3+electron自定义弹窗|新建多窗口

项目中的弹窗分为vue3自定义组件和electron新开窗体两种方式。

具体的实现方式这里不详细介绍，大家可以去看看下面两篇分享文章。

vue3.x自定义全局对话框组件v3layer

electron自定义多个窗口|父子modal窗体

vue3+electron 按需引入|打包配置

由于项目中需要用到一部分的ant-design-vue组件库中的功能，按需引入最适合。打包后不会能减少体积。

在babel.config.js中配置。

module.exports = {  presets: [    '@vue/cli-plugin-babel/preset'  ],  // 按需引入第三方插件  plugins: [    [      'import',      {        'libraryName': 'ant-design-vue',        'libraryDirectory': 'es',        'style': 'css',      }    ]  ]}

另外在vue.config.js中可以进行一些简单的项目配置和一些electron-builder打包配置项。

/**
 *  vue3/electron项目打包配置
 */

const path = require('path')

module.exports = {
    ...
    
    pluginOptions: {
        electronBuilder: {
            // 配置后可以在渲染进程使用ipcRenderer
            nodeIntegration: true,

            // 项目打包参数配置
            builderOptions: {
                "productName": "electron-qchat", //项目名称 打包生成exe的前缀名
                "appId": "com.example.electronqchat", //包名
                "compression": "maximum", //store|normal|maximum 打包压缩情况(store速度较快)
                "artifactName": "${productName}-${version}-${platform}-${arch}.${ext}",
                // "directories": {
                //     "output": "build", //输出文件夹（默认dist_electron）
                // },
                "asar": false, //asar打包
                "extraResources": [
                    {
                        "from": "./static",
                        "to": "static"
                    },
                ],
                "nsis": {
                    "oneClick": false, //一键安装
                    "allowToChangeInstallationDirectory": true, //允许修改安装目录
                    "perMachine": true, //是否开启安装时权限设置（此电脑或当前用户）
                    "deleteAppDataOnUninstall": true, //卸载时删除数据
                    "createDesktopShortcut": true, //创建桌面图标
                    "createStartMenuShortcut": true, //创建开始菜单图标
                    "shortcutName": "ElectronQChat", //桌面快捷键图标名称
                },
                "win": {
                    "icon": "./static/shortcut.ico", //图标路径
                }
            }
        }
    }
}

end，基于vue3.x+electron开发跨平台仿制QQ聊天应用就分享到这里，感谢大家的阅读。💪

最后贴上一个vue3仿制抖音app短视频实例

https://juejin.cn/post/6924609446060490760