uniappGpt 一款基于uniapp+vite4构建的跨平台chatgpt对话项目。
使用跨端技术
uniapp+vue3+pinia架构的一款兼容多端设备仿制chatGPT会话模板案例。支持全端渲染markdown语法及代码高亮、解决软键盘顶起布局。
- 整屏沉浸式顶部导航条/底部tabbar
- 支持h5+小程序+App端解析markdown语法及代码高亮
- 采用pinia全局状态管理
- 基于uview-plus vue3组件库
- 支持会话本地缓存
- 解决小程序+App软键盘撑起问题
采用了HbuilderX3.8.4开发工具，解决软键盘弹起布局挤压问题，自定义uaNavbar uaTabbar uaInput 组件全面支持h5/小程序/App端。全端支持解析markdown语法。
项目结构
uniapp+vue3搭建项目
uni-app已经能很好的支持vue3 setup编码了，内置了pinia和vuex两种状态管理。
由于之前有过一篇文章专门介绍如何搭建uniapp+vite多端项目，大家可以去看看。
uniapp+vue3自定义导航栏+菜单栏
项目中顶部Navbar 底部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>
目前该两款插件的vue2版本已经发布了插件市场，大家可以去下载使用。
ext.dcloud.net.cn/plugin?id=5…
ext.dcloud.net.cn/plugin?id=5…
ua-input增强版输入框已经发布插件市场，免费下载使用。
main.js入口vue3配置
/**
* 主入口配置
*/
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
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在App.vue中使用vue3 setup语法不能很好的支持全局获取globalData数据，可以使用provite+inject进行处理。
uniapp vue3渲染markdown语法
项目中很重要的一个知识点就是uniapp如何渲染markdown语法及代码高亮。并且可以全端h5+小程序+App支持渲染结构。
之前也有个一篇专门分享文章，大家可以去看看。
uniapp配置vite.config.js
uni-app支持自定义.env文件及配置vite.config.js。
import { defineConfig, loadEnv } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { resolve } from 'path'
import { parseEnv } from './utils/env'
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
const viteEnv = loadEnv(mode, __dirname)
const env = parseEnv(viteEnv)
return {
plugins: [
uni()
],
define: {
// 自定义环境变量
'process.env.VITE_APPNAME': JSON.stringify('uniapp-chatgpt'),
'process.env.VITE_ENV': env
},
// base: '/',
// mode: 'development', // Default: 'development' for serve, 'production' for build
/*构建选项*/
esbuild: {
// 打包去除 console.log 和 debugger
drop: env.VITE_DROP_CONSOLE && command === 'build' ? ["console", "debugger"] : []
},
/*开发服务器选项*/
server: {
// 端口
port: env.VITE_PORT,
// 运行时自动打开浏览器
open: env.VITE_OPEN,
// 代理配置
proxy: {
// ...
}
}
}
})
OK，以上就是uni-app+vue3开发跨端chatgpt实例的一些分享。
