共计 5009 个字符，预计需要花费 13 分钟才能阅读完成。
我的项目简介
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 模拟抖音短视频实战
正文完
