基于Vue3.x+Electron11跨端仿制QQ/TIM应用|electron+antdv客户端实例

vue3-electron-qchat 基于vue3.x开发模仿QQ|微信电脑端聊天软件应用。

基于Vue3全家桶和Electron跨平台技术开发仿制QQ桌面端聊天软件。使用了Vue3.x+Electron11.2+Vuex4.x+Vue-Router@4+Antdv+V3Scroll+V3Layer等技术开发，支持多开新窗口、换肤等功能。

运用技术

• 编码工具：vscode
• 框架技术：vue3.0 + vuex4 + vue-router@4
• 桌面端UI库：ant-design-vue (蚂蚁pc端vue3组件库)
• 弹窗组件：v3layer（基于vue3.0自定义对话框）
• 滚动条组件：v3scroll（基于vue3.0自定义系统滚动条）
• 打包器：electron-builder
• 按需引入：babel-plugin-import

项目结构

基本实现了发送富文本消息、图片/视频/链接预览、拖拽发送图片、electron截图、红包/朋友圈等功能。

 

项目中新增了朋友圈功能，顶部导航采用transparent透明背景。

<NavBar :bgcolor="headerBg" transparent>
    <template #title><i class="iconfont icon-pyq"></i> 朋友圈</template>
    <template #wbtn>
        <a class="wbtn" title="更换封面"><i class="iconfont icon-dianzan"></i></a>
        <a class="wbtn" title="发布" @click="isShowPublish=true"><i class="iconfont icon-paizhao"></i></a>
    </template>
</NavBar>

另外右侧滚动条使用的是vue3自定义滚动条v3scroll组件来实现的。

<div class="ntMain__cont flex1 flexbox flex-col">
    <v3-scroll autohide size="10" @scroll="handleScroll">
        <div class="nt__uZone">
            ...
        </div>
    </v3-scroll>
</div>

调用非常简单，只需v3-scroll包裹内容块即可快速输出一个美化滚动条。

大家如果对vue3自定义美化系统滚动条感兴趣，可以去看看之前的这篇分享文章哈~~

https://blog.csdn.net/yanxinyun1990/article/details/112300429

聊天中的链接，点击后支持新窗口打开链接。如下图：

// 网址预览窗口
createWin({
    title: '网址预览',
    route: '/link',
    data: {url: target.href},
    width: 640,
    height: 728,
})

传入data参数，在link.vue页面接收data数据，使用iframe展示即可。

聊天中的视频，也支持新窗口打开预览。

// 视频预览窗口
createWin({
    title: '视频预览',
    route: '/video',
    data: {
        imgsrc: item.imgsrc,
        videosrc: item.videosrc,
    },
    width: 420,
    height: 600,
})

data参数传入视频封面/链接，在video.vue页面获取，然后使用video展示即可。

如上图：项目支持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)
        }
    })
})

如上图：项目中有一些弹窗使用的是vue3自定义组件来实现的。

vue3.x自定义桌面端dialog/alert弹窗组件

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,
    })
}

由于之前有过相关分享文章，大家如果对 vue3+electron搭建项目|新建多窗口 感兴趣的话，可以去看看哈~~

vue3+electron自定义导航栏菜单

由于系统菜单的存在会显得项目整体不和谐，于是只能自定义无边框窗口了，设置 frame:false 就可以去掉系统菜单。

对需要拖拽的区域设置 -webkit-app-region: drag 即可实现快速拖拽功能。

对于electron自定义顶部导航条/最大化|最小化|关闭按钮，之前也有过一篇分享文章，大家可以去看看。

electron自定义顶部拖拽导航栏

electron实现QQ托盘闪烁

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

electron-builder打包配置

vue3项目创建后，目录下有一个vue.config.js配置文件。可以进行一些简单的项目配置和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", //图标路径
                }
            }
        }
    }
}

注意事项

• 项目路径不能包含中文，否则打包时候会报错。
• 项目中尽量不要使用getcurrentInstance来获取上下文，打包也会报错。
• 在.vue页面使用ipcRenderer和remote进程模块的时候，记得开启 nodeIntegration: true 和 enableRemoteModule: true

好了，以上就是vue3+electron开发跨平台聊天应用的介绍，希望能喜欢！

最后附上一个vue3+vant3仿抖音短视频实战项目

https://blog.csdn.net/yanxinyun1990/article/details/113549899