前段时间有给大家分享一个flutter3.x桌面端os系统。今天再分享一款最新原创之作uniapp-vue3-wechat聊天实例。

uni-vue3-wechat采用vue3 setup语法糖编码开发，支持编译到h5 小程序端 APP端。

技术栈

• 开发工具：HbuilderX 4.0.8
• 技术框架：Uniapp Vue3 Pinia2 Vite4.x
• UI组件库：uni-ui uv-ui
• 弹框组件：uv3-popup（uniapp vue3多端自定义弹框组件）
• 自定义组件：uv3-navbar uv3-tabbar组件
• 缓存服务：pinia-plugin-unistorage
• 编译支持：H5 小程序 APP端

项目结构

使用HbuilderX 4.0.8编辑器开发项目，支持编译到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 }}

该项目已经同步到橱窗，如果有需要，欢迎去拍哈~

https://gf.bilibili.com/item/detail/1105801011

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

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

由于该项目涉及到的知识点还是蛮多的，这次就先分享到这里，感谢大家的阅读。