基于uniapp+vite4+pinia跨多端實現(xiàn)chatgpt會話模板Uniapp-ChatGPT。
uni-chatgpt 使用uni-app+vite4+vue3+pinia+uview-plus等技術(shù)構(gòu)建多端仿制ChatGPT手機(jī)端APP會話應(yīng)用模板。支持編譯到h5+小程序+APP端,支持渲染markdown語法及代碼高亮、解決軟鍵盤撐起布局問題。
◆ 效果預(yù)覽
編譯 [H5+小程序+App端] 效果如下
◆ 技術(shù)棧
- 編輯器:HbuilderX 3.8.4
- 框架技術(shù):Uniapp+Vite4+Vue3+Pinia
- UI組件庫:uView-plus^3.1.31
- markdown渲染:markdown-it
- 代碼高亮:highlight.js
- 本地緩存:pinia-plugin-unistorage
- 彈框組件:ua-popup(基于uniapp封裝跨端彈層組件)
- 自定義組件:導(dǎo)航條ua-navbar+菜單欄ua-tabbar
- 支持編譯:小程序+H5+APP端
◆ 功能特性
- 沉浸式自定義頂部導(dǎo)航條+底部tabbar
- 支持h5+小程序+App端渲染markdown語法及代碼高亮
- 基于pinia全局狀態(tài)管理
- 基于uview-plus跨端vue3組件庫
- 支持會話本地緩存
◆ 項目結(jié)構(gòu)目錄
基于hbuilderx創(chuàng)建的項目,整個項目頁面全部采用uniapp vue3語法編碼開發(fā)。
如果對uniapp結(jié)合vue3創(chuàng)建多端項目感興趣,可以去看看之前的分享文章。
https://www.cnblogs.com/xiaoyan2017/p/17487018.html
◆ Uniapp自定義多端Navbar+Tabbar組件
項目中頂部navbar和底部tabbar均是自定義組件實現(xiàn)功能,保證整體風(fēng)格統(tǒng)一協(xié)調(diào)。
如下圖:在components目錄下新建組件。支持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>
至于如何實現(xiàn)組件功能,這里就不做詳細(xì)介紹了,大家可以去看看之前的分享文章。
https://www.cnblogs.com/xiaoyan2017/p/14978408.html
另外Navbar和Tabbar組件的vue2版本已經(jīng)發(fā)布到了插件市場,如果大家有需要可以去下載,一次性拿走使用。
https://ext.dcloud.net.cn/plugin?id=5592
https://ext.dcloud.net.cn/plugin?id=5593
◆ 主入口main.js配置
在main.js中使用vue3語法,引入pinia狀態(tài)管理、uview-plus組件庫。
/** * 主入口配置 */ import App from './App' import { createSSRApp } from 'vue' // 引入pinia狀態(tài)管理 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語法,獲取手機(jī)系統(tǒng)狀態(tài)欄高度。
<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) => { // 獲取手機(jī)狀態(tài)欄高度 let statusBar = e.statusBarHeight let customBar // #ifndef MP customBar = statusBar + (e.platform == 'android' ? 50 : 45) // #endif // #ifdef MP-WEIXIN // 獲取膠囊按鈕的布局位置信息 let menu = wx.getMenuButtonBoundingClientRect() // 導(dǎo)航欄高度 = 膠囊下距離 + 膠囊上距離 - 狀態(tài)欄高度 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>
由于底部tabbar采用自定義組件,所以在onLaunch中給隱藏掉系統(tǒng)tabbar功能。
如上圖:在vue3 setup中g(shù)lobalData有兼容性問題,所以使用了provide/inject替代方案。
◆ uniapp vue3渲染markdown語法+代碼高亮
uni-chatgpt能很好的兼容適配?h5+小程序+App端?解析markdown語法及代碼高亮顯示。
至于如何在uniapp中實現(xiàn)解析markdown語法模板以及解決鍵盤撐起頁面布局問題,大家可以去看看之前的這篇文章。
https://www.cnblogs.com/xiaoyan2017/p/17502105.html
◆ uniapp多功能Input輸入編輯框
為了整體風(fēng)格一致,會話編輯框采用自定義組件實現(xiàn)功能。
目前兼容h5+小程序+App端,支持input單行文本、textarea多行文本,可自適應(yīng)高度,自定義前綴/后綴插槽及密碼輸入等功能。
該組件已經(jīng)發(fā)布uniapp插件市場,歡迎下載使用。
https://ext.dcloud.net.cn/plugin?id=13275
<template> <div class="ve__input" :class="[ preClass, isClass, sizeClass, {'is-disabled': isDisabled}, {'is-resizable': type == 'textarea' && !autosize}, {'ve__input--group': $slots.prepend || $slots.append}, {'ve__input--group__prepend': $slots.prepend}, {'ve__input--group__append': $slots.append} ]" > <!-- 前置插槽(prepend slot) --> <div v-if="$slots.prepend" class="ve__input--prepend"><slot name="prepend" /></div> <div class="ve__input-wrapper"> <!-- 輸入框前綴 --> <div v-if="$slots.prefix || prefixIcon" class="ve__input--prefix"> <span class="ve__input--prefix__inner"> <slot name="prefix" /> <i v-if="prefixIcon" class="iconfont" :class="prefixIcon"></i> </span> </div> <template v-if="type != 'textarea'"> <input class="ve__input-inner" ref="inputRef" :type="showPassword ? (passwordVisible ? 'text' : 'password') : type" :value="modelValue" :name="name" :maxlength="maxlength" :readonly="readonly" :disabled="isDisabled" :placeholder="placeholder" :cursor-spacing="15" :focus="autofocus" @focus="handleFocus" @blur="handleBlur" @input="handleInput" @change="handleChange" @keydown="handleKeydown" /> </template> <template v-else> <textarea class="ve__input-inner ve__textarea-inner" ref="textareaRef" :value="modelValue" :maxlength="maxlength" :readonly="readonly" :disabled="isDisabled" :placeholder="placeholder" :show-confirm-bar="false" :adjust-position="false" :cursor-spacing="15" :focus="autofocus" :auto-height="isTrue(autosize) || isObject(autosize)" :style="textareaStyle" @focus="handleFocus" @blur="handleBlur" @input="handleInput" @change="handleChange" @keydown="handleKeydown" /> </template> <!-- 輸入框后綴 --> <div v-if="showSuffixVisible" class="ve__input--suffix" @click="handleSearch" @mousedown.prevent> <span class="ve__input--suffix__inner"> <!-- 后綴 --> <template v-if="!showClear || !showPwdVisible"> <slot name="suffix" /> <i v-if="suffixIcon" class="iconfont" :class="suffixIcon"></i> </template> <!-- 清除 --> <i v-if="showClear" class="iconfont ve-icon-close-circle ve__input-clear" @click="handleClear" @mousedown.prevent></i> <!-- 密碼可見 --> <i v-if="showPwdVisible" class="iconfont ve-icon-hide ve__input-password" :class="{'ve-icon-eye1': passwordVisible}" @click="handlePwdVisible" @mousedown.prevent @mouseup.prevent></i> <!-- 限制字?jǐn)?shù) --> <em v-if="showLimitWordVisible" class="ve__input-limitword">{{inputLength}} / {{maxlength}}</em> </span> </div> </div> <!-- 后置插槽(append slot) --> <div v-if="$slots.append" class="ve__input--append" @click="handleSearch" @mousedown.prevent><slot name="append" /></div> </div> </template>
<template> <view class="ugpt__editor"> <view class="ugpt__editor-inner flexbox"> <u-button class="btn" shape="circle" @click="handleUploadImage"><text class="iconfont ve-icon-image fs-32"></text></u-button> <u-button class="btn" shape="circle" @click="showPopover=true"><text class="iconfont ve-icon-yuyin1 fs-32"></text></u-button> <ua-input class="flex1" v-model="editorText" type="textarea" :autosize="{maxRows: 6}" clearable placeholder="Prompt..." @clear="handleClear" /> <u-button type="success" shape="circle" :disabled="!editorText" @click="handleSubmit" style="transform: scale(.8);width: auto;"><text class="iconfont ve-icon-send-o"></text></u-button> </view> </view> </template>
◆ uniapp配置vite.config.js
使用hbuilderx構(gòu)建的uniapp項目同樣支持.env文件及vite.config.js配置。支持修改默認(rèn)運行端口。
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: { // 自定義環(huán)境變量 'process.env.VITE_APPNAME': JSON.stringify('uniapp-chatgpt'), 'process.env.VITE_ENV': env }, // base: '/', // mode: 'development', // Default: 'development' for serve, 'production' for build /*構(gòu)建選項*/ esbuild: { // 打包去除 console.log 和 debugger drop: env.VITE_DROP_CONSOLE && command === 'build' ? ["console", "debugger"] : [] }, /*開發(fā)服務(wù)器選項*/ server: { // 端口 port: env.VITE_PORT, // 運行時自動打開瀏覽器 open: env.VITE_OPEN, // 代理配置 proxy: { // ... } } } })
OK,基于uniapp+vue3構(gòu)建跨端仿制chatgpt模板就分享到這里,希望對大家有所幫助~~??
最后附上一個vue3+electron25桌面端實例項目
https://www.cnblogs.com/xiaoyan2017/p/17468074.html
文章來源:http://www.zghlxwxcb.cn/news/detail-501417.html
?文章來源地址http://www.zghlxwxcb.cn/news/detail-501417.html
到了這里,關(guān)于uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!