#夏日生活打卡季#

今天给大家分享一个最近研发的uniapp+vite4跨多端chatgpt聊天会话模板chatgpt-uniapp。

uni-chatgpt 一款基于uniapp+vite4+uni-ui+pinia+markdown-it等技术构建的多端仿chatgpt会话模板。

使用技术

• 开发工具：HbuilderX 3.8.4
• 框架技术：uniapp+vue3+pinia
• 组件库：uni-ui + uview-plus
• 代码高亮：highlight.js^11.7.0
• markdown组件：markdown-it
• 本地缓存：pinia-plugin-unistorage

代码结构目录

整个项目遵循uniapp vue3语法编码开发。

经过反复调试，目前已经支持h5+小程序+App端。

下面的展示一些App端演示截图。

看到这里，是不是感觉还不错，喜欢的话可以点个赞支持下哈~~

main.js配置

整个项目从一开始就奔着vue3语法编码开发。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
	}
}

App.vue获取系统状态条高度

在app.vue中获取初始化手机状态栏高度，用于自定义顶部多功能导航栏。

<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>

vite.config.js配置

import { defineConfig, loadEnv } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import { resolve } from 'path'
import { parseEnv } from './utils/env'

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，今天的分享就先到这里吧。