Vue3_Uniapp_Wchat跨端聊天实例|uniapp+vue3仿微信App
【摘要】 vue3-uniapp-wechat:原创基于uni-app+vue3+pinia2+vite4.x+uv-ui等技术跨平台仿制微信App界面聊天实例,支持编译到H5+小程序端+App端。编辑框支持单行/多行自适应高度消息+emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。
经过了两三周的爆肝开发,我的又一个基于uniapp+vue3聊天跨三端项目正式完结了。
之前有给大家分享两款flutter3.x跨平台项目,感兴趣可以去看看。
https://bbs.huaweicloud.com/blogs/424466
https://bbs.huaweicloud.com/blogs/425644
uniapp-vue3-wchat项目使用HbuilderX4.0.8开发工具,采用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端
项目结构图
入口配置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
}
}
由于使用hbuilderx创建的uniapp vue3项目内置了pinia状态管理,无需下载就能使用了。
引入pinia本地持久化存储,该插件是pinia-plugin-persistedstate
的 uniapp 版本。
import { createPinia } from 'pinia'
import { createUnistorage } from '@/uni_modules/pinia-plugin-unistorage'
const pinia = createPinia()
pinia.use(createUnistorage())
export default pinia
App.vue模板
<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>
vue3-uni-chat布局模板
<!-- #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: [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>
小程序端通过自定义插槽会在外层多一层view标签,导致样式无效。
目前解决方案是在mainfest.json中开启"mergeVirtualHostAttributes" : true
,然后在组件中增加options: { virtualHost: true }
,这样就能消除小程序端多一层view的问题。
uniapp+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 = 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[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>
uniapp+vue3实现微信输入框/语音
<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>
作者:xiaoyan2015
链接:https://juejin.cn/post/7363121890791899170
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
链接:https://juejin.cn/post/7363121890791899170
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)