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

博主： cuiyonglv
发布时间：2023 年 07 月 22 日
1016 次浏览
暂无评论
6096字数
分类：教程

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

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

[electron25+vue3客户端仿制chatGPT应用程序EXE](https://ask.dcloud.net.cn/article/40582)

![img](https://image-static.segmentfault.com/289/617/2896176370-649aee02c4438)

## 技术栈

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

![img](https://image-static.segmentfault.com/116/190/1161905201-649aef1ddfb7a)

![img](https://image-static.segmentfault.com/701/850/701850722-649aeff02fc7c)

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

![img](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2c09d5319e0543ba94e66acca4c445f7~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)

## 项目层结构

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

![img](https://image-static.segmentfault.com/302/767/3027671508-649af04142308_fix732)

![img](https://image-static.segmentfault.com/206/102/206102552-649af084aa512_fix732)

![img](https://image-static.segmentfault.com/607/252/607252838-649af09036f1a_fix732)

![img](https://image-static.segmentfault.com/163/317/1633174599-649af09e08220_fix732)

![img](https://image-static.segmentfault.com/325/258/3252583200-649af0b15d160_fix732)

![img](https://image-static.segmentfault.com/256/659/256659749-649af0be8917a_fix732)

![img](https://image-static.segmentfault.com/401/502/4015027422-649af0e6c0c11_fix732)

![img](https://image-static.segmentfault.com/941/009/941009464-649af0f94255c_fix732)

![img](https://image-static.segmentfault.com/771/578/771578227-649af10b8924f_fix732)

![img](https://image-static.segmentfault.com/344/470/3444707099-649af11eb7bca_fix732)

![img](https://image-static.segmentfault.com/766/571/766571291-649af12fe82d8_fix732)

![img](https://image-static.segmentfault.com/121/750/1217503471-649af14b99404_fix732)

![img](https://image-static.segmentfault.com/138/567/1385673493-649af15d72c5e_fix732)

![img](https://image-static.segmentfault.com/698/710/698710088-649af1782bee7_fix732)

![img](https://image-static.segmentfault.com/522/330/522330486-649af16a71009_fix732)

## 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  
    }  
}</code></pre>

## App.vue模板

同样采用vue3 setup语法编码。

<pre><a class="btn" data-clipboard-snippet="" data-toggle="popover" data-placement="bottom" data-content="" data-original-title="" title="">复制代码</a><code class="hljs xml"><script setup><span class="javascript">  
    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  
                })  
            }  
        })  
    }  
</span></script></code></pre>

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

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

![img](https://image-static.segmentfault.com/233/793/2337938195-649af2509e615_fix732)

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

![img](https://image-static.segmentfault.com/136/625/1366259424-649af2a71ccbd_fix732)

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

[https://ext.dcloud.net.cn/plugin?id=5592](https://ext.dcloud.net.cn/plugin?id=5592)
[https://ext.dcloud.net.cn/plugin?id=5593](https://ext.dcloud.net.cn/plugin?id=5593)

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

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

![img](https://image-static.segmentfault.com/185/914/185914909-649af5a275287_fix732)

![img](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aba739af76104c83b696ad073aefd9cf~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)

![img](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d9bec65895df4813b64fb95533fa2189~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp?)

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

[https://ext.dcloud.net.cn/plugin?id=13275](https://ext.dcloud.net.cn/plugin?id=13275)

![img](https://image-static.segmentfault.com/313/463/3134634759-649af5eaab698_fix732)

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

* 基础用法

* 密码框/自动获取焦点

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

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

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

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

最后修改：2023 年 07 月 22 日

如果觉得我的文章对你有用，请随意赞赏

发表评论
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱

地址

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

cuiyonglv • 2023 年 07 月 22 日