Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用

基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat。

使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3layer等技术构建跨平台模仿QQ|TIM界面聊天应用。实现了发送富文本消息、图片/视频/链接预览、拖拽发送图片、调用dll截图、朋友圈等功能。支持多开窗口|父子modal窗口、换肤等操作。

一、技术栈

• 编码工具：vscode
• 框架技术：vue3.0+electron11.2.3+vuex4+vue-router@4
• 组件库：ant-design-vue^2.0.0 (蚂蚁金服pc端vue3组件库)
• 打包工具：vue-cli-plugin-electron-builder
• 按需引入：babel-plugin-import^1.13.3
• 弹窗组件：v3layer（基于vue3封装的自定义对话框组件）
• 滚动条组件：v3scroll（基于vue3封装的美化系统滚动条）
• 矢量图标：阿里iconfont字体图标库

二、目录结构

◆ 一睹效果

◆ electron实现新开窗口/多窗体并存

项目支持新开多个窗口，只需调用公共createWin方法并传入配置参数即可快速新开一个窗口。

// 关于窗口
const handleAboutWin = () => {
    createWin({
        title: '关于',
        route: '/about',
        width: 380,
        height: 280,
        resize: false,
        parent: winCfg.window.id,
        modal: true,
    })
}

// 换肤窗口
const handleSkinWin = () => {
    createWin({
        title: '换肤',
        route: '/skin',
        width: 720,
        height: 475,
        resize: false,
    })
}

// 朋友圈窗口
const handleFZoneWin = () => {
    createWin({
        title: '朋友圈',
        route: '/fzone',
        width: 550,
        height: 700,
        resize: false,
    })
}

// 界面管理器窗口
const handleUIManager = () => {
    createWin({
        title: '界面管理器',
        route: '/uimanager',
        width: 400,
        height: 475,
        resize: false,
        parent: winCfg.window.id,
        modal: true,
    })
}

支持如下参数配置：

// 窗口参数配置
export const winConfig = {
    id: null,               // 窗口唯一id
    background: '#fff',     // 背景色
    route: '',              // 路由地址url
    title: '',              // 标题
    data: null,             // 传入数据参数
    width: '',              // 窗口宽度
    height: '',             // 窗口高度
    minWidth: '',           // 窗口最小宽度
    minHeight: '',          // 窗口最小高度
    x: '',                  // 窗口相对于屏幕左侧坐标
    y: '',                  // 窗口相对于屏幕顶端坐标
    resize: true,           // 是否支持缩放
    maximize: false,        // 最大化窗口
    isMultiWin: false,      // 是否支持多开窗口（为true则会支持创建多个窗口）
    isMainWin: false,       // 是否主窗口（为true则会替代之前主窗口）
    parent: '',             // 父窗口（传入父窗口id）
    modal: false,           // 模态窗口（需设置parent和modal选项）
    alwaysOnTop: false,     // 是否置顶窗口
}

至于如何使用vue3+electron搭建项目和创建多窗口，之前有过一篇分享文章，大家可以去看看。

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

◆ electron自定义无边框窗体拖拽/禁用系统右键菜单

项目采用无边框模式  frame: false  如上图所示区域是自定义拖拽导航栏。支持传入标题、标题颜色/背景色、是否透明背景等功能。

但有一个问题，设置 -webkit-app-region: drag 之后，点击鼠标右键会弹出系统菜单，总感觉是一种伪拖拽效果，可通过如下方法在创建窗体的时候暂时给屏蔽掉。

// 屏蔽系统右键菜单
win.hookWindowMessage(278, () => {
    win.setEnabled(false)
    setTimeout(() => {
        win.setEnabled(true)
    }, 100)

    return true
})

至于如何自定义导航条及最大化/最小化/关闭按钮，之前也有过一篇分享文章，大家感兴趣可以去看一看。

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

◆ electron实现QQ托盘图标/闪烁

关闭主窗体的时候，会提示直接关闭软件还是最小化到系统托盘。

// 关闭窗口
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)
    }
}

由于项目支持打开多个窗口，在关闭的时候需要判断是否是主窗口，如果不是则直接传入该窗口id进行关闭，如果是主窗口，则会出现弹窗提示。

// 创建系统托盘图标
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
}

大家需要准备两个大小一样的ico图标，其中一个透明即可。通过定时器控制 setImage() 函数来显示ico图标，达到闪烁效果。

通过调用 flashTray(true|false) 方法来开启/停止托盘闪烁。

注意：图标路径如果不正确，则无法显示托盘图标，大家可以 console.log(__dirname) 来查看路径。默认是输出dist_electron目录。

