今天给大家分享一款最新原创研发的Tauri2.0+Vue3 setup
仿微信EXE聊天应用。
vue3-tauri2-winchat一款基于最新跨平台技术tauri2.0+vite5+vue3+pinia2+element-plus
搭建的仿微信客户端界面聊天实例项目。
支持tauri多窗口管理、主题壁纸、自定义系统托盘功能。实现聊天、联系人、收藏、朋友圈、短视频、我的等页面模块。
技术栈
- 编辑器:vsode
- 技术框架:tauri2.0+vite^5.4+vue^3.5+vue-router^4.4.5
- 状态管理:pinia^2.2.2
- 本地存储:pinia-plugin-persistedstate^4.0.2
- UI组件库:element-plus^2.8.3
- 富文本编辑器:@vueup/vue-quill^1.2.0
- 样式预处理:sass^1.79.3
- 小视频滑动组件:swiper^11.1.14
目前该项目tauri2-vue3chat已经同步到我的原创作品集。
taurichat公共模板
<template>
<div class="vu__chatbox">
<template v-if="!route?.meta?.isNewWin">
<div class="vu__container flexbox flex-alignc flex-justifyc">
<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>
</div>
</template>
tauri2.0封装多窗口
// 朋友圈窗口
const handleFzone = () => {
winCreate({
label: 'win-fzone',
url: '/win/fzone',
title: '朋友圈',
width: 500,
height: 695,
minWidth: 350,
minHeight: 500,
maximizable: false,
})
}
// 短视频窗口
const handleFvideo = () => {
winCreate({
label: 'win-fvideo',
url: '/win/fvideo',
title: '短视频',
width: 575,
height: 675,
minWidth: 415,
minHeight: 545
})
}
// 换肤壁纸窗口
const handleSkin = () => {
winCreate({
label: 'win-skin',
url: '/win/skin',
title: '壁纸',
width: 375,
height: 480,
resizable: false,
maximizable: false,
visible: true,
})
}
// 界面管理器
const handleManageUI = () => {
winCreate({
label: 'win-manage',
url: '/win/manage',
title: '界面管理器',
width: 320,
height: 360,
resizable: false,
maximizable: false,
})
}
之前有过一篇分享文章,感兴趣的可以去看看。
基于Tauri2+Vue3搭建桌面端程序|tauri2+vite5多窗口|消息提醒|托盘闪烁
tauri2.0自定义无边框圆角阴影窗口
创建窗口的时候设置 decorations: false
,transparent: true
,shadow: false
参数, 即可实现自定义圆角阴影窗口。
.vu__chatbox {height: calc(100vh); padding: 5px; overflow: hidden;}
.vu__layout {
background-color: #f5f5f5;
overflow: hidden;
height: 100%; width: 100%;
position: relative; z-index: 100;
border-radius: 8px;
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.15),0 1px 5px -1px rgba(0, 0, 0, 0.1),0 2px 5px rgba(0, 0, 0, 0.1);
}
<script setup>
/**
* tauri2.0自定义系统最大化/最小化/关闭 by andy Q:282310962
*/
// ...
const props = defineProps({
color: String,
// 窗口是否可最小化
minimizable: {type: [Boolean, String], default: true},
// 窗口是否可最大化
maximizable: {type: [Boolean, String], default: true},
// 窗口是否可关闭
closable: {type: [Boolean, String], default: true},
// 层级
zIndex: {type: [Number, String], default: 2024},
// 关闭前回调,会暂停实例关闭 function(done),done用于关闭
beforeClose: Function
})
const hasMaximized = ref(false)
const isResizable = ref(true)
const isMaximizable = ref(true)
// 用户是否可以手动调整窗口大小
getCurrentWindow().isResizable().then(res => {
isResizable.value = res
})
// 窗口是否可以最大化
getCurrentWindow().isMaximizable().then(res => {
isMaximizable.value = res
})
// 初始监听窗口是否最大化
getCurrentWindow().isMaximized().then(res => {
hasMaximized.value = res
})
// 实时监听窗口是否最大化
listen('tauri://resize', async() => {
hasMaximized.value = await getCurrentWindow().isMaximized()
})
// 最小化
const handleWinMin = async() => {
// winSet('minimize')
await getCurrentWindow().minimize()
}
// 最大化/还原
const handleWinToggle = async() => {
// winSet('max2min')
await getCurrentWindow().toggleMaximize()
}
// 关闭
const handleClose = async() => {
const isMajor = getCurrentWindow().label.indexOf('main') > -1
if(isMajor) {
let el = layer({
type: 'android',
content: '是否最小化到托盘,不退出程序?',
layerStyle: 'background: #f9f9f9; border-radius: 8px;',
closable: false,
resize: false,
btns: [
{
text: '最小化托盘',
style: 'color: #646cff',
click: () => {
layer.close(el)
// winSet('hide')
await getCurrentWindow().hide()
}
},
{
text: '退出程序',
style: 'color: #fa5151',
click: async() => {
authstate.logout()
await exit()
}
}
]
})
}else {
// winSet('close')
await getCurrentWindow().close()
}
}
</script>
<template>
<div class="ev__winbtns vu__drag" :style="{'z-index': zIndex}">
<div class="ev__winbtns-actions vu__undrag" :style="{'color': color}">
<a v-if="isTrue(minimizable)" class="wbtn min" title="最小化" @click="handleWinMin"><i class="wicon elec-icon elec-icon-min"></i></a>
<a v-if="isTrue(maximizable) && isResizable && isMaximizable" class="wbtn toggle" :title="hasMaximized ? '向下还原' : '最大化'" @click="handleWinToggle">
<i class="wicon elec-icon iconfont" :class="hasMaximized ? 've-icon-shrink' : 've-icon-arrowsalt'"></i>
</a>
<a v-if="isTrue(closable)" class="wbtn close" title="关闭" @click="handleClose"><i class="wicon elec-icon elec-icon-quit"></i></a>
</div>
</div>
</template>
tauri2.0创建系统托盘|托盘右键菜单
/**
* 自定义托盘图标
*/
use tauri::{
tray::{MouseButton, TrayIconBuilder, TrayIconEvent}, Emitter, Manager, Runtime
};
pub fn tray_create<R: Runtime>(app: &tauri::AppHandle<R>) -> tauri::Result<()> {
let _ = TrayIconBuilder::with_id("tray")
.tooltip("TAURI-WINCHAT")
.icon(app.default_window_icon().unwrap().clone())
.on_tray_icon_event(|tray, event| match event {
TrayIconEvent::Click {
id: _,
position,
rect: _,
button,
button_state: _,
} => match button {
MouseButton::Left {} => {
let windows = tray.app_handle().webview_windows();
for (key, value) in windows {
println!("点击左键: {}", key);
if key == "main-login" || key == "main" {
value.show().unwrap();
value.unminimize().unwrap();
value.set_focus().unwrap();
}
}
}
MouseButton::Right {} => {
println!("点击右键");
tray.app_handle().emit("tray_contextmenu", position).unwrap();
}
_ => {}
},
TrayIconEvent::Enter {
id: _,
position,
rect: _,
} => {
println!("鼠标滑过托盘");
tray.app_handle().emit("tray_mouseenter", position).unwrap();
}
TrayIconEvent::Leave {
id: _,
position,
rect: _,
} => {
println!("鼠标离开托盘");
tray.app_handle().emit("tray_mouseleave", position).unwrap();
}
_ => {}
})
.build(app);
Ok(())
}
托盘右键菜单模板
<template>
<div class="vu__traymenu" @click="handleTrayMenu">
<template v-if="authstate.authorization">
<a class="menu"><img src="/static/tray-online.png" />我在线上</a>
<a class="menu"><img src="/static/tray-busy.png" />忙碌</a>
<a class="menu"><img src="/static/tray-nodisturb.png" />请勿打扰</a>
<a class="menu"><img src="/static/tray-hide.png" />隐身</a>
<a class="menu"><img src="/static/tray-offline.png" />离线</a>
<a class="menu" @click="winTrayFlash(false)">关闭头像闪动</a>
<a class="menu" @click="handleSetting">设置</a>
<a class="menu" @click="handleAbout">关于</a>
<a class="menu" @click="handleMainWin"><el-icon size="12"><Monitor /></el-icon>打开主面板</a>
</template>
<a class="menu" @click="handleLogout"><el-icon size="12" color="red"><SwitchButton /></el-icon>退出</a>
</div>
</template>
tauri2-vue3-wechat聊天项目涉及到的知识点还是蛮多的,就先暂时分享到这里。
https://segmentfault.com/a/1190000045245775
https://segmentfault.com/a/1190000045186093
https://segmentfault.com/a/1190000045042968
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。