前不久有给大家分享一款vue3+vant3开发仿制抖音短视频项目,今天带来的是最新开发的vue3+electron跨平台仿QQ/微信聊天应用实战。
vue3.0-electron-chat 基于
vue3全家桶和electron跨平台技术
相结合开发的一款聊天软件。使用了vue3+electron11+antdv+v3scroll
等技术,支持打开多个窗口和换肤
功能。
运用技术
- vue3全家桶:vue3.0+vuex4+vue-router@4
- 跨平台框架:electron11.2.3
- 打包器:vue-cli-plugin-electron-builder
- 组件库:ant-design-vue (蚂蚁金服桌面端vue3组件库)
- 对话框组件:v3layer (vue3桌面端弹窗组件)
- 滚动条组件:v3scroll (vue3自定义美化滚动条)
- 字体图标:阿里iconfont图标
项目目录结构
项目中使用到的electron版本为v11.2.3,目前最新稳定版为11.3.0,更新迭代比较频繁。
大家如果对electron跨平台技术还不熟悉的话,可以去查阅文档资料。
electron创建无边框导航栏
为了让项目整体更加美观,只能采用无边框模式。在创建窗口的时候设置frame: false
,即可去掉系统顶部菜单栏。最大化/最小化及关闭按钮也需自定义开发。
css3样式 -webkit-app-region: drag
可控制可拖拽区域,可拖拽区域里面的元素不能点击,可通过设置 -webkit-app-region: no-drag
来解决。
在拖拽区右键会出现如上图系统菜单,为了让项目更加高逼格,可通过如下方法快速屏蔽掉。
win.hookWindowMessage(278, () => {
win.setEnabled(false)
setTimeout(() => {
win.setEnabled(true)
}, 100)
return true
})
至于如何自定义导航栏和右上角关闭按钮,大家可以去看看之前的这篇分享。
vue3+electron构建无边框导航条|最大/小化/关闭按钮
electron创建托盘图标|托盘闪烁
electron如何创建类似QQ系统托盘图标呢,官网有详细文档说明。
www.electronjs.org/docs/api/tr…
const handleWinClose = () => {
if(winCfg.window.isMainWin) {
let $el = v3layer({
type: 'android',
content: '是否最小化至托盘,不退出程序?',
btns: [
{
text: '残忍退出',
style: 'color:#ff5438',
click: () => {
$el.close()
store.commit('LOGOUT')
setWin('close')
}
},
{
text: '最小化至托盘',
style: 'color:#00d2ff',
click: () => {
$el.close()
win.hide()
}
}
]
})
}else {
setWin('close', winCfg.window.id)
}
}
/**
* @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
}
调用 flashTray(false|true)
即可快速关闭/开启托盘闪烁功能。
另外在创建托盘的时候,需要注意ico图标路径问题。可以通过 console.log(__dirname)
来打印输出路径来调试开发。
vue3+electron自定义弹窗|新建多窗口
项目中的弹窗分为vue3自定义组件和electron新开窗体两种方式。
具体的实现方式这里不详细介绍,大家可以去看看下面两篇分享文章。
vue3+electron 按需引入|打包配置
由于项目中需要用到一部分的ant-design-vue组件库中的功能,按需引入最适合。打包后不会能减少体积。
在babel.config.js
中配置。
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], // 按需引入第三方插件 plugins: [ [ 'import', { 'libraryName': 'ant-design-vue', 'libraryDirectory': 'es', 'style': 'css', } ] ]}
另外在vue.config.js
中可以进行一些简单的项目配置和一些electron-builder
打包配置项。
/**
* vue3/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", //图标路径
}
}
}
}
}
end,基于vue3.x+electron开发跨平台仿制QQ聊天应用就分享到这里,感谢大家的阅读。💪
最后贴上一个vue3仿制抖音app短视频实例