Vue3_Uniapp_Wchat跨端聊天实例|uniapp+vue3仿微信App

举报
yxybox 发表于 2024/04/30 15:34:24 2024/04/30
【摘要】 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

未标题-1.png

未标题-6.png

uniapp-vue3-wchat项目使用HbuilderX4.0.8开发工具，采用vue3 setup语法糖编码技术。

未标题-5.png

支持编译至h5+小程序端+APP端，且各端效果基本保持一致性。

m1.gif

w4.gif

app3.gif

使用技术

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

未标题-b.png

项目结构图

360截图20240428173119969.png

m0.gif

入口配置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

360截图20240428185820356.png

未标题-4.png

004360截图20240428102534075.png

005360截图20240428102651264.png

005360截图20240428102737954.png

005360截图20240428102803076.png

005360截图20240428102837808.png

006360截图20240428103042688.png

006360截图20240428103404300.png

007360截图20240428103558227.png

007360截图20240428103657874.png

008360截图20240428104134012.png

008360截图20240428104611348.png

009360截图20240428105110902.png

013360截图20240428105529349.png

018360截图20240428110008870.png

020360截图20240428110342308.png

024360截图20240428110836393.png

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实现微信输入框/语音

m7.gif

<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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript Vue 移动APP
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入