Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

最新研发Electron38+Vite7+Pinia3客户端仿微信聊天系统ElectronWinChat。
electron38-vue3-wechat基于vite7.1+electron38+pinia3+element-plus跨平台仿微信/QQ电脑端聊天Exe程序。封装electron多窗口管理、自定义系统导航栏。实现聊天、通讯录、收藏、朋友圈/短视频、我的等模块。

使用技术

• 编辑器：VScode
  
• 技术框架：Electron38.0.0+Vite7.1.2+Vue3.5.18+vue-router4.5.1
  
• UI组件库：element-plus^2.11.2
  
• 状态管理：pinia^3.0.3
  
• 存储服务：pinia-plugin-persistedstate^4.5.0
  
• 打包构建：electron-builder^24.13.3
  
• electron结合vite插件：vite-plugin-electron^0.29.0
  

项目结构框架

vue3-electronchat桌面端聊天项目采用最新版 vite7+electron38 搭建项目模板。

Electron38-ViteChat聊天项目已经更新到我的原创作品集，感谢支持！

基于Electron38+Vue3+ElementPlus仿微信客户端聊天系统

通用布局模板

项目整体分为左侧菜单栏+侧边栏+右侧内容区(自定义导航条)等模块。

1. <template>
2.   <template v-if="!route?.meta?.isNewWin">
3.    
4.       
5.         
6.          
7.           <slot v-if="!route?.meta?.hideMenuBar" name="menubar">
8.             <MenuBar />
9.           </slot>
11.          
12.          
13.             
14.               <slot name="sidebar">
15.                 <SideBar />
16.               </slot>
17.             </aside>
18.          
20.          
21.          
22.             <ToolBar v-if="!route?.meta?.hideToolBar" />
23.             <router-view v-slot="{ Component, route }">
24.               <keep-alive>
25.                 <component :is="Component" :key="route.path" />
26.               </keep-alive>
27.             </router-view>
28.          
29.         
30.       
31.    
32.   </template>
33.   <template v-else>
34.     <WinLayout />
35.   </template>
36. </template>

复制代码

Electron主进程/预加载文件配置

1. /**
2. * electron主进程配置
3. * @author andy
4. */
6. import { app, BrowserWindow } from 'electron'
8. import { WindowManager } from '../src/windows/index.js'
10. // 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy)
11. process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true
13. const createWindow = () => {
14.   let win = new WindowManager()
15.   win.create({isMajor: true})
16.   // 系统托盘管理
17.   win.trayManager()
18.   // 监听ipcMain事件
19.   win.ipcManager()
20. }
22. app.whenReady().then(() => {
23.   createWindow()
25.   app.on('activate', () => {
26.     if(BrowserWindow.getAllWindows().length === 0) createWindow()
27.   })
28. })
30. app.on('window-all-closed', () => {
31.   if(process.platform !== 'darwin') app.quit()
32. })

复制代码

1. /**
2. * electron预加载文件配置
3. * @author andy
4. */
6. import { contextBridge, ipcRenderer } from 'electron'
8. contextBridge.exposeInMainWorld(
9.   'electron',
10.   {
11.     // 通过 channel 向主进程发送异步消息。主进程使用 ipcMain.on() 监听 channel
12.     send: (channel, args) => {
13.       ipcRenderer.send(channel, args)
14.     },
16.     // 通过 channel 向主进程发送消息，并异步等待结果。主进程应该使用 ipcMain.handle() 监听 channel
17.     invoke: (channel, args) => {
18.       return new Promise(resolve => ipcRenderer.invoke(channel, args).then(data => resolve(data)).catch(e => console.log(e)))
19.     },
21.     // 监听 channel 事件
22.     on: (channel, func) => {
23.       console.log('receive event')
24.       ipcRenderer.on(channel, (event, ...args) => func(event, ...args))
25.     },
27.     // 一次性监听事件
28.     once: (channel, func) => {
29.       ipcRenderer.once(channel, (event, ...args) => func(event, ...args))
30.     },
32.     setTitle: (title) => ipcRenderer.send('win-setTitle', title)
33.   }
34. )

复制代码

Electron+Vue3自定义系统无边框拖拽窗口|导航栏

项目自定义无边框iframe:false窗口拖拽导航栏。

