uniapp-vue3-wechat：基于uniapp+vue3仿微信app谈天实例(H5+小步调+App端)
uni-vue3-wchat：基于uni-app+vue3+pinia2高仿微信app谈天模板。原创基于最新跨端技能uni-app+vue3.x+pinia2+vite4+uv-ui构建三端仿微信app界面谈天实例。实现编辑框多行消息/emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。支持编译到H5+小步调端+App端。
https://img-blog.csdnimg.cn/direct/e19e38e1906b4ffdb3bba9fa3a38adb0.png#pic_center
整个项目采用vue3 setup语法编码，支持编译到h5+小步调端+APP端。
https://img-blog.csdnimg.cn/direct/bc300be4cf994492821f167d3a7f9289.png#pic_center
使用技能
[*]编辑器：HbuilderX 4.0.8
[*]框架技能：Uniapp+Vue3+Pinia2+Vite4.x
[*]组件库：uni-ui+uv-ui
[*]弹窗组件：uv3-popup（uniapp+vue3多端自定义弹框组件）
[*]导航栏+菜单栏：uv3-navbar+uv3-tabbar组件
[*]本地缓存：pinia-plugin-unistorage
[*]编译支持：H5+小步调+APP端
https://img-blog.csdnimg.cn/direct/befca112b5db4154a3644c27f61270f3.png#pic_center
https://img-blog.csdnimg.cn/direct/704e7fc473484f48b79fbc60625ec926.gif#pic_center
https://img-blog.csdnimg.cn/direct/2c185ca54b4d4061b73c065d0fa66f37.gif#pic_center
uniapp+vue3实现类似微信朋友圈功能。
https://img-blog.csdnimg.cn/direct/ca3a078b13df4d60b1f031be877c0347.gif#pic_center
项目布局
https://img-blog.csdnimg.cn/direct/311b5787b63444d8878365c8672a570c.png#pic_center
https://img-blog.csdnimg.cn/direct/82a6e403c37c44c7bab646c9b0c8aecc.gif#pic_center
https://img-blog.csdnimg.cn/direct/ebeefbc825774a8e9fccddfbbd927251.png#pic_center
https://img-blog.csdnimg.cn/direct/f2d1cc9e68024b6e9a765134bd855f3d.png#pic_center
https://img-blog.csdnimg.cn/direct/2647155df0fd43bc9a80e1c906ac8774.png#pic_center
https://img-blog.csdnimg.cn/direct/08c9df9dc2964ec49c7202f671552adf.png#pic_center
https://img-blog.csdnimg.cn/direct/d87c0036310940eaacb4bdec7fc696a6.png#pic_center
https://img-blog.csdnimg.cn/direct/77990c55330646f890e404b3be6060b8.png#pic_center
https://img-blog.csdnimg.cn/direct/d6387dcc94b241b0953f86119c1bd31e.png#pic_center
https://img-blog.csdnimg.cn/direct/4f1b5d3a5cc14653912f88004c46c89b.png#pic_center
https://img-blog.csdnimg.cn/direct/aa9bf17f03f048d998878289e1e84b11.png#pic_center
https://img-blog.csdnimg.cn/direct/c7564d8acc7847d49a21a822663b0e88.png#pic_center
https://img-blog.csdnimg.cn/direct/9d87f32030e14324bbf6611f9b7d03ed.png#pic_center
https://img-blog.csdnimg.cn/direct/2a2063511000496992bab8b1be488f82.png#pic_center
https://img-blog.csdnimg.cn/direct/581ba565cb6743f69b90c76e61fb5371.png#pic_center
https://img-blog.csdnimg.cn/direct/a68abfd6556a4d529a06d20baea59e09.png#pic_center
https://img-blog.csdnimg.cn/direct/06b9b94d5ed4443c8e54d6796224b8fa.png#pic_center
https://img-blog.csdnimg.cn/direct/2dd482ea565748fcbbe76370122fddfa.png#pic_center
https://img-blog.csdnimg.cn/direct/d26accb009d145a5bd0b24522a2dd415.png#pic_center
https://img-blog.csdnimg.cn/direct/a0bee2ef68be4c9da5a5c61eeeb2be51.png#pic_center
https://img-blog.csdnimg.cn/direct/f8f28236ee96446e91840340d23f1d66.png#pic_center
入口main.js设置
/**
* 入口文件 main.js
*/
import { createSSRApp } from 'vue'
import App from './App'
// 引入pinia状态管理
import pinia from '@/pinia'
export function createApp() {
const app = createSSRApp(App)
app.use(pinia)
return {
app,
pinia
}
}
https://img-blog.csdnimg.cn/direct/d308f993f84e4b4ca7b56268fe20fcb7.png#pic_center
App.vue设置
采用 vue3 setup 语法开发。
<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>
https://img-blog.csdnimg.cn/direct/8b6f06c9ff274e929336a0c0b34eedbe.png#pic_center
uniapp+vue3自定义navbar+tabbar组件
https://img-blog.csdnimg.cn/direct/5350e10a31be4e3cb4189fc1f3075c76.png
https://img-blog.csdnimg.cn/direct/a14c097620bd42c1ad403f82d1278771.png
<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>
公共布局模板
整体项目布局采用顶部导航地域+主体内容区+底部地域。
https://img-blog.csdnimg.cn/direct/150676c08e7e4633a50bee1e07268234.png
https://img-blog.csdnimg.cn/direct/5957ace991b44d5fb137103ed3c4575f.png
<!-- 公共布局模板 -->
<!-- #ifdef MP-WEIXIN -->
<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>
<!-- #endif -->
<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" />
<!-- tabbar栏 -->
<uv3-tabbar v-if="showTabBar" hideTabBar fixed />
</view>
</template>
uni-app+vue3微信九宫格图像组
https://img-blog.csdnimg.cn/direct/0a82d37ed323447f86642b8033bbbc9d.png
https://img-blog.csdnimg.cn/direct/6a4ff1cd6c5f443f8dd35a934df88f0d.png
<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>
uni-app+vue3自定义弹出框组件
https://img-blog.csdnimg.cn/direct/2230c6abb21146608e9cf35226dc52f0.png
https://img-blog.csdnimg.cn/direct/d1881a8dec9f453bb955b19c40fe89cd.png
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"）
uv3-popup支持函数式+组件式两种调用方式。
<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>
uni-app+vue3谈天功能
https://img-blog.csdnimg.cn/direct/7b1bc58df2c84a4bb610bdd5a4ad9e3d.png
https://img-blog.csdnimg.cn/direct/606711858ae24bd7b89e18861c551768.png
https://img-blog.csdnimg.cn/direct/1183826c06d54ab7b365d95b63ee42c0.png
目前该插件已经免费发布到插件市场，接待去下载使用。
https://img-blog.csdnimg.cn/direct/e30e229291f34d3fbdbf6fd51b447265.png
https://ext.dcloud.net.cn/plugin?id=13275
https://img-blog.csdnimg.cn/direct/6249c38e0266405db433eb569cf75b72.gif#pic_center
<!-- 语音操作面板 -->
<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>
目前该项目已经同步到工房，如果有必要，接待自行去拍哈~
https://gf.bilibili.com/item/detail/1105801011
好了，综上就是uniapp+vue3跨端谈天实例的一些分享，盼望大家能喜欢！
末了附上几个最新实战项目
[*] flutter3-winchat基于flutter3.x+bitsdojo_window桌面端仿微信
https://blog.csdn.net/yanxinyun1990/article/details/136410049
[*] flutter3_douyin基于flutter3.19仿抖音短视频/直播
https://blog.csdn.net/yanxinyun1990/article/details/136996521
[*] flutter3_macos基于flutter3.x+window_manager桌面端仿macOS系统
https://blog.csdn.net/yanxinyun1990/article/details/137697164
https://img-blog.csdnimg.cn/direct/6ada19eaea134499b59ccd2603a1831e.gif#pic_center
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]