vue3-tauri-chat：基于tauri聊天实例|tauri仿微信客户端

Vue3.js+Tauri桌面端聊天实例|tauri仿微信/QQ聊天TauriChat。

基于tauri+vite3.x+vue3+element-plus等技术开发客户端仿微信/QQ聊天实战案例。实现发送消息、预览图片/视频/网址链接、拖拽/粘贴发送图片、朋友圈等功能。

使用技术

编辑器：VScode
使用技术：tauri+vue^3.2.37+vite^3.0.2+vuex4+vue-router@4
UI组件库：element-plus^2.2.17 (饿了么vue3组件库)
弹窗组件：v3layer（基于vue3自定义pc端弹窗组件）
滚动条组件：v3scroll（基于vue3模拟滚动条组件）
矢量图标：阿里iconfont字体图标库

项目结构目录

tauri新开多窗体

tauri官网提供了几种创建新窗口的方法，这里封装了一种前端方法。

// 关于
const openAboutWin = () => {createWin({label: 'about',title: '关于',url: '/about',width: 430,height: 330,resizable: false,alwaysOnTop: true,})
}// 主题换肤
const openThemeSkinWin = () => {createWin({label: 'skin',title: '换肤',url: '/skin',width: 630,height: 400,resizable: false,})
}// 朋友圈
const openQzoneWin = () => {createWin({label: 'fzone',title: '朋友圈',url: '/fzone',width: 550,height: 700,resizable: false,})
}

vue3+tauri 创建多开窗口桌面应用_xiaoyan_2018的博客-CSDN博客_tauri 例子

tauri自定义拖拽窗体

配置decorations: false，创建的窗口会无边框及导航操作。

tauri设置 data-tauri-drag-region 属性，该区域就能自由拖拽了。

<template><div class="nt__navbar"><div data-tauri-drag-region class="nt__navbar-wrap"><div class="nt__navbar-title"><template v-if="$slots.title"><slot name="title" /></template><template v-else>{{title}}</template></div></div><WinTool :minimizable="minimizable" :maximizable="maximizable" :closable="closable"><slot name="wbtn" /></WinTool></div>
</template>

tauri+vite3创建登录窗口|tauri自定义拖拽区域_xiaoyan_2018的博客-CSDN博客

tauri创建系统托盘

