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

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

技术栈开发工具：HbuilderX 4.0.8技术框架：Uniapp+Vue3+Pinia2+Vite4.xUI组件库：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    }}

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

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

整体项目分为顶部导航+内容区+底部区三大模块。

<!-- 公共布局模板 --><!-- #ifdef MP-WEIXIN --><script>    export default {        /**         * 解决小程序class、id透传问题         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效，组件外部传入的class没有挂到组件根节点上，在组件中增加options: { virtualHost: true }         *          */        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>

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