最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】

最新研发Uniapp+Vue3+Pinia2+uvui实战跨端仿微信App界面聊天程序。

uni-vue3-wechat：基于uniapp+vue3从0-1实战搭建仿微信app界面聊天模板。包含聊天、通讯录、我的、朋友圈等模块，实现消息+emo混排、仿微信长按语音效果、图片/视频预览、红包等功能。支持运行到H5+小程序+APP端。

运行效果

编译运行到H5+小程序端+APP端。

使用技术

• 编辑器：HbuilderX 4.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-wechat聊天项目支持运行到小程序+h5+app端，且效果基本保持一致性。

项目结构目录

基于uni-app+vue3搭建项目模板，使用vue3 setup语法编码开发。

uniapp-wechat聊天项目已经更新到我的原创作品集，感谢支持！

uni-app+vue3+pinia2+uv-ui跨三端仿微信app聊天

支持运行到h5在pc端以750px宽度显示布局。

公共布局模板

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

  

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

uniapp+vue3自定义导航栏+tabbar菜单

自定义导航栏和tabbar组件在components目录下。

具体的实现过程就不详细介绍了，感兴趣的话可以去看看之前的这篇分享。

https://www.cnblogs.com/xiaoyan2017/p/14978408.html

uni-app+vue3聊天功能

uniapp+vue3自定义加强版编辑输入框。支持高亮边框、单行(input)+多行(textarea)输入模式，自定义前缀/后缀图标。

综上就是uniapp+vue3实战聊天app项目的一些分享，希望对大家有些帮助！

附上几个最新项目实例

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用

最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】

Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板

Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板

vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果

flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例

uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)

Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用

Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板

Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe