国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

這篇具有很好參考價值的文章主要介紹了uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

基于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端] 效果如下

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

◆ 技術(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端

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

◆ 功能特性

  1. 沉浸式自定義頂部導(dǎo)航條+底部tabbar
  2. 支持h5+小程序+App端渲染markdown語法及代碼高亮
  3. 基于pinia全局狀態(tài)管理
  4. 基于uview-plus跨端vue3組件庫
  5. 支持會話本地緩存

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

◆ 項目結(jié)構(gòu)目錄

基于hbuilderx創(chuàng)建的項目,整個項目頁面全部采用uniapp vue3語法編碼開發(fā)。

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

如果對uniapp結(jié)合vue3創(chuàng)建多端項目感興趣,可以去看看之前的分享文章。

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

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

◆ Uniapp自定義多端Navbar+Tabbar組件

項目中頂部navbar和底部tabbar均是自定義組件實現(xiàn)功能,保證整體風(fēng)格統(tǒng)一協(xié)調(diào)。

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

如下圖:在components目錄下新建組件。支持easycom模式,無需引入,直接可以使用。

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

<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功能。

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

如上圖:在vue3 setup中g(shù)lobalData有兼容性問題,所以使用了provide/inject替代方案。

◆ uniapp vue3渲染markdown語法+代碼高亮

uni-chatgpt能很好的兼容適配?h5+小程序+App端?解析markdown語法及代碼高亮顯示。

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

至于如何在uniapp中實現(xiàn)解析markdown語法模板以及解決鍵盤撐起頁面布局問題,大家可以去看看之前的這篇文章。

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

◆ uniapp多功能Input輸入編輯框

為了整體風(fēng)格一致,會話編輯框采用自定義組件實現(xiàn)功能。

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

目前兼容h5+小程序+App端,支持input單行文本、textarea多行文本,可自適應(yīng)高度,自定義前綴/后綴插槽及密碼輸入等功能。

該組件已經(jīng)發(fā)布uniapp插件市場,歡迎下載使用。

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

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

<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)運行端口。

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

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

uniapp-chatgpt跨端仿ChatGPT實例|uniapp+vue3+pinia多端聊天模板

