uni-chatgpt 一款uniapp+vite4+uview-plus多端ChatGPT模板實例。
全新首發(fā)的一款多端仿制chatgpt智能對話實戰(zhàn)項目，基于
uniApp+Vue3+Pinia+uViewUI+MarkdownIt等技術(shù)開發(fā)搭建項目。支持編譯到h5+小程序+APP端，支持markdown語法解析及代碼高亮。
功能特點
- 全屏沉浸式頂部導(dǎo)航條+底部tabbar
- 支持解析h5+小程序+App端markdown語法及代碼高亮
- 使用pinia全局狀態(tài)管理
- 基于uview-plus跨端vue3組件庫
- 支持會話本地緩存
chatgpt-uniapp支持全端編譯至H5+小程序端+App端。
實現(xiàn)技術(shù)
- 開發(fā)工具：HbuilderX 3.8.4
- 框架技術(shù)：Uniapp+Vite4+Vue3+Pinia
- UI組件庫：uView-plus^3.1.31
- markdown渲染：markdown-it
- 代碼高亮：highlight.js
- 本地緩存：pinia-plugin-unistorage
- 支持編譯：小程序+H5+APP端
項目結(jié)構(gòu)
整個項目均是采用vue3 setup語法糖編碼開發(fā)。
如果對uniapp+vue3創(chuàng)建項目模板不熟悉的話，可以去看看之前的分享文章。
https://blog.csdn.net/yanxinyun1990/article/details/131257075
uniapp自定義導(dǎo)航條+tabbar
為了保證整體風格一致性，頂部導(dǎo)航欄及底部Tabbar采用自定義組件形式。
<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>
目前這兩個組件的vue2版本已經(jīng)發(fā)布到了插件市場，如果大家有需要，可以去下載一次性拿走使用。
https://ext.dcloud.net.cn/plugin?id=5592
https://ext.dcloud.net.cn/plugin?id=5593
uniapp解析markdown語法高亮
uni-chatgpt可以完美解決uniapp解析markdown語法功能及代碼高亮顯示。
之前有過一篇介紹uniapp解析markdown語法文章，大家可以去看看。
https://blog.csdn.net/yanxinyun1990/article/details/131349705
uniapp自定義Editor編輯框
如上圖：輸入框采用自定義組件實現(xiàn)功能。支持input單行文本、textarea多行文本，可自適應(yīng)高度，自定義前綴/后綴插槽及密碼輸入等功能。
ua-input組件已經(jīng)發(fā)布至插件市場，一次性下載拿走使用。
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>
<!-- 限制字數(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>
使用方式也比較簡單，支持easycom引入，直接使用。
<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>
經(jīng)過測試，已經(jīng)完美支持h5+小程序+App端，并且解決了鍵盤撐起布局問題。
App.vue配置
在app.vue中使用vue3語法，使用globalData問題。
<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) => {
// 獲取手機狀態(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>
由于在vue3 setup中使用globalData有兼容性問題，所以選擇provide/inject替代方案。
Ok，以上就是uniapp+vue3跨端開發(fā)chatgpt會話模板的一些分享。
最后附上兩個最近實例項目
-
Electron25+Vite4桌面端AI會話實例
https://blog.csdn.net/yanxinyun1990/article/details/131148077 -
vite4+vue3中后臺管理系統(tǒng)
https://blog.csdn.net/yanxinyun1990/article/details/130144212文章來源：http://www.zghlxwxcb.cn/news/detail-525692.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-525692.html
到了這里，關(guān)于基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板實例的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
