最新研发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聊天项目已经更新到我的原创作品集，感谢支持！
通用布局模板
项目整体分为左侧菜单栏+侧边栏+右侧内容区(自定义导航条)等模块。
<template> <template v-if="!route?.meta?.isNewWin"> <div class="vu__container flexbox flex-alignc flex-justifyc" :style="{'--themeSkin': appstate.config.skin}" > <div class="vu__layout flexbox flex-col"> <div class="vu__layout-body flex1 flexbox" @contextmenu.prevent> <!-- 菜单栏 --> <slot v-if="!route?.meta?.hideMenuBar" name="menubar"> <MenuBar /> </slot> <!-- 侧边栏 --> <div v-if="route?.meta?.showSideBar" class="vu__layout-sidebar flexbox"> <aside class="vu__layout-sidebar__body flexbox flex-col"> <slot name="sidebar"> <SideBar /> </slot> </aside> </div> <!-- 主内容区 --> <div class="vu__layout-main flex1 flexbox flex-col"> <ToolBar v-if="!route?.meta?.hideToolBar" /> <router-view v-slot="{ Component, route }"> <keep-alive> <component :is="Component" :key="route.path" /> </keep-alive> </router-view> </div> </div> </div> </div> </template> <template v-else> <WinLayout /> </template> </template>
Electron主进程/预加载文件配置
/** * electron主进程配置 * @author andy */ import { app, BrowserWindow } from 'electron' import { WindowManager } from '../src/windows/index.js' // 忽略安全警告提示 Electron Security Warning (Insecure Content-Security-Policy) process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = true const createWindow = () => { let win = new WindowManager() win.create({isMajor: true}) // 系统托盘管理 win.trayManager() // 监听ipcMain事件 win.ipcManager() } app.whenReady().then(() => { createWindow() app.on('activate', () => { if(BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if(process.platform !== 'darwin') app.quit() })
/** * electron预加载文件配置 * @author andy */ import { contextBridge, ipcRenderer } from 'electron' contextBridge.exposeInMainWorld( 'electron', { // 通过 channel 向主进程发送异步消息。主进程使用 ipcMain.on() 监听 channel send: (channel, args) => { ipcRenderer.send(channel, args) }, // 通过 channel 向主进程发送消息，并异步等待结果。主进程应该使用 ipcMain.handle() 监听 channel invoke: (channel, args) => { return new Promise(resolve => ipcRenderer.invoke(channel, args).then(data => resolve(data)).catch(e => console.log(e))) }, // 监听 channel 事件 on: (channel, func) => { console.log('receive event') ipcRenderer.on(channel, (event, ...args) => func(event, ...args)) }, // 一次性监听事件 once: (channel, func) => { ipcRenderer.once(channel, (event, ...args) => func(event, ...args)) }, setTitle: (title) => ipcRenderer.send('win-setTitle', title) } )
Electron+Vue3自定义系统无边框拖拽窗口|导航栏
项目自定义无边框iframe:false窗口拖拽导航栏。
<script setup> import { ref } from 'vue' import { isTrue } from '@/utils' import { winSet } from '@/windows/actions' import Winbtns from './btns.vue' const props = defineProps({ // 标题 title: {type: String, default: ''}, // 标题颜色 color: String, // 背景色 background: String, // 标题是否居中 center: {type: [Boolean, String], default: false}, // 是否固定 fixed: {type: [Boolean, String], default: false}, // 背景是否镂空 transparent: {type: [Boolean, String], default: false}, // 层级 zIndex: {type: [Number, String], default: 2024}, /* 控制Winbtn参数 */ // 窗口是否可最小化 minimizable: {type: [Boolean, String], default: true}, // 窗口是否可最大化 maximizable: {type: [Boolean, String], default: true}, // 窗口是否可关闭 closable: {type: [Boolean, String], default: true}, }) </script> <template> <div class="ev__winbar" :class="{'fixed': fixed || transparent, 'transparent': transparent}"> <div class="ev__winbar-wrap flexbox flex-alignc vu__drag"> <div class="ev__winbar-body flex1 flexbox flex-alignc"> <!-- 左侧区域 --> <div class="ev__winbar-left"><slot name="left" /></div> <!-- 标题 --> <div class="ev__winbar-title" :class="{'center': center}"> <slot name="title">{{title}}</slot> </div> <!-- 右侧附加区域 --> <div class="ev__winbar-extra vu__undrag"><slot name="extra" /></div> </div> <Winbtns :color="color" :minimizable="minimizable" :maximizable="maximizable" :closable="closable" :zIndex="zIndex" /> </div> </div> </template>
Electron+Vite7封装新开多窗口
项目支持同时打开多个窗口，调用封装函数即可快速创建一个新窗口。
/** * 创建新窗口 * @param {object} args 窗口配置参数 {url: '/about', width: 500, height: 300, ...} */ export function winCreate(args) { window.electron.send('win-create', args) }
// 登录窗口 export function loginWindow() { winCreate({ url: '/login', title: '登录', width: 320, height: 380, isMajor: true, resizable: false, maximizable: false, alwaysOnTop: true }) } // 关于窗口 export function aboutWindow() { winCreate({ url: '/win/about', title: '关于', width: 375, height: 300, minWidth: 375, minHeight: 300, maximizable: false, alwaysOnTop: true, }) } // 设置窗口 export function settingWindow() { winCreate({ url: '/win/setting', title: '设置', width: 550, height: 470, resizable: false, maximizable: false, }) }
窗口参数配置
// 自定义窗口参数 const windowOptions = { // 窗口唯一标识id id: null, // 窗口标题 title: 'Electron-ViteChat', // 窗口路由地址 url: '', // 窗口数据传参 data: null, // 是否是主窗口(为true则会关闭所有窗口并创建一个新窗口) isMajor: false, // 是否支持多开窗口(为true则支持创建多个窗口) isMultiple: false, // 窗口是否最大化 maximize: false, } // 系统窗口参数(与electron的new BrowserWindow()参数一致) const windowBaseOptions = { // 窗口图标 icon: join(__root, 'resources/shortcut.ico'), // 是否自动隐藏菜单栏(按下Alt键显示) autoHideMenuBar: true, // 窗口标题栏样式 titleBarStyle: 'hidden', // 窗口背景色 backgroundColor: '#fff', // 宽度 width: 840, // 高度 height: 610, // 最小宽度 minWidth: '', // 最小高度 minHeight: '', // 窗口x坐标 x: '', // 窗口y坐标 y: '', // 是否可缩放 resizable: true, // 是否可最小化 minimizable: true, // 是否可最大化 maximizable: true, // 是否可关闭 closable: true, // 父窗口 parent: null, // 是否模态窗口 modal: false, // 窗口是否置顶 alwaysOnTop: false, // 是否显示窗口边框(要创建无边框窗口，将frame参数设置为false) frame: false, // 是否透明窗口(仅frame: false有效) transparent: false, // 创建时是否显示窗口 show: false, }
Electron自定义系统托盘|消息提醒
/** * 系统托盘图标管理 */ trayManager() { if(this.tray) return const trayMenu = Menu.buildFromTemplate([ { label: '打开主界面', icon: join(__root, 'resources/tray-win.png'), click: () => { this.winMain.restore() this.winMain.show() } }, { label: '设置', icon: join(__root, 'resources/tray-setting.png'), click: () => this.sendByMainWin('win-ipcdata', {type: 'WINIPC_SETTINGWIN', value: null}) }, { label: '锁定系统', click: () => null, }, { label: '关闭托盘闪烁', click: () => this.trayFlash(false) }, { label: '关于', click: () => this.sendByMainWin('win-ipcdata', {type: 'WINIPC_ABOUTWIN', value: null}) }, { label: '退出聊天室', icon: join(__root, 'resources/tray-exit.png'), click: () => { dialog.showMessageBox(this.winMain, { title: '提示', message: '确定要退出聊天程序吗？', buttons: ['取消', '最小化托盘', '确认退出'], type: 'error', noLink: false, cancelId: 0, }).then(res => { // console.log(res) const index = res.response if(index == 0) { console.log('用户取消操作') }else if(index == 1) { console.log('最小化到托盘') this.winMain.hide() }else if(index == 2) { console.log('退出程序') this.sendByMainWin('win-ipcdata', {type: 'WINIPC_LOGOUT', value: null}) app.quit() } }) } } ]) this.tray = new Tray(this.trayIcon) this.tray.setContextMenu(trayMenu) this.tray.setToolTip(app.name) this.tray.on('double-click', () => { console.log('tray double clicked!') this.winMain.restore() this.winMain.show() }) this.tray.on('mouse-enter', (event, position) => { // console.log('鼠标划入', position) if(!this.hasFlash) return this.sendByMainWin('win-ipcdata', {type: 'WINIPC_MESSAGEWIN', value: position}) // 简略消息通知 /* this.tray.displayBalloon({ iconType: 'none', title: 'Electron38研发组', content: 'Electron38+Vite7仿微信客户端聊天。' }) */ }) this.tray.on('mouse-leave', (event, position) => { // console.log('鼠标离开') }) }
开启/关闭托盘图标闪烁
// 开启/关闭托盘闪烁 trayFlash(bool) { let flag = false if(bool) { if(this.trayTimer) return this.trayTimer = setInterval(() => { this.tray.setImage(flag ? this.trayIcon : this.trayEmpty) flag = !flag }, 500) }else { if(this.trayTimer) { clearInterval(this.trayTimer) this.trayTimer = null } this.tray.setImage(this.trayIcon) } }
托盘图标鼠标划入消息提醒弹窗。
this.tray.on('mouse-enter', (event, position) => { // console.log('鼠标划入', position) if(!this.hasFlash) return this.sendByMainWin('win-ipcdata', {type: 'WINIPC_MESSAGEWIN', value: position}) // 简略消息通知 /* this.tray.displayBalloon({ iconType: 'none', title: 'Electron38研发组', content: 'Electron38+Vite7仿微信客户端聊天。' }) */ })
// 托盘新消息提醒窗口 export function messageWindow(position) { winCreate({ url: '/win/msgbox', title: '设置', width: 250, height: 120, resizable: false, movable: false, fullscreenable: false, alwaysOnTop: true, skipTaskbar: true, x: position?.x - 125, y: position?.y - 120 - 10, show: true, }) }
综上就是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实例