?文章來源地址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)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • (小程序)基于uniapp+vite4+vue3搭建跨端項目|uni-app+uview-plus模板

    (小程序)基于uniapp+vite4+vue3搭建跨端項目|uni-app+uview-plus模板

    版本信息: 點擊編輯器的文件 新建 項目(快捷鍵Ctrl+N) 2.選擇uni-app項目,輸入項目名/路徑,選擇項目模板,勾選vue3版本,點擊創(chuàng)建,即可成功創(chuàng)建。 3.點擊編輯器的運行 運行到瀏覽器 選擇瀏覽器 當(dāng)然也可以運行到手機(jī)或模擬器、運行到小程序工具。 到這里一個簡單的

    2024年02月16日
    瀏覽(98)
  • uniapp小程序vue3獲取dom實例createSelectorQuery

    需求,在頁面中,有時需要獲取渲染組件的長寬信息,可以使用 select 選擇器進(jìn)行查詢,直接上代碼如下:

    2024年02月16日
    瀏覽(19)
  • uniapp -- 跨端兼容問題

    uniapp -- 跨端兼容問題

    uniapp 可以一套代碼編譯并運行到不同的平臺,比如各種小程序,H5頁面,APP等等,這也就引出了一個問題,我們想在不同的平臺中顯示不同的樣式或者交互,我們該怎么做? ?? uniapp 官方給出了我們答案,官方根據(jù) C語言 通過 #ifdef、#ifndef 的方式,為 windows、mac 等不同 os 編

    2024年02月11日
    瀏覽(21)
  • uniapp如何實現(xiàn)跨端適配

    Uniapp是一款基于Vue.js的跨平臺開發(fā)框架,可以同時支持多個主流的移動端和Web端平臺。Uniapp提供了一套統(tǒng)一的API和組件庫,可以實現(xiàn)跨端適配。 Uniapp的跨端適配主要通過條件編譯和樣式適配來實現(xiàn)。具體的步驟如下: 使用條件編譯:Uniapp支持使用條件編譯來根據(jù)不同的平臺

    2024年01月16日
    瀏覽(11)
  • ChatGPT AIGC 完成動態(tài)堆積面積圖實例

    ChatGPT AIGC 完成動態(tài)堆積面積圖實例

    先使用ChatGPT?AIGC描述一下堆積面積圖的功能與作用。 公眾號:BI智能數(shù)據(jù)分析 接下來一起看一下ChatGPT做出的動態(tài)可視化效果圖: 這樣的動態(tài)圖案例代碼使用ChatGPT?AIGC完成。 將完整代碼復(fù)制如下:

    2024年02月10日
    瀏覽(14)
  • ChatGPT 與 Python Echarts 完成熱力圖實例

    ChatGPT 與 Python Echarts 完成熱力圖實例

    熱力圖是一種數(shù)據(jù)可視化方式,它通過顏色的變化來表示數(shù)據(jù)的差異和分布。以下是使用熱力圖的一些作用和好處: 數(shù)據(jù)可視化 :熱力圖可以將復(fù)雜的數(shù)據(jù)集轉(zhuǎn)化為更直觀、更易理解的形式。這對于很多人來說,尤其是那些沒有深入統(tǒng)計學(xué)或數(shù)據(jù)科學(xué)知識的人來說,這是非

    2024年02月08日
    瀏覽(17)
  • ChatGPT解答:PYQT5 美化各種控件的方案和實例

    ChatGPT解答:PYQT5 美化各種控件的方案和實例 修改按鈕樣式 修改標(biāo)簽樣式 修改文本框樣式 修改窗口樣式 修改表格樣式 修改下拉框樣式 修改進(jìn)度條樣式 修改復(fù)選框樣式 修改滑動條樣式 修改菜單欄樣式 以上是一些常見控件的美化方案和實例,可以根據(jù)自己的需求進(jìn)行修改和

    2023年04月25日
    瀏覽(20)
  • vue3 實現(xiàn) chatgpt 的打字機(jī)效果

    vue3 實現(xiàn) chatgpt 的打字機(jī)效果

    在做 chatgpt 鏡像站的時候,發(fā)現(xiàn)有些鏡像站是沒做打字機(jī)的光標(biāo)效果的,就只是文字輸出,是他們不想做嗎?反正我想做。于是我仔細(xì)研究了一下,實現(xiàn)了打字機(jī)效果加光標(biāo)的效果,現(xiàn)在分享一下我的解決方案以及效果圖 首先要明確一點,chatgpt 返回的文本格式是 markdown 的,

    2024年02月05日
    瀏覽(27)
  • chatgpt賦能python:Python列表轉(zhuǎn)字符串:最全方法介紹和實例演示

    在Python編程中,列表(list)是非常重要的數(shù)據(jù)類型之一,它可以存放任意類型的數(shù)據(jù),包括數(shù)字、字符串、布爾值等,還可以嵌套其他列表,是一種非常靈活的數(shù)據(jù)結(jié)構(gòu)。 然而,在Python編程實踐中,我們常常需要將列表轉(zhuǎn)換為字符串。比如需要將列表轉(zhuǎn)換為JSON格式,以便進(jìn)行

    2024年02月08日
    瀏覽(91)
  • 跨端技術(shù)棧綜合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的優(yōu)勢與限制

    跨端技術(shù)棧綜合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的優(yōu)勢與限制

    ??「作者簡介」:前端開發(fā)工程師 | 藍(lán)橋云課簽約作者 | 技術(shù)日更博主 | 已過四六級 ??「個人主頁」:阿珊和她的貓 ??「簡歷必備」前后端實戰(zhàn)項目(推薦:??????????) Vue.js 和 Egg.js 開發(fā)企業(yè)級健康管理項目 帶你從入門到實戰(zhàn)全面掌握 uni-app UniApp 是一種 基

    2024年02月16日
    瀏覽(54)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包