uniapp |
您所在的位置:网站首页 › uniapp开发项目实例代码 › uniapp |
基于uniapp+vite4+pinia跨多端实现chatgpt会话模板Uniapp-ChatGPT。 uni-chatgpt 使用uni-app+vite4+vue3+pinia+uview-plus等技术构建多端仿制ChatGPT手机端APP会话应用模板。支持编译到h5+小程序+APP端,支持渲染markdown语法及代码高亮、解决软键盘撑起布局问题。 ◆ 效果预览编译 [H5+小程序+App端] 效果如下 基于hbuilderx创建的项目,整个项目页面全部采用uniapp vue3语法编码开发。 如果对uniapp结合vue3创建多端项目感兴趣,可以去看看之前的分享文章。 https://www.cnblogs.com/xiaoyan2017/p/17487018.html 项目中顶部navbar和底部tabbar均是自定义组件实现功能,保证整体风格统一协调。 如下图:在components目录下新建组件。支持easycom模式,无需引入,直接可以使用。 至于如何实现组件功能,这里就不做详细介绍了,大家可以去看看之前的分享文章。 https://www.cnblogs.com/xiaoyan2017/p/14978408.html 另外Navbar和Tabbar组件的vue2版本已经发布到了插件市场,如果大家有需要可以去下载,一次性拿走使用。 https://ext.dcloud.net.cn/plugin?id=5592https://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语法,获取手机系统状态栏高度。 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 }) } }) }由于底部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多行文本,可自适应高度,自定义前缀/后缀插槽及密码输入等功能。 使用hbuilderx构建的uniapp项目同样支持.env文件及vite.config.js配置。支持修改默认运行端口。 OK,基于uniapp+vue3构建跨端仿制chatgpt模板就分享到这里,希望对大家有所帮助~~💪 最后附上一个vue3+electron25桌面端实例项目 https://www.cnblogs.com/xiaoyan2017/p/17468074.html
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |