uni-chatGPT：基于uniapp+vue3+pinia跨平台chatgpt渲染对话实例

项目简介

uniapp-ttlive 一款基于uni-app+vue3+uview-plus+pinia等技术搭建的支持h5+小程序+App端仿制chatgpt会话模板项目。支持渲染markdown语法及代码高亮。

预览效果

如下图：编译到h5+小程序+App端效果。

使用技术

• 编码工具：HbuilderX 3.8.4
• 技术框架：uniapp+vite4+vue3+pinia
• UI组件库：uni-ui + uview-plus^3.1.31
• markdown渲染：markdown-it
• 代码高亮：highlight.js
• 数据缓存：pinia-plugin-unistorage
• 支持编译：小程序+H5+APP端

特性

1. 全屏沉浸式顶部导航条+底部tabbar
2. 支持解析h5+小程序+App端markdown语法及代码高亮
3. 使用pinia全局状态管理
4. 基于uview-plus跨端vue3组件库
5. 支持会话本地缓存

代码目录结构

整个项目采用uni-app vue3 setup语法编码开发。

uniapp自定义navbar+tabbar组件

如下图：为了整体UI一致，顶部导航栏和底部菜单栏均是自定义组件实现功能。

组件放在components目录下，支持easycom引入。

调用非常简单，支持自定义插槽功能。目前这两个插件vue2版本已经发布到了插件市场，大家可以去下载使用。

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

App.vue初始模板配置

在app.vue中处理应用生命周期，获取系统状态条等功能。

需要注意：uniapp vue3 setup中自定义全局globalData有兼容问题，大家可以考虑provide/inject替代处理。

main.js配置

在main.js中使用vue3语法、引入uview组件库、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
    }
}

uni-app解析markdown语法/代码高亮

使用了markdown-it和highlight.js插件渲染markdown语法和代码块高亮。

至于在uniapp中如何解析markdown语法，这里不作过多介绍，之前有分享过文章，大家可以去看看。

uni-app+vue3渲染markdown语法结构/代码高亮展示

uniapp自定义多行文本输入框

ua-input组件支持h5+小程序+App端，可单行+多行自适应高度，自定义前缀/后缀插槽等功能。

uaInput组件已经发布到了uniapp插件市场，免费下载使用。

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