我的项目简介
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 = nulllet flashTimer = nulllet 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模拟抖音短视频实战