uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈

天山玉米 發表於 2024-4-29 13:56:00

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈

原创研发uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。
uni-vue3-wchat基于uni-app+vue3+pinia2+uni-ui+uv-ui等技术跨端仿制微信App界面聊天项目，支持编译到H5+小程序端+App端。实现编辑框多行消息/emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。
<h3>预览图</h3>
编译至h5+App端+小程序端运行效果
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429104600484-2017148452.png">
<h3>技术栈</h3>
<ul>
<li>开发工具：HbuilderX 4.0.8</li>
<li>技术框架：Uniapp+Vue3+Pinia2+Vite4.x</li>
<li>UI组件库：uni-ui+uv-ui（uniapp+vue3组件库）</li>
<li>弹框组件：uv3-popup（自定义uniapp+vue3多端弹框组件）</li>
<li>自定义组件：uv3-navbar导航栏+uv3-tabbar菜单栏</li>
<li>缓存技术：pinia-plugin-unistorage</li>
<li>支持编译：H5+小程序+APP端</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429105544788-2101587551.png">
目前uni-app对vue3支持性已经蛮不错了。之前也有给大家分享一款uniapp+vue3短视频/直播商城项目。
https://www.cnblogs.com/xiaoyan2017/p/17938517
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429110135179-1354116860.gif">
uniapp-vue3-wchat基于最新跨端技术开发，支持编译H5/小程序端/APP端，运行效果基本保持一致。
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429110650434-1794075979.gif">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429110859812-563109761.gif">
<h3>项目构建目录</h3>
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429111152644-2113050138.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429111326793-1942174310.gif">
支持在pc端以750px像素布局显示。
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429113527025-316426662.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429113354730-322257750.png">
<blockquote>
<h4>目前uni-wechat项目同步上线到我的作品集，如果恰好有需要，欢迎自行去拍哈~ 感谢小伙伴们的支持！</h4>
原创uni-app+vue3+uv-ui跨端仿微信app聊天室
</blockquote>
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114116892-1736087261.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114131290-1699985429.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114145003-1526228696.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114202901-92438248.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114225086-1500861339.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114244188-2127645144.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114304236-2147130971.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114333253-168883784.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114419597-1549138500.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114440163-891327798.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114455937-1546541771.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114529258-1087863798.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114608434-1764126937.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114635423-358536981.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114658496-1168128034.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114716150-1446581801.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114747721-511462229.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114804681-1874280086.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114820013-965537383.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114832462-1837849076.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114842872-732931155.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429114922300-1372682231.png">
整个项目采用vue3 setup语法糖编码开发。
<h3>App.vue配置</h3>
项目主模板App.vue使用vue3 setup语法。
<div class="cnblogs_code">
<pre><script setup>
import { provide } from 'vue'
import { onLaunch, onShow, onHide, onPageNotFound } from '@dcloudio/uni-app'

onLaunch(() => {
 console.log('App Launch')

 uni.hideTabBar()
 loadSystemInfo()
})

onShow(() => {
 console.log('App Show')
})

onHide(() => {
 console.log('App Hide')
})

onPageNotFound((e) => {
 console.warn('Route Error：', `${e.path}`)
})

// 获取系统设备信息
const loadSystemInfo = () => {
 uni.getSystemInfo({
 success: (e) => {
 // 获取手机状态栏高度
 let statusBar = e.statusBarHeight
 let customBar

 // #ifndef MP
 customBar = statusBar + (e.platform == 'android' ? 50 : 45)
 // #endif

 // #ifdef MP-WEIXIN
 // 获取胶囊按钮的布局位置信息
 let menu = wx.getMenuButtonBoundingClientRect()
 // 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度
 customBar = menu.bottom + menu.top - statusBar
 // #endif

 // #ifdef MP-ALIPAY
 customBar = statusBar + e.titleBarHeight
 // #endif

 // 由于globalData在vue3 setup存在兼容性问题，改为provide/inject替代方案
 provide('globalData', {
 statusBarH: statusBar,
 customBarH: customBar,
 screenWidth: e.screenWidth,
 screenHeight: e.screenHeight,
 platform: e.platform
 })
 }
 })
}
</script>

