uniapp-vue3-chatgpt智能AI聊天会话实战

之前有给大家分享一个electron桌面端GPT实例，今天分享的是全端uniapp-chatgpt会话实例项目。

uniChatGPT 一款基于uni-app+vite4+vue3+pinia+uview-plus等技术构建多端仿制ChatGPT应用实例模板项目。支持编译到h5+小程序+APP端，支持渲染markdown语法及代码高亮、解决软键盘撑起布局痛点等问题。

electron25+vue3客户端仿制chatGPT应用程序EXE

技术栈

• 编码工具：HbuilderX 3.8.4
• 框架技术：Uniapp+Vite4+Vue3+Pinia
• UI组件库：uView-plus^3.1.31
• markdown渲染：markdown-it
• 代码高亮：highlight.js
• 本地缓存：pinia-plugin-unistorage
• 支持编译：小程序+H5+APP端

uni-chatgpt 支持三端渲染markdown语法/代码高亮，解决了小程序/App端键盘撑跑布局痛点。

项目层结构

采用标准的HBuilderX编辑器创建项目，采用vue3 setup语法编码开发。

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

App.vue模板

同样采用vue3 setup语法编码。

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

uniapp vue3自定义导航条/底部菜单栏

如下图：项目中采用沉浸式导航栏+底部Tabbar组件。

组件采用easycom组件结构，直接使用即可。

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

目前这两个组件已经发布到插件市场，大家免费下载使用。

https://ext.dcloud.net.cn/plugin?id=5592
https://ext.dcloud.net.cn/plugin?id=5593

uni-app vue3自定义增强版Input输入框

如下图：项目中input输入框支持多行文本、自定义前缀/后缀插槽等功能。

ua-input增强版输入框已经发布插件市场，免费下载使用。

https://ext.dcloud.net.cn/plugin?id=13275

调用非常简单，支持多种方式自定义组件。

• 基础用法

<ua-input v-model="value" placeholder="请输入" />

• 密码框/自动获取焦点

<ua-input v-model="value" showPassword autofocus />

• 多行输入/自适应高度/清除功能

<ua-input  
    ref="inputRef"  
    v-model="inputValue"  
    type="textarea"  
    :autosize="{maxRows: 6}"  
    clearable  
    placeholder="多行文本..."  
    style="margin: 0 5px; width: 100%;"  
/>

• 自定义自适应最大高度、清除事件、前置/后置插槽

<ua-input  
    class="flex1"  
    v-model="editorText"  
    type="textarea"  
    :autosize="{maxRows: 6}"  
    clearable  
    placeholder="Prompt..."  
    @clear="handleClear"  
    style="margin: 0 5px; width: 100%;"  
/>  
    <template #prefix>  
        <text class="iconfont ve-icon-search"></text>  
    </template>  
    <template #suffix>  
        <text class="iconfont ve-icon-photo"></text>  
        <text class="iconfont ve-icon-audio"></text>  
    </template>  
</ua-input>

OK，基于uni-app+vue3开发跨端gpt项目就先分享到这里了。

链接：https://juejin.cn/post/7249347651787243581
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。