2025跨端uniapp+vue3+uv-ui实战仿微信app聊天模板

最新推荐文章于 2025-09-18 09:52:43 发布

原创最新推荐文章于 2025-09-18 09:52:43 发布 · 置顶 · 1.5k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp仿微信 #uniapp聊天app #uniapp+vue3聊天 #uni-vue3-wechat #uniapp+vue3仿微信 #uniapp+vue3聊天室

uni-app实例同时被 2 个专栏收录

21 篇文章

订阅专栏

uniapp+vue3

17 篇文章

订阅专栏

2025最新版研发uni-app+vue3仿微信聊天app应用Uniapp-Wechat。

uni-vue3-wechat：原创基于uniapp+vue3+vite5+pinia2+uv-ui搭建仿微信app界面聊天系统。包含聊天、通讯录、我的三大模块，实现消息+emo混排、仿微信长按语音效果、图片/视频预览、红包/朋友圈等功能。支持运行到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-wechat聊天项目已经更新到我的原创作品集。
uni-app+vue3+pinia2+uv-ui跨三端仿微信app聊天

在这里插入图片描述

项目框架结构

在这里插入图片描述

uni-vue3-wechat项目使用uniapp+vue3搭建项目模板，采用vue3 setup语法糖编码。

在这里插入图片描述
支持编译到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自定义导航条

在这里插入图片描述

uniapp+vue3聊天模块

在这里插入图片描述
自定义加强版编辑输入框。支持高亮边框、单行(input)+多行(textarea)输入模式，自定义前缀/后缀图标。

在这里插入图片描述

<view class="uv3__chattoolbar" :style="{'padding-bottom': fixPaddingBottom}">
	<!-- 输入框 -->
	<view class="uv3__chattoolbar-editor flexbox">
		<view class="btn" @click="handleVoice"><text class="uv3-icon" :class="voiceBtnEnable ? 'uv3-icon-voice' : 'uv3-icon-keyboard'"></text></view>
		<view class="editor flex1">
			<template v-if="voiceBtnEnable">
				<uv3-input
					v-model="editorValue"
					type="textarea"
					:autosize="{maxRows: 6}"
					:autofocus="autofocus"
					:cursor="editorLastCursor"
					clearable
					style="width: 100%;"
					@input="handleEditorInput"
					@focus="handleEditorFocus"
					@blur="handleEditorBlur"
				/>
			</template>
			<template v-else>
				<view class="uv3__voice-handle flexbox" @touchstart.prevent="handleTouchStart" @touchmove="handleTouchUpdate" @touchend="handleTouchEnd">{{voiceTypeMap[voiceType]}}</view>
			</template>
		</view>
		<view class="btn" @click="handleEmojPlusView(0)" @mousedown.prevent><text class="uv3-icon uv3-icon-face"></text></view>
		<view class="btn" @click="handleEmojPlusView(1)"><text class="uv3-icon uv3-icon-plus"></text></view>
		<view class="btn" @click="handleSend" @mousedown.prevent><view class="send flexbox"><uni-icons type="arrow-up" color="#fff" size="16"></uni-icons></view></view>
	</view>
	
	<!-- 操作栏 -->
	<view v-show="showToolbar" class="uv3__chattoolbar-operate">
		<!-- 表情 -->
		<view v-show="toolbarIndex == 0" class="uv3__chattoolbar-emotion flexbox flex-col">
			<view class="uv3__emotion-tabs flexbox flex-alignc">
				<view v-for="(item, index) in emojList" :key="index" class="item" :class="{'on': item.selected}" @click="handleEmojTab(index)">
					<text v-if="item.type=='emoj'" class="emoj uv3-icon uv3-icon-face"></text>
					<image v-else :src="item.pathLabel" />
				</view>
			</view>
			<view v-for="(item, index) in emojList" :key="index" class="uv3__emotion-cells flex1" :class="{'active': item.selected}">
				<view class="flexbox" :class="item.type == 'emoj' ? 'emojwrap' : 'gifwrap'">
					<view v-for="(emoj, key) in item.nodes" :key="key" class="cells flexbox">
						<view class="item">
							<text v-if="item.type=='emoj'" class="emoj" @click="handleEmojClick(emoj)">{{emoj}}</text>
							<image v-else :src="emoj" class="gif" @click="handleGifClick(emoj)" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 操作栏 -->
		<view v-show="toolbarIndex == 1" class="uv3__chattoolbar-pluschoose flexbox">
			<view v-for="(item, index) in chooseList" :key="index" class="uv3__plusbtns-cells" @click="handlePlusAction(item)">
				<view class="icon flexbox"><image :src="item.icon" /></view>
				<view class="label">{{item.label}}</view>
			</view>
		</view>
	</view>
</view>