vue3+uni-app+uview搭建跨端chatgpt模板UniChatGPT-极光社区

uniGPT-vue3 一款基于uniapp+vite4+vue3+pinia+uviewPlus+markdown等技术搭建多端聊天AI模板。

null

技术栈

编辑器：HbuilderX 3.8.4
框架技术：Uniapp+Vite4+Vue3+Pinia
UI组件库：uView-plus^3.1.31
markdown渲染：markdown-it
代码高亮：highlight.js
本地缓存：pinia-plugin-unistorage

null

整个项目基于hbuilderx编辑器创建，采用vue3 setup语法开发。

null

支持编译到h5+小程序+APP端。

null

支持h5/小程序/App端渲染markdown语法结构及代码块语法高亮显示。

null

App.vue模板

<script setup>
    import { provide } from 'vue'
    import { onLaunch, onShow, onHide, onPageNotFound } from '@dcloudio/uni-app'

    onLaunch(() => {
        console.log('App Launch')

        // 隐藏tabBar
        uni.hideTabBar()
        // 初始化
        initSysInfo()
    })

    onShow(() => {
        console.log('App Show')
    })

    onHide(() => {
        console.log('App Hide')
    })

    onPageNotFound((e) => {
        console.warn('Router Error>>', ` No match path "${e.path}" `);
        uni.redirectTo({
            url: '/pages/404/index'
        })
    })

    const initSysInfo = () => {
        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,
                    platform: e.platform
                })
            }
        })
    }
</script>

main.js入口文件

初始vue3挂载配置，引入组件库及pinia状态管理。

/**
 * 主入口配置
  */

import App from './App'
import { createSSRApp } from 'vue'

// 引入pinia状态管理
import pinia from '@/store'

// 引入uview-plus组件库
import uviewplus from '@/uview-plus'

export function createApp() {
    const app = createSSRApp(App)
    app.use(pinia)
    app.use(uviewplus)
    return {
        app,
        pinia
    }
}

uniapp自定义Navbar+Tabbar组件

沉浸式顶部Navbar和底部Tabbar自定义组件实现功能，支持自定义背景色、标题、自定义插槽功能。

null

ua-navbar和ua-tabbar使用easycom结构，直接使用，无需引入。

null

<ua-navbar back="false" custom :title="title" size="40rpx" center fixed :bgcolor="bgcolor">
    <template #left>
        <view @click="showSidebar=true"><text class="iconfont ve-icon-menuon"></text></view>
    </template>
    <template #right>
        <text class="iconfont ve-icon-plus fs-36" @click="handleNewChat"></text>
    </template>
</ua-navbar>