为了账号安全,请及时绑定邮箱和手机立即绑定

vite3+tauri跨平台微信客户端TauriChat

标签:
Vue.js

基于 tauri+vue3+element-plus 构建桌面端仿微信聊天项目。

图片描述

tauri-chat 支持多开窗体、主题换肤及朋友圈等功能。

图片描述

图片描述

图片描述

运用技术

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

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

tauri多窗体应用

tauri提供了多种创建新窗口的方法,而且集成了多种前端框架(vue/react/svelte)

// 关于
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,
    })
}

图片描述

tauri自定义拖拽

配置 decorations: false 参数,则创建的窗口没有顶部导航栏及边框。

tauri提供了一个标签属性 data-tauri-drag-region
在div上设置这个,则该div就可以拖动了。

<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>

图片描述

图片描述

// 关闭窗体
const handleCloseWindow = async() => {
    if(appWindow.label.indexOf('main') > -1) {
        let $el = v3layer({
            type: 'android',
            content: '确认退出应用程序吗?',
            btns: [
                {
                    text: '最小化托盘',
                    style: 'color:#24c8db',
                    click: () => {
                        $el.close()
                        await appWindow.hide()
                    }
                },
                {
                    text: '退出程序',
                    style: 'color:#ff5438',
                    click: async() => {
                        $el.close()
                        store.commit('LOGOUT')
                        await exit()
                    }
                }
            ]
        })
    }else {
        await appWindow.close()
    }
}

OK,基于Vue3+Tauri开发桌面聊天实例就分享这么多,后续还会分享一些实例项目。

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
94

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消