<style>
/* #ifndef APP-NVUE */
@import 'static/fonts/iconfont.css';
/* #endif */
</style>
<style lang="scss">
@import 'styles/reset.scss';
@import 'styles/layout.scss';
</style></pre>
</div>
<h3>uni-app+vue3自定义导航条+菜单栏</h3>
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429122331773-1241731102.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429122625884-890863363.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429122834165-1407915091.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429123035338-1499616398.png">
在components目录下自定义导航栏Navbar和底部菜单栏Tabbar组件。
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429123458911-774585181.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429123702483-1019356483.png">
navbar导航条支持是否显示返回、自定义标题(居中)、背景色/文字颜色、搜索等功能。
支持如下自定义插槽
<div class="cnblogs_code">
<pre><slot #back />
<slot #backText />
<slot #left />
<slot #title />
<slot #search />
<slot #right /></pre>
</div>
<div class="cnblogs_code">
<pre><uv3-navbar :back="true" title="标题内容" bgcolor="#07c160" color="#fff" fixed zIndex="1010" />

<uv3-navbar custom bgcolor="linear-gradient(to right, #07c160, #0000ff)" color="#fff" center transparent zIndex="2024">
<template #back><uni-icons type="close" /></template>
<template #backText><text>首页</text></template>
<template #title>
 <image src="/static/logo.jpg" style="height:20px;width:20px;" /> Admin
</template>
<template #right>
 <view class="ml-20" @click="handleAdd"><text class="iconfont icon-tianjia"></text></view>
 <view class="ml-20"><text class="iconfont icon-msg"></text></view>
</template>
</uv3-navbar></pre>
</div>
<h3>uni-vue3-wchat布局模板</h3>
由于整体项目结构采用顶部导航区域+主体内容区+底部区域，所以新建一个公共布局模板。
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429125906607-2041570472.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429130237480-903243492.png">  <img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429130348714-778916538.png">
<div class="cnblogs_code">
<pre>


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


