uniapp-vue3-wechat:基于uniapp+vue3仿微信app聊天实例(H5+小程序+App端)

本文主要是介绍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端

在这里插入图片描述
整个项目采用vue3 setup语法编码,支持编译到h5+小程序端+APP端。

在这里插入图片描述

使用技术

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
uniapp+vue3实现类似微信朋友圈功能。

在这里插入图片描述

项目结构

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

入口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}
}

在这里插入图片描述

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.statusBarHeightlet customBar// #ifndef MPcustomBar = statusBar + (e.platform == 'android' ? 50 : 45)// #endif// #ifdef MP-WEIXIN// 获取胶囊按钮的布局位置信息let menu = wx.getMenuButtonBoundingClientRect()// 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度customBar = menu.bottom + menu.top - statusBar// #endif// #ifdef MP-ALIPAYcustomBar = 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>

在这里插入图片描述

uniapp+vue3自定义navbar+tabbar组件

在这里插入图片描述
在这里插入图片描述

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

公共布局模板

整体项目结构采用顶部导航区域+主体内容区+底部区域

在这里插入图片描述
在这里插入图片描述

<!-- 公共布局模板 --><!-- #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({// 是否显示自定义tabbarshowTabBar: { 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>

uni-app+vue3微信九宫格图像组

在这里插入图片描述
在这里插入图片描述

<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 = 12const gap = 2for(let i = 0, len = props.avatar.length; i < len; i++) {const row = Math.floor(i / 3)const col = i % 3const x = col * (avatarSize + gap)const y = row * (avatarSize + gap)ctx.drawImage(props.avatar[i], 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[0]" /></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自定义弹出框组件

在这里插入图片描述
在这里插入图片描述

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           弹窗自动关闭秒数(123)
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) returnopts.value = Object.assign({}, props, options)// console.log('-=-=混入参数:', opts.value)visible.value = true// nvue 的各组件在安卓端默认是透明的,如果不设置background-color,可能会导致出现重影的问题// #ifdef APP-NVUEif(opts.value.customStyle && !opts.value.customStyle['background'] && !opts.value.customStyle['background-color']) {opts.value.customStyle['background'] = '#fff'}// #endiflet _index = ++indexoIndex.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().windowWidthlet winH = uni.getSystemInfoSync().windowHeight// console.log('坐标点信息:', opts.value.follow)getDom(uuid.value).then(res => {// console.log('Dom尺寸信息:', res)if(!res) returnlet pos = getPos(opts.value.follow[0], opts.value.follow[1], res.width+15, res.height+15, winW, winH)positionStyle.value.left = pos[0] + 'px'positionStyle.value.top = pos[1] + '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) returncloseAnim.value = truesetTimeout(() => {visible.value = falsecloseAnim.value = falseemit('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[index]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/140192uni.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 : xlet t = (y + oh) > winH ? y - oh : yreturn [l, t]}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://ext.dcloud.net.cn/plugin?id=13275

在这里插入图片描述

<!-- 语音操作面板 -->
<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="[2, 3].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[voiceType]}}</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

在这里插入图片描述

这篇关于uniapp-vue3-wechat:基于uniapp+vue3仿微信app聊天实例(H5+小程序+App端)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/947116

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打

跨系统环境下LabVIEW程序稳定运行

在LabVIEW开发中,不同电脑的配置和操作系统(如Win11与Win7)可能对程序的稳定运行产生影响。为了确保程序在不同平台上都能正常且稳定运行,需要从兼容性、驱动、以及性能优化等多个方面入手。本文将详细介绍如何在不同系统环境下,使LabVIEW开发的程序保持稳定运行的有效策略。 LabVIEW版本兼容性 LabVIEW各版本对不同操作系统的支持存在差异。因此,在开发程序时,尽量使用