uniapp-vue3-chat：基于uniapp+vue3纯手撸仿微信app界面聊天实例。包含聊天、通讯录、我的、朋友圈等模块，实现消息/emo、仿微信长按语音效果、图片/视频预览、红包等功能。支持运行到web+小程序+app端。

项目知识点

• 开发工具：HbuilderX4.75
  
• 跨端框架：uni-app+vue3+pinia2+vite5
  
• 状态管理：pinia2
  
• 组件库：uni-ui+uv-ui（uniapp+vue3组件库）
  
• 弹框组件：uv3-popup（自定义uniapp+vue3多端弹框组件）
  
• 自定义组件：uv3-navbar导航栏+uv3-tabbar菜单栏
  
• 缓存技术：pinia-plugin-unistorage
  
• 支持编译：h5+小程序+app端

项目结构目录

使用最新跨端框架uniapp+vue3搭建项目模板，采用vue3 setup语法编码开发页面。

通用布局模板

整体分为顶部导航栏+主内容区+底部操作栏三大部分。

<!-- #ifdef MP-WEIXIN -->
<script>
    export default {
        /**
         * 解决小程序class、id透传问题
         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效，组件外部传入的class没有挂到组件根节点上
         * https://github.com/dcloudio/uni-ui/issues/753
         */
        options: { virtualHost: true }
    }
</script>
<!-- #endif -->

<script setup>
    const props = defineProps({
        // 是否显示自定义tabbar
        showTabBar: { type: [Boolean, String], default: false },
    })
</script>

<template>
    <view class="uv3__container flexbox flex-col flex1">
        <!-- 顶部插槽 -->
        <slot name="header" />
        
        <!-- 内容区 -->
        <view class="uv3__scrollview flex1">
            <slot />
        </view>
        
        <!-- 底部插槽 -->
        <slot name="footer" />
        
        <!-- tabbar栏 -->
        <uv3-tabbar v-if="showTabBar" hideTabBar fixed />
    </view>
</template>

原创开发不易，感谢小伙伴的阅读与支持，后续还会继续分享更多优质项目。

Flutter3.32实战桌面端OS系统|flutter3仿macOS桌面

flutter3.27跨平台仿微信客户端聊天Exe程序|朋友圈|短视频

原创uniapp+vite5+vue3+uv-ui跨三端短视频+直播+聊天app应用

uni-app+deepseek-v3跨三端ai流式输出对话模板

flutter3+deepseek手机端ai流式输出聊天模板

实战跨平台Electron35+DeepSeek-V3搭建客户端AI模板

deepseek-v3+vue3.5网页版webai流式对话模板

Flutter3.27跨平台仿抖音商城|flutter3.x实战短视频+直播+聊天程序

原创tauri2.0+vue3.5+element-plus桌面版后台管理系统

Electron32-Vite5-OS跨平台os模板|electron32+vue3通用os系统

Electron31_Vite5_Wechat跨平台聊天实例|electron31仿微信实战