基于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

 

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

xiaoyan_2018

你的鼓励将是我持续作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值