前段时间有给大家分享一个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>


    /* #ifndef APP-NVUE */
    @import 'static/fonts/iconfont.css';
    /* #endif */


    @import 'styles/reset.scss';
    @import 'styles/layout.scss';

uni-vue3-chat布局结构

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

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


<script setup>
    const props = defineProps({
        // 是否显示自定义tabbar
        showTabBar: { type: [Boolean, String], default: false },
    })
</script>

    
        
        
            
            
            
            
                
                
            
        
        
        
        
            
            未识别到文字
            
                取消
                发送原语音
                
            
        
        
        
        
            
        
        
        {{voiceTypeMap[voiceType]}}
        
        
    

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