关于electron:electronvue3仿QQ聊天应用ElectronAntdv聊天客户端实例

我的项目简介

Vue3-ElectronQchat 应用vue3.x+electron+antdv+v3layer等技术实现的一款跨桌面端仿造QQ界面聊天实例。能够反对新建多窗口模式、换肤等性能。

技术框架

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

我的项目构造

vue3+electron自定义弹窗性能

我的项目中应用到的弹窗分为vue3自定义组件和electron新开窗体两种模式。

vue3自定义弹窗，之前有过一篇分享，大家能够去看下。
vue3.x全局自定义pc桌面端dialog组件

electron新建多窗口，反对如下参数配置：

// 窗口参数配置
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,     // 是否置顶窗口
}

通过调用如下办法，传入下面的参数疾速生成一个新窗体。

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

至于如何实现，大家能够去看看这篇分享文章。
vue3+electron搭建我的项目|窗口多开实例

electron自定义拖拽窗体

我的项目采纳无边框窗口模式，就须要自定义导航栏了。
设置 -webkit-app-region: drag 即可疾速实现一个拖拽区域。

如上图：导航栏反对自定义题目、色彩/背景色、是否通明背景等性能。

因为之前也有过相干分享文章，这里就不具体介绍了。
electron自定义导航条|最大/小化/敞开按钮

不过会呈现一个不敌对的问题，就是拖拽区，鼠标右键会弹出零碎菜单，那么如何敞开掉呢？

通过调式发现能够通过如下办法疾速敞开掉。

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

    return true
})

electron实现QQ托盘图标闪动

窗体反对敞开提醒最小化到托盘及托盘闪动性能。

大家筹备两张大小统一的，其中一个通明的ico图标。

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()函数即可开启/敞开托盘图标闪动。
另外肯定要留神图标门路，不然托盘图标会不显示。

vue3+electron我的项目/打包配置

一开始创立我的项目的时候，有个vue.config.js配置文件。能够进行一些简略的我的项目配置和electron-builder打包参数配置。

/**
 * @Desc     vue3+electron我的项目/打包配置文件
 * @Time     andy by 2021-02
 */

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", //图标门路
                }
            }
        }
    }
}

好了，以上就是vue3+electron开发仿造QQ客户端利用我的项目。谢谢大家的反对！

最初附上一个vue3+vant3仿造抖音小视频我的项目
vite2+vue3+vant3模拟抖音短视频实战

关于electron:electronvue3仿QQ聊天应用ElectronAntdv聊天客户端实例

我的项目简介

技术框架

我的项目构造

vue3+electron自定义弹窗性能

electron自定义拖拽窗体

electron实现QQ托盘图标闪动

vue3+electron我的项目/打包配置

评论

发表回复取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

关于electron:electronvue3仿QQ聊天应用ElectronAntdv聊天客户端实例

我的项目简介

技术框架

我的项目构造

vue3+electron自定义弹窗性能

electron自定义拖拽窗体

electron实现QQ托盘图标闪动

vue3+electron我的项目/打包配置

评论

发表回复 取消回复

更多文章

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

深入解析：基于Delta的线性数据结构模型，打造高效富文本编辑器

轻松管理社交媒体：使用Automa插件实现一键拉黑功能

发表回复取消回复