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仿微信客户端聊天系统
通用布局模板
项目整体分为左侧菜单栏+侧边栏+右侧内容区(自定义导航条)等模块。
<template>
<template v-if="!route?.meta?.isNewWin">
<slot v-if="!route?.meta?.hideMenuBar" name="menubar">
<MenuBar />
</slot>
<slot name="sidebar">
<SideBar />
</slot>
</aside>
<ToolBar v-if="!route?.meta?.hideToolBar" />
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</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自定义系统无边框拖拽窗口|导航栏
https://img2024.cnblogs.com/blog/1289798/202509/1289798-20250913075756655-606883123.png
项目自定义无边框iframe:false窗口拖拽导航栏。
<template>
<slot name="left" />
<slot name="title">{{title}}</slot>
<slot name="extra" />
<Winbtns :color="color" :minimizable="minimizable" :maximizable="maximizable" :closable="closable" :zIndex="zIndex" />
</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实例
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]