<script setup>
const props = defineProps({
 // 是否显示自定义tabbar
 showTabBar: { type: , 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" />

 
 <uv3-tabbar v-if="showTabBar" hideTabBar fixed />
</view>
</template></pre>
</div>
<h3>uniapp+vue3实现微信九宫格图像</h3>
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429132537791-1704239041.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429132644347-83378864.png">
<div class="cnblogs_code">
<pre><script setup>
import { onMounted, ref, computed, watch, getCurrentInstance } from 'vue'

const props = defineProps({
 // 图像组
 avatar: { type: Array, default: null },
})

const instance = getCurrentInstance()

const uuid = computed(() => Math.floor(Math.random() * 10000))
const avatarPainterId = ref('canvasid' + uuid.value)

const createAvatar = () => {
 const ctx = uni.createCanvasContext(avatarPainterId.value, instance)
 // 计算图像在画布上的坐标
 const avatarSize = 12
 const gap = 2
 for(let i = 0, len = props.avatar.length; i < len; i++) {
 const row = Math.floor(i / 3)
 const col = i % 3
 const x = col * (avatarSize + gap)
 const y = row * (avatarSize + gap)

 ctx.drawImage(props.avatar, x, y, avatarSize, avatarSize)
 }
 ctx.draw(false, () => {
 // 输出临时图片
 /* uni.canvasToTempFilePath({
 canvasId: avatarPainterId.value,
 success: (res) => {
 console.log(res.tempFilePath)
 }
 }) */
 })
}

onMounted(() => {
 createAvatar()
})

watch(() => props.avatar, () => {
 createAvatar()
})
</script>

<template>
<template v-if="avatar.length > 1">
 <view class="uv3__avatarPainter">
 <canvas :canvas-id="avatarPainterId" class="uv3__avatarPainter-canvas"></canvas>
 </view>
</template>
<template v-else>
 <image class="uv3__avatarOne" :src="avatar" />
</template>
</template>

<style lang="scss" scoped>
.uv3__avatarPainter {background-color: #eee; border-radius: 5px; overflow: hidden; padding: 2px; height: 44px; width: 44px;}
.uv3__avatarPainter-canvas {height: 100%; width: 100%;}
.uv3__avatarOne {border-radius: 5px; height: 44px; width: 44px;}
</style></pre>
</div>
<h3>uniapp+vue3自定义弹出框</h3>
项目中所有的弹窗效果都是基于uniapp+vue3自定义组件实现功能。
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429130855459-1627153005.png">  <img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429130931800-882296996.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429131027305-110243231.png">  <img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429131113148-68142588.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429131233089-1706057744.png">  <img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429131322307-1375025734.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429131427286-164806501.png">
支持如下参数配置：
<div class="cnblogs_code">
<pre>v-model 当前组件是否显示
title 标题（支持富文本div标签、自定义插槽内容）
content 内容（支持富文本div标签、自定义插槽内容）
type 弹窗类型（toast | footer | actionsheet | actionsheetPicker | android/ios）
customStyle 自定义弹窗样式
icon toast图标（loading | success | fail | warn | info）
shade 是否显示遮罩层
shadeClose 是否点击遮罩时关闭弹窗
opacity 遮罩层透明度
round 是否显示圆角
xclose 是否显示关闭图标
xposition 关闭图标位置（left | right | top | bottom）
xcolor 关闭图标颜色
anim 弹窗动画（scaleIn | fadeIn | footer | fadeInUp | fadeInDown）
position 弹出位置（top | right | bottom | left）
follow 长按/右键弹窗（坐标点）
time 弹窗自动关闭秒数（1、2、3）
zIndex 弹窗层叠（默认202107）
btns 弹窗按钮（参数：text|style|disabled|click）
------------------------------------------
## slot [插槽]
<template #title></template>
<template #content></template>
------------------------------------------
## emit
open 打开弹出层时触发（@open="xxx"）
close 关闭弹出层时触发（@close="xxx"）</pre>
</div>
支持组件式+函数式调用。
<div class="cnblogs_code">
<pre><script setup>
import { onMounted, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'

const props = defineProps({
 ...
})
const emit = defineEmits([
 'update:modelValue',
 'open',
 'close'
])

const instance = getCurrentInstance()

const opts = ref({
 ...props
})
const visible = ref(false)
const closeAnim = ref(false)
const stopTimer = ref(null)
const oIndex = ref(props.zIndex)
const uuid = computed(() => Math.floor(Math.random() * 10000))

const positionStyle = ref({ position: 'absolute', left: '-999px', top: '-999px' })

const toastIcon = {
 ...
}

// 打开弹框
const open = (options) => {
 if(visible.value) return
 opts.value = Object.assign({}, props, options)
 // console.log('-=-=混入参数：', opts.value)
 visible.value = true

 // nvue 的各组件在安卓端默认是透明的，如果不设置background-color，可能会导致出现重影的问题
 // #ifdef APP-NVUE
 if(opts.value.customStyle && !opts.value.customStyle['background'] && !opts.value.customStyle['background-color']) {
 opts.value.customStyle['background'] = '#fff'
 }
 // #endif

 let _index = ++index
 oIndex.value = _index + parseInt(opts.value.zIndex)

 emit('open')
 typeof opts.value.onOpen === 'function' && opts.value.onOpen()

 // 长按处理
 if(opts.value.follow) {
 nextTick(() => {
 let winW = uni.getSystemInfoSync().windowWidth
 let winH = uni.getSystemInfoSync().windowHeight
 // console.log('坐标点信息：', opts.value.follow)
 getDom(uuid.value).then(res => {
 // console.log('Dom尺寸信息：', res)
 if(!res) return

 let pos = getPos(opts.value.follow, opts.value.follow, res.width+15, res.height+15, winW, winH)
 positionStyle.value.left = pos + 'px'
 positionStyle.value.top = pos + 'px'
 })
 })
 }

 if(opts.value.time) {
 if(stopTimer.value) clearTimeout(stopTimer.value)
 stopTimer.value = setTimeout(() => {
 close()
 }, parseInt(opts.value.time) * 1000)
 }
}

// 关闭弹框
const close = () => {
 if(!visible.value) return

 closeAnim.value = true
 setTimeout(() => {
 visible.value = false
 closeAnim.value = false

 emit('update:modelValue', false)
 emit('close')
 typeof opts.value.onClose === 'function' && opts.value.onClose()

 positionStyle.value.left = '-999px'
 positionStyle.value.top = '-999px'

 stopTimer.value && clearTimeout(stopTimer.value)
 }, 200)
}

// 点击遮罩层
const handleShadeClick = () => {
 if(JSON.parse(opts.value.shadeClose)) {
 close()
 }
}

// 按钮事件
const handleBtnClick = (e, index) => {
 let btn = opts.value.btns
 if(!btn?.disabled) {
 console.log('按钮事件类型：', typeof btn.click)

 typeof btn.click === 'function' && btn.click(e)
 }
}

// 获取dom宽高
const getDom = (id) => {
 return new Promise((resolve, inject) => {
 // uniapp vue3中 uni.createSelectorQuery().in(this) 会报错__route__未定义https://ask.dcloud.net.cn/question/140192
 uni.createSelectorQuery().in(instance).select('#uapopup-' + id).fields({
 size: true,
 }, data => {
 resolve(data)
 }).exec()
 })
}

// 自适应坐标点
const getPos = (x, y, ow, oh, winW, winH) => {
 let l = (x + ow) > winW ? x - ow : x
 let t = (y + oh) > winH ? y - oh : y
 return
}

onMounted(() => {
 if(props.modelValue) {
 open()
 }
})

watch(() => props.modelValue, (val) => {
 // console.log(val)
 if(val) {
 open()
 }else {
 close()
 }
})

defineExpose({
 open,
 close
})
</script></pre>
</div>
<h3>uniapp+vue3聊天模块</h3>
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429133559816-1045161084.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429134016820-1563275812.png">  <img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429133838509-345189288.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429134115447-1886078050.png">
uniapp+vue3实现增强版文本输入框。支持获取焦点高亮边框、单行(input)+多行(textarea)输入模式，自定义前缀/后缀图标。
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429134427655-151379229.png">
该插件已经免费发布到插件应用市场，有需要的可以去看看哈~
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429134723495-808597927.gif">
如上图：实现了类似微信按住说话功能。
<div class="cnblogs_code">
<pre>
<view v-if="voicePanelEnable" class="uv3__voicepanel-popup">
<view class="uv3__voicepanel-body flexbox flex-col">
 
 <view v-if="!voiceToTransfer" class="uv3__voicepanel-transfer">
 
 <view class="animtips flexbox" :class="voiceType == 2 ? 'left' : voiceType == 3 ? 'right' : null"><Waves :lines=".includes(voiceType) ? 10 : 20" /></view>
 
 <view class="icobtns flexbox">
 <view class="vbtn cancel flexbox flex-col" :class="{'hover': voiceType == 2}" @click="handleVoiceCancel"><text class="vicon uv3-icon uv3-icon-close"></text></view>
 <view class="vbtn word flexbox flex-col" :class="{'hover': voiceType == 3}"><text class="vicon uv3-icon uv3-icon-word"></text></view>
 </view>
 </view>

 
 <view v-if="voiceToTransfer" class="uv3__voicepanel-transfer result fail">
 
 <view class="animtips flexbox"><uni-icons type="info-filled" color="#fff" size="20"></uni-icons><text class="c-fff">未识别到文字</text></view>
 
 <view class="icobtns flexbox">
 <view class="vbtn cancel flexbox flex-col" @click="handleVoiceCancel"><text class="vicon uv3-icon uv3-icon-chexiao"></text>取消</view>
 <view class="vbtn word flexbox flex-col"><text class="vicon uv3-icon uv3-icon-audio"></text>发送原语音</view>
 <view class="vbtn check flexbox flex-col"><text class="vicon uv3-icon uv3-icon-duigou"></text></view>
 </view>
 </view>

 
 <view class="uv3__voicepanel-cover">
 <image v-if="!voiceToTransfer" src="/static/voice_bg.webp" :webp="true" mode="widthFix" style="width: 100%;" />
 </view>
 
 <view v-if="!voiceToTransfer" class="uv3__voicepanel-tooltip">{{voiceTypeMap}}</view>
 
 <view v-if="!voiceToTransfer" class="uv3__voicepanel-fixico"><text class="uv3-icon uv3-icon-audio fs-50"></text></view>
</view>
</view></pre>
</div>
OK，以上就是uni-app+vue3开发多端聊天app实例的一些知识分享，希望对大家有所帮助！
<blockquote>
flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
Electron35-DeepSeek桌面端AI系统|vue3.5+electron+arco客户端ai模板
Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序
Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
</blockquote>
最后附上几个最新实战项目
uniapp+vite酒店预订app模板：https://www.cnblogs.com/xiaoyan2017/p/18592873
uniapp+vue3手机版os系统：https://www.cnblogs.com/xiaoyan2017/p/18204751
flutter3.27短视频直播商城：https://www.cnblogs.com/xiaoyan2017/p/18700875 
flutter3+window_manager仿macOS桌面系统：https://www.cnblogs.com/xiaoyan2017/p/18132176
flutter3.27仿携程app酒店预订系统：https://www.cnblogs.com/xiaoyan2017/p/18726313
<img src="https://img2024.cnblogs.com/blog/1289798/202404/1289798-20240429135428883-320532133.gif">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/18165578

頁: [1]

琼殿技术论坛's Archiver

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