◆ vue3.0全局对话框/虚拟滚动条组件

大家看到的项目中有一些弹窗是使用vue3自定义组件来实现的。另外项目中的滚动条也是使用vue3自定义封装替代系统滚动条。

之前也有过两篇相关的技术分享，这里就不详细介绍了，大家感兴趣也可以去看看哈。

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

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

◆ vue3.x+electron项目配置/打包配置

项目搭建之后，根目录会有一个vue.config.js项目配置文件。可进行一些简单的环境/插件配置，另外electron-builder打包参数也可以在里面进行配置。

/**
 * @Desc     vue3项目配置文件
 * @Time     andy by 2021-02
 * @About    Q：282310962  wx：xy190310
 */

const path = require('path')

module.exports = {
    // 基本路径
    // publicPath: '/',

    // 输出文件目录
    // outputDir: 'dist',

    // assetsDir: '',

    // 环境配置
    devServer: {
        // host: 'localhost',
        // port: 8080,
        // 是否开启https
        https: false,
        // 编译完是否打开网页
        open: false,

        // 代理配置
        // proxy: {
        //     '^/api': {
        //         target: '<url>',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '^/foo': {
        //         target: '<other_url>'
        //     }
        // }
    },

    // webpack配置
    chainWebpack: config => {
        // 配置路径别名
        config.resolve.alias
            .set('@', path.join(__dirname, 'src'))
            .set('@assets', path.join(__dirname, 'src/assets'))
            .set('@components', path.join(__dirname, 'src/components'))
            .set('@module', path.join(__dirname, 'src/module'))
            .set('@plugins', path.join(__dirname, 'src/plugins'))
            .set('@layouts', path.join(__dirname, 'src/layouts'))
            .set('@views', path.join(__dirname, 'src/views'))
    },

    // 插件配置
    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, //是否开启安装时权限设置（此电脑或当前用户）
                    "artifactName": "${productName}-${version}-${platform}-${arch}-setup.${ext}", //打包后安装包名称
                    "deleteAppDataOnUninstall": true, //卸载时删除数据
                    "createDesktopShortcut": true, //创建桌面图标
                    "createStartMenuShortcut": true, //创建开始菜单图标
                    "shortcutName": "ElectronQChat", //桌面快捷键图标名称
                },
                "win": {
                    "icon": "./static/shortcut.ico", //图标路径
                }
            }
        }
    }
}

◆ ant-design-vue组件库按需引入

有时候项目开发，需要用到一些组件库里面的个别功能，这时按需引入最适合，会减少打包后的大小。

安装按需引入插件  npm i babel-plugin-import -D 并在babel.config.js里面进行相关引入配置。

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

这时候就可以按需引入ant-design-vue组件了，样式文件会自动引入的。

// 按需引入ant-design-vue组件库
import {
    Button, message, Tabs, Checkbox, Image, Upload
} from 'ant-design-vue'

// ...

const Plugins = (app) => {
    app.use(Button)
    app.use(Tabs)
    app.use(Checkbox)
    app.use(Image)
    app.use(Upload)

    // ...

    app.config.globalProperties.$message = message
}

export default Plugins

◆ electron实现截图功能

项目中的截图功能，本想着自己捣鼓一个，后来时间有限，就使用了一个微信截图dll来实现。可实现基本功能，并且打包后也可以截图。

// 屏幕截图
ipcMain.on('win-capture', () => {
    console.log('调用微信dll截图...')
    let printScr = execFile(path.join(__dirname, '../static/screenShot/PrintScr.exe'))
    printScr.on('exit', (code) => {
        if(code) {
            console.log(code)
        }
    })
})

如果出现打包后，截图功能失效，需要在vue.config.js的打包配置中添加  extraResources 字段配置。

// 拷贝静态资源目录到指定位置
"extraResources": [
    {
        "from": "./static",
        "to": "static"
    },
],

from表示文件原路径，to表示打包后资源放置的路径。打包之后会在resources目录下有个static目录。

另外还需注意：

1、项目路径不能含有中文，否则打包会出错！

2、尽量不要使用 getCurrentInstance 函数来操作store或router，打包也会出错！

3、在渲染进程，也就是.vue页面，使用ipcRenderer或remote出现如下错误

Uncaught TypeError: fs.existsSync is not a function

则需要配置  nodeIntegration: true  来开启Node环境支持。

OK，基于Vue3+Electron开发桌面端仿Q应用就分享到这里。希望对大家有所帮助哈~~