/*** 创建系统托盘图标Tray*/use tauri::{AppHandle, Manager, CustomMenuItem, SystemTray, SystemTrayEvent, SystemTrayMenu, SystemTrayMenuItem, SystemTraySubmenu
};// 托盘菜单
pub fn menu() -> SystemTray {let exit = CustomMenuItem::new("exit".to_string(), "退出");let relaunch = CustomMenuItem::new("relaunch".to_string(), "重启应用");let show = CustomMenuItem::new("show".to_string(), "显示窗口");let hide = CustomMenuItem::new("hide".to_string(), "隐藏窗口");let change_ico = CustomMenuItem::new("change_ico".to_string(), "更换托盘图标");let tray_menu = SystemTrayMenu::new().add_submenu(SystemTraySubmenu::new("国际化", // 语言菜单SystemTrayMenu::new().add_item(CustomMenuItem::new("lang_english".to_string(), "English")).add_item(CustomMenuItem::new("lang_zh_CN".to_string(), "简体中文")).add_item(CustomMenuItem::new("lang_zh_HK".to_string(), "繁体中文")),)).add_native_item(SystemTrayMenuItem::Separator) // 分割线.add_item(change_ico).add_native_item(SystemTrayMenuItem::Separator).add_item(hide).add_item(show).add_native_item(SystemTrayMenuItem::Separator).add_item(relaunch).add_item(exit);SystemTray::new().with_menu(tray_menu)
}// 托盘事件
pub fn handler(app: &AppHandle, event: SystemTrayEvent) {match event {SystemTrayEvent::LeftClick {position: _,size: _,..} => {println!("点击左键");}SystemTrayEvent::RightClick {position: _,size: _,..} => {println!("点击右键");}SystemTrayEvent::DoubleClick {position: _,size: _,..} => {println!("双击");app.emit_all("win-show", {}).unwrap();}SystemTrayEvent::MenuItemClick { id, .. } => match id.as_str() {// 更新托盘图标"change_ico" => {app.tray_handle().set_icon(tauri::Icon::Raw(include_bytes!("../icons/tray-empty.ico").to_vec())).unwrap();}// 选择语言，匹配 id 前缀包含 `lang_` 的事件lang if lang.contains("lang_") => {Lang::new(app,id,vec![Lang {name: "English",id: "lang_english",},Lang {name: "繁体中文",id: "lang_zh_HK",},Lang {name: "简体中文",id: "lang_zh_CN",},],);}"hide" => {// println!("点击隐藏");app.emit_all("win-hide", {}).unwrap();}"show" => {// println!("点击显示");app.emit_all("win-show", {}).unwrap();}"relaunch" => {// println!("点击重启");app.emit_all("win-relaunch", {}).unwrap();}"exit" => {// println!("点击退出");app.emit_all("win-exit", {}).unwrap();}_ => {}},_ => {}}
}struct Lang<'a> {name: &'a str,id: &'a str,
}impl Lang<'static> {fn new(app: &AppHandle, id: String, langs: Vec<Lang>) {// 获取点击的菜单项的句柄langs.iter().for_each(|lang| {let handle = app.tray_handle().get_item(lang.id);if lang.id.to_string() == id.as_str() {// 设置菜单名称handle.set_title(format!("  {}", lang.name)).unwrap();handle.set_selected(true).unwrap();} else {handle.set_title(lang.name).unwrap();handle.set_selected(false).unwrap();}});}
}

vue3-tauri-chat：基于tauri聊天实例|tauri仿微信客户端相关推荐

html5做探探,基于Nuxt.js+Vue聊天实例|nuxt仿微信/探探聊天界面
1.项目简介 Nuxt.js是目前比较热门的服务端渲染SSR框架.凭借其更好的SEO.更快的内容到达时间(*首屏渲染速度快*) 加之基于Vue.js技术开发,更易于上手,获得了很多技术开发者的青睐. ...
flutter图片聊天泡泡_基于 Flutter+Dart 聊天实例 | Flutter 仿微信界面聊天室
1.项目介绍 Flutter是目前比较流行的跨平台开发技术,凭借其出色的性能获得很多前端技术爱好者的关注,比如阿里闲鱼,美团,腾讯等大公司都有投入相关案例生产使用. flutter_chatroom项 ...
flutter图片聊天泡泡_flutter/dart聊天实例|flutter仿微信
> Flutter 是 Google 开源的 UI 框架,能高效构建多平台精美应用. > [FlutterChat聊天室项目](https://juejin.im/post/5ebb5c4 ...
一款基于微客服的仿微信的聊天软件
一款基于微客服的仿微信的聊天软件服务分类: 其它开发,推送使用服务: 微客服 , 小米推送功能分类: 社交支持平台: Android 运行环境: Android 开发语言: Java 开发工具 ...
【源码分享下载】一款基于微客服的仿微信的聊天软件
一款基于微客服的仿微信的聊天软件服务分类: 其它开发,推送使用服务: 微客服 , 小米推送功能分类: 社交支持平台: Android 运行环境: Android 开发语言: Java 开发工具 ...
nuxt-chat聊天室|vue仿微信/探探界面nuxt+vue+vuex|朋友圈
Nuxt-Chatroom 基于Nuxt.js+Vue.js仿微信|探探App界面聊天社交运用nuxt.js+vue.js+vuex+vpopup+vant+webpack等技术架构开发的社交聊天室 ...
vue + element-ui 聊天_vue网页版聊天Vue+ElementUI仿微信界面聊天实例
vue+vuex+vue-cli+vue-router+element-ui+swiper等技术开发仿微信pc端界面聊天应用,实现了发送消息+表情(动图gif).图片/视频预览.右键长按菜单.红包/朋 ...
native聊天界面 react_ReactNative 仿微信聊天 App 实例分享|RN 仿朋友圈
今天给大家分享的是 RN 聊天室项目,基于 react-native+react-navigation+react-redux+react-native-image-picker+rnPop 等技术实 ...
h5聊天页面 jquery_HTML5仿微信聊天界面、微信朋友圈实例代码
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...