1. <template>
2.   
3.    
4.       
5.         
6.         <slot name="left" />
7.         
8.         
9.           <slot name="title">{{title}}</slot>
10.         
11.         
12.         <slot name="extra" />
13.       
14.       <Winbtns :color="color" :minimizable="minimizable" :maximizable="maximizable" :closable="closable" :zIndex="zIndex" />
15.    
16.   
17. </template>

复制代码

Electron+Vite7封装新开多窗口

项目支持同时打开多个窗口，调用封装函数即可快速创建一个新窗口。

1. /**
2. * 创建新窗口
3. * @param {object} args 窗口配置参数 {url: '/about', width: 500, height: 300, ...}
4. */
5. export function winCreate(args) {
6.   window.electron.send('win-create', args)
7. }

复制代码

1. // 登录窗口
2. export function loginWindow() {
3.   winCreate({
4.     url: '/login',
5.     title: '登录',
6.     width: 320,
7.     height: 380,
8.     isMajor: true,
9.     resizable: false,
10.     maximizable: false,
11.     alwaysOnTop: true
12.   })
13. }
15. // 关于窗口
16. export function aboutWindow() {
17.   winCreate({
18.     url: '/win/about',
19.     title: '关于',
20.     width: 375,
21.     height: 300,
22.     minWidth: 375,
23.     minHeight: 300,
24.     maximizable: false,
25.     alwaysOnTop: true,
26.   })
27. }
29. // 设置窗口
30. export function settingWindow() {
31.   winCreate({
32.     url: '/win/setting',
33.     title: '设置',
34.     width: 550,
35.     height: 470,
36.     resizable: false,
37.     maximizable: false,
38.   })
39. }

复制代码

窗口参数配置

1. // 自定义窗口参数
2. const windowOptions = {
3.   // 窗口唯一标识id
4.   id: null,
5.   // 窗口标题
6.   title: 'Electron-ViteChat',
7.   // 窗口路由地址
8.   url: '',
9.   // 窗口数据传参
10.   data: null,
11.   // 是否是主窗口(为true则会关闭所有窗口并创建一个新窗口)
12.   isMajor: false,
13.   // 是否支持多开窗口(为true则支持创建多个窗口)
14.   isMultiple: false,
15.   // 窗口是否最大化
16.   maximize: false,
17. }
19. // 系统窗口参数(与electron的new BrowserWindow()参数一致)
20. const windowBaseOptions = {
21.   // 窗口图标
22.   icon: join(__root, 'resources/shortcut.ico'),
23.   // 是否自动隐藏菜单栏(按下Alt键显示)
24.   autoHideMenuBar: true,
25.   // 窗口标题栏样式
26.   titleBarStyle: 'hidden',
27.   // 窗口背景色
28.   backgroundColor: '#fff',
29.   // 宽度
30.   width: 840,
31.   // 高度
32.   height: 610,
33.   // 最小宽度
34.   minWidth: '',
35.   // 最小高度
36.   minHeight: '',
37.   // 窗口x坐标
38.   x: '',
39.   // 窗口y坐标
40.   y: '',
41.   // 是否可缩放
42.   resizable: true,
43.   // 是否可最小化
44.   minimizable: true,
45.   // 是否可最大化
46.   maximizable: true,
47.   // 是否可关闭
48.   closable: true,
49.   // 父窗口
50.   parent: null,
51.   // 是否模态窗口
52.   modal: false,
53.   // 窗口是否置顶
54.   alwaysOnTop: false,
55.   // 是否显示窗口边框(要创建无边框窗口，将frame参数设置为false)
56.   frame: false,
57.   // 是否透明窗口(仅frame: false有效)
58.   transparent: false,
59.   // 创建时是否显示窗口
60.   show: false,
61. }

复制代码

Electron自定义系统托盘|消息提醒

