Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用
基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat。
使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3layer等技术构建跨平台模仿QQ|TIM界面聊天应用。实现了发送富文本消息、图片/视频/链接预览、拖拽发送图片、调用dll截图、朋友圈等功能。支持多开窗口|父子modal窗口、换肤等操作。
一、技术栈
- 编码工具:vscode
- 框架技术:vue3.0+electron11.2.3+vuex4+vue-router@4
- 组件库:ant-design-vue^2.0.0 (蚂蚁金服pc端vue3组件库)
- 打包工具:vue-cli-plugin-electron-builder
- 按需引入:babel-plugin-import^1.13.3
- 弹窗组件:v3layer(基于vue3封装的自定义对话框组件)
- 滚动条组件:v3scroll(基于vue3封装的美化系统滚动条)
- 矢量图标:阿里iconfont字体图标库
二、目录结构
◆ 一睹效果
◆ electron实现新开窗口/多窗体并存
项目支持新开多个窗口,只需调用公共createWin方法并传入配置参数即可快速新开一个窗口。
// 关于窗口
const handleAboutWin = () => {
createWin({
title: '关于',
route: '/about',
width: 380,
height: 280,
resize: false,
parent: winCfg.window.id,
modal: true,
})
} // 换肤窗口
const handleSkinWin = () => {
createWin({
title: '换肤',
route: '/skin',
width: 720,
height: 475,
resize: false,
})
} // 朋友圈窗口
const handleFZoneWin = () => {
createWin({
title: '朋友圈',
route: '/fzone',
width: 550,
height: 700,
resize: false,
})
} // 界面管理器窗口
const handleUIManager = () => {
createWin({
title: '界面管理器',
route: '/uimanager',
width: 400,
height: 475,
resize: false,
parent: winCfg.window.id,
modal: true,
})
}
支持如下参数配置:
// 窗口参数配置
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, // 是否置顶窗口
}
至于如何使用vue3+electron搭建项目和创建多窗口,之前有过一篇分享文章,大家可以去看看。
https://www.cnblogs.com/xiaoyan2017/p/14403820.html
◆ electron自定义无边框窗体拖拽/禁用系统右键菜单
项目采用无边框模式 frame: false 如上图所示区域是自定义拖拽导航栏。支持传入标题、标题颜色/背景色、是否透明背景等功能。
但有一个问题,设置 -webkit-app-region: drag 之后,点击鼠标右键会弹出系统菜单,总感觉是一种伪拖拽效果,可通过如下方法在创建窗体的时候暂时给屏蔽掉。
// 屏蔽系统右键菜单
win.hookWindowMessage(278, () => {
win.setEnabled(false)
setTimeout(() => {
win.setEnabled(true)
}, 100) return true
})
至于如何自定义导航条及最大化/最小化/关闭按钮,之前也有过一篇分享文章,大家感兴趣可以去看一看。
https://www.cnblogs.com/xiaoyan2017/p/14449570.html
◆ electron实现QQ托盘图标/闪烁
关闭主窗体的时候,会提示直接关闭软件还是最小化到系统托盘。
// 关闭窗口
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)
}
}
由于项目支持打开多个窗口,在关闭的时候需要判断是否是主窗口,如果不是则直接传入该窗口id进行关闭,如果是主窗口,则会出现弹窗提示。
// 创建系统托盘图标
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图标,其中一个透明即可。通过定时器控制 setImage() 函数来显示ico图标,达到闪烁效果。
通过调用 flashTray(true|false) 方法来开启/停止托盘闪烁。
注意:图标路径如果不正确,则无法显示托盘图标,大家可以 console.log(__dirname) 来查看路径。默认是输出dist_electron目录。
◆ vue3.0全局对话框/虚拟滚动条组件
大家看到的项目中有一些弹窗是使用vue3自定义组件来实现的。另外项目中的滚动条也是使用vue3自定义封装替代系统滚动条。
之前也有过两篇相关的技术分享,这里就不详细介绍了,大家感兴趣也可以去看看哈。
https://www.cnblogs.com/xiaoyan2017/p/14221729.html
https://www.cnblogs.com/xiaoyan2017/p/14242983.html
◆ vue3.x+electron项目配置/打包配置
项目搭建之后,根目录会有一个vue.config.js项目配置文件。可进行一些简单的环境/插件配置,另外electron-builder打包参数也可以在里面进行配置。
/**
* @Desc vue3项目配置文件
* @Time andy by 2021-02
* @About Q:282310962 wx:xy190310
*/ 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", //图标路径
}
}
}
}
}
◆ ant-design-vue组件库按需引入
有时候项目开发,需要用到一些组件库里面的个别功能,这时按需引入最适合,会减少打包后的大小。
安装按需引入插件 npm i babel-plugin-import -D 并在babel.config.js里面进行相关引入配置。
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
// 按需引入第三方插件
plugins: [
[
'import',
{
'libraryName': 'ant-design-vue',
'libraryDirectory': 'es',
'style': 'css',
}
]
]
}
这时候就可以按需引入ant-design-vue组件了,样式文件会自动引入的。
// 按需引入ant-design-vue组件库
import {
Button, message, Tabs, Checkbox, Image, Upload
} from 'ant-design-vue' // ... const Plugins = (app) => {
app.use(Button)
app.use(Tabs)
app.use(Checkbox)
app.use(Image)
app.use(Upload) // ... app.config.globalProperties.$message = message
} export default Plugins
◆ electron实现截图功能
项目中的截图功能,本想着自己捣鼓一个,后来时间有限,就使用了一个微信截图dll来实现。可实现基本功能,并且打包后也可以截图。
// 屏幕截图
ipcMain.on('win-capture', () => {
console.log('调用微信dll截图...')
let printScr = execFile(path.join(__dirname, '../static/screenShot/PrintScr.exe'))
printScr.on('exit', (code) => {
if(code) {
console.log(code)
}
})
})
如果出现打包后,截图功能失效,需要在vue.config.js的打包配置中添加 extraResources 字段配置。
// 拷贝静态资源目录到指定位置
"extraResources": [
{
"from": "./static",
"to": "static"
},
],
from表示文件原路径,to表示打包后资源放置的路径。打包之后会在resources目录下有个static目录。
另外还需注意:
1、项目路径不能含有中文,否则打包会出错!
2、尽量不要使用 getCurrentInstance 函数来操作store或router,打包也会出错!
3、在渲染进程,也就是.vue页面,使用ipcRenderer或remote出现如下错误
Uncaught TypeError: fs.existsSync is not a function
则需要配置 nodeIntegration: true 来开启Node环境支持。
OK,基于Vue3+Electron开发桌面端仿Q应用就分享到这里。希望对大家有所帮助哈~~
Vue3.0+Electron聊天室|electron跨平台仿QQ客户端|vue3.x聊天应用的更多相关文章
- electron聊天室|vue+electron-vue仿微信客户端|electron桌面聊天
一.项目概况 基于Electron+vue+electron-vue+vuex+Nodejs+vueVideoPlayer+electron-builder等技术仿制微信电脑端界面聊天室实例,实现消息 ...
- MingQQ v1.0高仿版开源了,使用WebQQ协议实现了QQ客户端基本的聊天功能...
MingQQ v1.0高仿版开源了,使用WebQQ协议实现了QQ客户端基本的聊天功能... MingQQ目前支持的功能如下:1.支持普通方式登录.验证码方式登录.注销.保持在线.改变在线状态.2.支持 ...
- vue聊天室|h5+vue仿微信聊天界面|vue仿微信
一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...
- Taro聊天室|react+taro仿微信聊天App界面|taro聊天实例
一.项目简述 taro-chatroom是基于Taro多端实例聊天项目,运用Taro+react+react-redux+taroPop+react-native等技术开发的仿微信App界面聊天室,实 ...
- uni-app聊天室|vue+uniapp仿微信聊天实例|uniapp仿微信App界面
一.介绍 运用UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消息.表情(gif图), ...
- react聊天室|react+redux仿微信聊天IM实例|react仿微信界面
一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...
- h5聊天室web端(仿微博、微信)|h5仿微信网页端|仿微信界面弹窗
这段时间一直在着手h5开发手机端聊天系统——html5仿微信聊天室,最近又在原先基础上开发了一个仿微信.微博网页web版聊天系统,使用到了HTML5+css3+jQuery+wcpop等技术开发,弹窗 ...
- Vue3.0工程创建 && setup、ref、reactive函数 && Vue3.0响应式实现原理
1 # 一.创建Vue3.0工程 2 # 1.使用vue-cli创建 3 # 官方文档: https://cli.vuejs.org/zh/guide/creating-a-project.html# ...
- GFF高仿QQ客户端及服务器
一.GFF简介 GFF是仿QQ界面,通信基于SAEA.MessageSocket.SAEA.Http.SAEA.MVC实现包含客户端和服务器的程序,源码完全公开,项目源码地址:https://gith ...
随机推荐
- CF 1400G.Mercenaries 题解【SOSDP 组合数学】
CF 1400G.Mercenaries 题意: 有\(n\)个佣兵,问雇佣至少一名雇佣兵且满足下述条件的方案数 如果雇佣第\(i\)个佣兵必须要求最终雇佣的总人数\(x\)满足\(l_i\le x\ ...
- 牛客网暑期ACM多校训练营(第二场)message
传送门:https://ac.nowcoder.com/acm/problem/16631 题意 对于直线y=ax+b,给出n个的a[i]和b[i].m次询问,每次询问给出直线y=cx+d的c[i]和 ...
- zjnu1726 STOGOVI (lca)
Description Mirko is playing with stacks. In the beginning of the game, he has an empty stack denote ...
- 【noi 2.6_9271】奶牛散步(DP)
这题与前面的"踩方格"重复了,而且是大坑题!题目漏写了取模12345的条件! 详细解析请见我之前的博文--http://www.cnblogs.com/konjak/p/59368 ...
- codeforces 128B. String
time limit per test 2 seconds memory limit per test 256 megabytes input standard input output standa ...
- 牛客练习赛63 C.牛牛的揠苗助长
题意:有一个长度为\(n\)的数组,从第一天开始,第\(i\)天可以使\(i\)位置上的数\(+1\),当\(i=n\)时,下次从\(i=1\)再开始,另外,在每天结束时,你可以使任意一个位置上的数\ ...
- Educational Codeforces Round 95 (Rated for Div. 2) B. Negative Prefixes (贪心,构造)
题意:给你一串长度为\(n\)的序列,有的位置被锁上了,你可以对没锁的位置上的元素任意排序,使得最后一个\(\le0\)的前缀和的位置最小,求重新排序后的序列. 题解:贪心,将所有能动的位置从大到小排 ...
- [笔记]吞吐量(TPS)、QPS、并发数、响应时间(RT)概念
开发的原因,需要对吞吐量(TPS).QPS.并发数.响应时间(RT)几个概念做下了解,查自百度百科,记录如下: 1. 响应时间(RT) 响应时间是指系统对请求作出响应的时间.直观上看,这个指标与人对软 ...
- 23. 合并K个排序链表 分治
这种k个相同的子问题,可以两两分治,总的运算次数为logk 关键部分 int dis=1; int len=lists.size(); while(dis<=len) { for(int i=0 ...
- 蓝桥杯——试题 算法训练 Sereja and Squares
Java 代码 ```` import java.util.Scanner; public class Main { private static long num = 0; private stat ...