Loading... 之前有给大家分享一个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状态管理。 <pre><a class="btn" data-clipboard-snippet="" data-toggle="popover" data-placement="bottom" data-content="" data-original-title="" title="">复制代码</a><code class="hljs javascript">/** * 主入口配置 */ 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) <pre><a class="btn" data-clipboard-snippet="" data-toggle="popover" data-placement="bottom" data-content="" data-original-title="" title="">复制代码</a><code class="hljs xml"><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></code></pre> ### 目前这两个组件已经发布到插件市场,大家免费下载使用。 [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) 调用非常简单,支持多种方式自定义组件。 * 基础用法 <pre><a class="btn" data-clipboard-snippet="" data-toggle="popover" data-placement="bottom" data-original-title="" title="">复制代码</a><code class="language-html hljs xml"><ua-input v-model="value" placeholder="请输入" /></code></pre> * 密码框/自动获取焦点 <pre><a class="btn" data-clipboard-snippet="" data-toggle="popover" data-placement="bottom" data-content="" data-original-title="" title="">复制代码</a><code class="language-html hljs xml"><ua-input v-model="value" showPassword autofocus /></code></pre> * 多行输入/自适应高度/清除功能 <pre><a class="btn" data-clipboard-snippet="" data-toggle="popover" data-placement="bottom" data-content="" data-original-title="" title="">复制代码</a><code class="language-html hljs xml"><ua-input ref="inputRef" v-model="inputValue" type="textarea" :autosize="{maxRows: 6}" clearable placeholder="多行文本..." style="margin: 0 5px; width: 100%;" /></code></pre> * 自定义自适应最大高度、清除事件、前置/后置插槽 <pre><a class="btn" data-clipboard-snippet="" data-toggle="popover" data-placement="bottom" data-content="" data-original-title="" title="">复制代码</a><code class="language-html hljs xml"><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></code></pre> OK,基于uni-app+vue3开发跨端gpt项目就先分享到这里了。 链接:[https://juejin.cn/post/7249347651787243581](https://juejin.cn/post/7249347651787243581) 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 最后修改:2023 年 07 月 22 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 如果觉得我的文章对你有用,请随意赞赏