1. /**
2. * 系统托盘图标管理
3. */
4. trayManager() {
5.   if(this.tray) return
6.   const trayMenu = Menu.buildFromTemplate([
7.     {
8.       label: '打开主界面',
9.       icon: join(__root, 'resources/tray-win.png'),
10.       click: () => {
11.         this.winMain.restore()
12.         this.winMain.show()
13.       }
14.     },
15.     {
16.       label: '设置',
17.       icon: join(__root, 'resources/tray-setting.png'),
18.       click: () => this.sendByMainWin('win-ipcdata', {type: 'WINIPC_SETTINGWIN', value: null})
19.     },
20.     {
21.       label: '锁定系统',
22.       click: () => null,
23.     },
24.     {
25.       label: '关闭托盘闪烁',
26.       click: () => this.trayFlash(false)
27.     },
28.     {
29.       label: '关于',
30.       click: () => this.sendByMainWin('win-ipcdata', {type: 'WINIPC_ABOUTWIN', value: null})
31.     },
32.     {
33.       label: '退出聊天室',
34.       icon: join(__root, 'resources/tray-exit.png'),
35.       click: () => {
36.         dialog.showMessageBox(this.winMain, {
37.           title: '提示',
38.           message: '确定要退出聊天程序吗？',
39.           buttons: ['取消', '最小化托盘', '确认退出'],
40.           type: 'error',
41.           noLink: false,
42.           cancelId: 0,
43.         }).then(res => {
44.           // console.log(res)
45.           const index = res.response
46.           if(index == 0) {
47.             console.log('用户取消操作')
48.           }else if(index == 1) {
49.             console.log('最小化到托盘')
50.             this.winMain.hide()
51.           }else if(index == 2) {
52.             console.log('退出程序')
53.             this.sendByMainWin('win-ipcdata', {type: 'WINIPC_LOGOUT', value: null})
54.             app.quit()
55.           }
56.         })
57.       }
58.     }
59.   ])
60.   this.tray = new Tray(this.trayIcon)
61.   this.tray.setContextMenu(trayMenu)
62.   this.tray.setToolTip(app.name)
63.   this.tray.on('double-click', () => {
64.     console.log('tray double clicked!')
65.     this.winMain.restore()
66.     this.winMain.show()
67.   })
68.   this.tray.on('mouse-enter', (event, position) => {
69.     // console.log('鼠标划入', position)
70.     if(!this.hasFlash) return
71.     this.sendByMainWin('win-ipcdata', {type: 'WINIPC_MESSAGEWIN', value: position})
72.     // 简略消息通知
73.     /* this.tray.displayBalloon({
74.       iconType: 'none',
75.       title: 'Electron38研发组',
76.       content: 'Electron38+Vite7仿微信客户端聊天。'
77.     }) */
78.   })
79.   this.tray.on('mouse-leave', (event, position) => {
80.     // console.log('鼠标离开')
81.   })
82. }

复制代码

开启/关闭托盘图标闪烁

1. // 开启/关闭托盘闪烁
2. trayFlash(bool) {
3.   let flag = false
4.   if(bool) {
5.     if(this.trayTimer) return
6.     this.trayTimer = setInterval(() => {
7.       this.tray.setImage(flag ? this.trayIcon : this.trayEmpty)
8.       flag = !flag
9.     }, 500)
10.   }else {
11.     if(this.trayTimer) {
12.       clearInterval(this.trayTimer)
13.       this.trayTimer = null
14.     }
15.     this.tray.setImage(this.trayIcon)
16.   }
17. }

复制代码

托盘图标鼠标划入消息提醒弹窗。

1. this.tray.on('mouse-enter', (event, position) => {
2.   // console.log('鼠标划入', position)
3.   if(!this.hasFlash) return
4.   this.sendByMainWin('win-ipcdata', {type: 'WINIPC_MESSAGEWIN', value: position})
5.   // 简略消息通知
6.   /* this.tray.displayBalloon({
7.     iconType: 'none',
8.     title: 'Electron38研发组',
9.     content: 'Electron38+Vite7仿微信客户端聊天。'
10.   }) */
11. })

复制代码

1. // 托盘新消息提醒窗口
2. export function messageWindow(position) {
3.   winCreate({
4.     url: '/win/msgbox',
5.     title: '设置',
6.     width: 250,
7.     height: 120,
8.     resizable: false,
9.     movable: false,
10.     fullscreenable: false,
11.     alwaysOnTop: true,
12.     skipTaskbar: true,
13.     x: position?.x - 125,
14.     y: position?.y - 120 - 10,
15.     show: true,
16.   })
17. }

复制代码

综上就是vite7+electron38搭建仿微信客户端聊天应用的一些知识分享，希望对大家有点帮助~
最后附上几个最新实战项目

uniapp-vue3-os手机oa系统|uni-app+vue3跨三端os后台管理模板
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！