uniapp-chatgpt跨端仿ChatGPT实例|uniapp+vue3+pinia多端聊天模板
阅读原文时间:2023年08月09日阅读:12

基于uniapp+vite4+pinia跨多端实现chatgpt会话模板Uniapp-ChatGPT

uni-chatgpt 使用uni-app+vite4+vue3+pinia+uview-plus等技术构建多端仿制ChatGPT手机端APP会话应用模板。支持编译到h5+小程序+APP端,支持渲染markdown语法及代码高亮、解决软键盘撑起布局问题。

◆ 效果预览

编译 [H5+小程序+App端] 效果如下

◆ 技术栈

  • 编辑器:HbuilderX 3.8.4
  • 框架技术:Uniapp+Vite4+Vue3+Pinia
  • UI组件库:uView-plus^3.1.31
  • markdown渲染:markdown-it
  • 代码高亮:highlight.js
  • 本地缓存:pinia-plugin-unistorage
  • 弹框组件:ua-popup(基于uniapp封装跨端弹层组件)
  • 自定义组件:导航条ua-navbar+菜单栏ua-tabbar
  • 支持编译:小程序+H5+APP端

◆ 功能特性

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

◆ 项目结构目录

基于hbuilderx创建的项目,整个项目页面全部采用uniapp vue3语法编码开发。

如果对uniapp结合vue3创建多端项目感兴趣,可以去看看之前的分享文章。

https://www.cnblogs.com/xiaoyan2017/p/17487018.html

◆ Uniapp自定义多端Navbar+Tabbar组件

项目中顶部navbar和底部tabbar均是自定义组件实现功能,保证整体风格统一协调。

如下图:在components目录下新建组件。支持easycom模式,如需引入,直接使用。

至于如何实现组件功能,这里就不做详细介绍了,大家可以去看看之前的分享文章。

https://www.cnblogs.com/xiaoyan2017/p/14978408.html

另外Navbar和Tabbar组件的vue2版本已经发布到了插件市场,如果大家有需要可以去下载,一次性拿走使用。

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

◆ 主入口main.js配置

在main.js中使用vue3语法,引入pinia状态管理、uview-plus组件库。

/**
* 主入口配置
*/

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语法,获取手机系统状态栏高度。

由于底部tabbar采用自定义组件,所以在onLaunch中给隐藏掉系统tabbar功能。

如上图:在vue3 setup中globalData有兼容性问题,所以使用了provide/inject替代方案。

◆ uniapp vue3渲染markdown语法+代码高亮

uni-chatgpt能很好的兼容适配 h5+小程序+App端 解析markdown语法及代码高亮显示。

至于如何在uniapp中实现解析markdown语法模板以及解决键盘撑起页面布局问题,大家可以去看看之前的这篇文章。

https://www.cnblogs.com/xiaoyan2017/p/17502105.html

◆ uniapp多功能Input输入编辑框

为了整体风格一致,会话编辑框采用自定义组件实现功能。

目前兼容h5+小程序+App端,支持input单行文本、textarea多行文本,可自适应高度,自定义前缀/后缀插槽及密码输入等功能。

◆ uniapp配置vite.config.js

使用hbuilderx构建的uniapp项目同样支持.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,基于uniapp+vue3构建跨端仿制chatgpt模板就分享到这里,希望对大家有所帮助~~

最后附上一个vue3+electron25桌面端实例项目

https://www.cnblogs.com/xiaoyan2017/p/17468074.html

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章