uni-vue3-wechat：基于uni-app+vue3+pinia2多端仿微信App聊天

我的又一个原创重磅跨三端(h5+小程序+App端)新项目Uniapp-Vue3-Wchat聊天正式完结了。

uniapp_vue3_wchat基于最新跨端技术uni-app + vue3 setup语法编码开发。

编辑框多行消息+emoj混排、仿微信长按说话语音面板、图片/视频预览、红包/朋友圈等功能。

uni-vue3-wchat项目支持编译到H5+小程序版+App端。目前该项目已经同步到工房，如果你恰好有需要，欢迎去拍哈~ 希望能帮助到你。

uni-app+vue3+uv-ui实战仿微信app聊天

技术栈

• 编码工具：HbuilderX 4.0.8
• 框架技术：Uniapp+Vue3+Pinia2+Vite4.x
• 组件库：uni-ui+uv-ui
• 弹框组件：uv3-popup（基于uniapp+vue3自定义多端弹窗组件）
• 自定义组件：uv3-navbar导航栏+uv3-tabbar菜单栏
• uni缓存技术：pinia-plugin-unistorage
• 支持编译：H5+小程序+APP端

项目结构框架

入口main.js

通过HbuilderX构建的uniapp vue3项目内置了pinia2状态管理。无需下载或外部导入，直接引用即可使用pinia状态管理。

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

本地缓存可以使用uniapp自带api，也可以使用第三方插件。该项目使用uniapp结合pinia状态管理缓存插件pinia-plugin-unistorage。

引入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模板配置

app.vue模板使用vue3 setup语法。生命周期函数通过@dcloudio/uni-app引入即可。

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

公共布局模板

由于聊天项目整体结构分为顶部导航+主内容区+底部区域三大板块。所以就自定义了一个公共layout模板，通过自定义插槽方式使用。

<!-- 公共布局模板 -->

<!-- #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的问题。

vue3.3+开始支持直接在 <script setup> 中声明组件选项，而不必使用单独的 <script> 块

<script setup>
defineOptions({
  inheritAttrs: false,
  customOptions: {
    /* ... */
  }
})
</script>

uniapp+vue3仿微信九宫格图像组

通过将图像直接画布到canvas上面。

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

uni-app+vue3自定义导航栏+菜单栏

项目中顶部导航条及底部tabbar均是自定义组件实现功能，保证整体UI风格一致性。

至于如何实现功能，由于之前有过一些技术分享，这里就不详细介绍了。

<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 z-index="2024">
    <template #back><uni-icons type="close" /></template>
    <template #backText><text>自定义标题</text></template>
    <template #title>
        <image src="/static/logo.png" style="height:25px;width:25px;" /> Admin
    </template>
    <template #right>
        <view class="ml-20" @click="handleChoose"><text class="iconfont icon-tianjia"></text></view>
        <view class="ml-20"><text class="iconfont icon-msg"></text></view>
    </template>
</uv3-navbar>

uni-app+vue3自定义弹出框组件

项目中使用到的所有弹框功能没有使用组件库弹窗组件，均是使用基于uniapp+vue3自定义组件实现效果。为了保持整体项目UI界面一致性。

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[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) 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[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/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 [l, t]
    }
    
    onMounted(() => {
        if(props.modelValue) {
            open()
        }
    })

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

uniapp+vue3聊天功能模块

聊天模块输入框支持单行/多行输入模式。使用自定义input组件实现增强版功能。

目前该组件也已经发布到插件市场，大家可以去免费下载使用。

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>

整个项目涉及到的知识点还是蛮多的，这次就先分享到这里，希望对大家有所帮助哈！

juejin.cn/post/735686…

juejin.cn/post/734954…