为了账号安全,请及时绑定邮箱和手机立即绑定

electron跨平台仿QQ|微信客户端聊天|vue3+electron聊天应用

2021.02.27 22:38 1127浏览

Electron是一款非常棒的跨平台构建桌面exe应用程序。拥有成千上万个团队选择使用electron构建跨平台软件。👏

项目概述

基于Vue3全家桶+Electron跨平台技术开发聊天应用ElectronQchat。使用到了vue3+electron+antdv+vuex+v3layer等技术实现开发。
图片描述

实现了发送图文表情消息、图片/视频预览、拖拽发送图片、朋友圈/红包等功能。

图片描述

支持多开窗口、动态换肤等功能。

图片描述

技术栈

  • 编辑器:VScode
  • 框架技术:Vue3.0+Electron11.2.3+Vuex4+VueRouter@4
  • UI组件库:Ant-design-vue^2.0.0 (蚂蚁金服pc端vue3组件库)
  • 打包工具:vue-cli-plugin-electron-builder
  • 按需引入:babel-plugin-import^1.13.3
  • 弹窗插件:V3layer(基于vue3自定义dialog组件)
  • 滚动条插件:V3scroll(基于vue3自定义虚拟滚动条)

图片描述

项目结构目录

图片描述

项目中使用到的electron版本为v11.2.3,官网最新稳定版本为11.3.0。

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

electron无边框窗体|自定义拖拽导航

创建窗口的时候配置frame: false会去掉系统顶部菜单。可通过自定义拖拽区域实现拖动窗体。
图片描述

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

图片描述

不过拖拽区域右键会出现如上图所示系统菜单,可通过如下方法快速关闭。

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

    return true
})

顶部导航条模板navbar.vue

<template>
    <div class="nt__navbar" :class="{'fixed': fixed, 'transparent fixed': transparent}">
        <div class="nt__navbar-wrap flexbox flex-alignc vui__drag" :style="{'background': bgcolor, 'color': color, 'z-index': zIndex}">
            <div class="nt__navbar-title" :class="{'center': center}">
                <template v-if="$slots.title"><slot name="title" /></template>
                <template v-else>{{title || winCfg.window.title}}</template>
            </div>
        </div>
        <WinBar :minimizable="minimizable" :maximizable="maximizable" :closable="closable">
            <slot name="wbtn" />
        </WinBar>
    </div>
</template>

<script>
import { winCfg } from '@module/actions'

export default {
    props: {
        // 标题
        title: { type: String, default: '' },
        // 标题颜色
        color: { type: String, default: '#fff' },
        // 背景颜色
        bgcolor: String,
        // 标题是否居中
        center: { type: [Boolean, String], default: false },
        // 是否固定
        fixed: { type: [Boolean, String], default: false },
        // 背景透明
        transparent: { type: [Boolean, String], default: false },
        // 设置层级
        zIndex: { type: [Number, String], default: '2021' },

        /**
         * WinBar参数
         */
        // 窗口是否可以最小化
        minimizable: { type: [Boolean, String], default: true },
        // 窗口是否可以最大化
        maximizable: { type: [Boolean, String], default: true },
        // 窗口是否可以关闭
        closable: { type: [Boolean, String], default: true },
    },
    setup() {
        return {
            winCfg,
        }
    }
}
</script>

electron创建托盘|托盘闪烁

electron可以快速创建系统托盘,实现类似QQ托盘闪烁效果。
图片描述

图片描述

大家需要提前准备两张尺寸一致的ico图标,其中一个透明背景。通过定时器来切换显示。

/**
 * @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
}

需要注意ico图标路径,在主进程中__dirname指向了dist_electron目录。
可以在根目录下新建一个静态资源目录,用来放一些静态ico或dll等文件。

好了,基于electron开发跨端聊天应用就暂时分享到这里。后续还会分享一些electron实战项目。谢谢大家的支持哈~~😎

图片描述

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消