uni-app+vue3聊天系统|uniapp仿微信app-极光社区

2025最新版研发uni-app+vite5+vue3+uni-ui仿微信app界面聊天应用uniapp-wechat。

运行到H5+小程序+App端效果

null

uni-vue3-wechat包含聊天、通讯录、我的、朋友圈等模块。支持运行到小程序+h5+app端。

null

技术知识点

编辑器：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端

null

项目结构目录

整个项目使用uniapp+vue3创建模板，vue3 setup语法糖编码开发。

null

uniapp-wechat聊天项目已经更新到我的原创作品集。
uni-app+vue3+pinia2+uv-ui跨三端仿微信app聊天

null

通用布局结构

null

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

null

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