基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例

这篇具有很好参考价值的文章主要介绍了基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uni-chatgpt 一款uniapp+vite4+uview-plus多端ChatGPT模板实例。

全新首发的一款多端仿制chatgpt智能对话实战项目,基于uniApp+Vue3+Pinia+uViewUI+MarkdownIt等技术开发搭建项目。支持编译到h5+小程序+APP端,支持markdown语法解析及代码高亮。

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4

功能特点

  • 全屏沉浸式顶部导航条+底部tabbar
  • 支持解析h5+小程序+App端markdown语法及代码高亮
  • 使用pinia全局状态管理
  • 基于uview-plus跨端vue3组件库
  • 支持会话本地缓存

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
chatgpt-uniapp支持全端编译至H5+小程序端+App端。

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4

实现技术

  • 开发工具:HbuilderX 3.8.4
  • 框架技术:Uniapp+Vite4+Vue3+Pinia
  • UI组件库:uView-plus^3.1.31
  • markdown渲染:markdown-it
  • 代码高亮:highlight.js
  • 本地缓存:pinia-plugin-unistorage
  • 支持编译:小程序+H5+APP端

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4

项目结构

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
整个项目均是采用vue3 setup语法糖编码开发。

如果对uniapp+vue3创建项目模板不熟悉的话,可以去看看之前的分享文章。

https://blog.csdn.net/yanxinyun1990/article/details/131257075

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4

uniapp自定义导航条+tabbar

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
为了保证整体风格一致性,顶部导航栏及底部Tabbar采用自定义组件形式。

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4

<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版本已经发布到了插件市场,如果大家有需要,可以去下载一次性拿走使用。

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

uniapp解析markdown语法高亮

uni-chatgpt可以完美解决uniapp解析markdown语法功能及代码高亮显示。

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
之前有过一篇介绍uniapp解析markdown语法文章,大家可以去看看。

https://blog.csdn.net/yanxinyun1990/article/details/131349705

uniapp自定义Editor编辑框

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4
如上图:输入框采用自定义组件实现功能。支持input单行文本、textarea多行文本,可自适应高度,自定义前缀/后缀插槽及密码输入等功能。

ua-input组件已经发布至插件市场,一次性下载拿走使用。

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

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4

<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>
                        <!-- 限制字数 -->
                        <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>

经过测试,已经完美支持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) => {
                // 获取手机状态栏高度
                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>

由于在vue3 setup中使用globalData有兼容性问题,所以选择provide/inject替代方案。

Ok,以上就是uniapp+vue3跨端开发chatgpt会话模板的一些分享。

最后附上两个最近实例项目

  • Electron25+Vite4桌面端AI会话实例
    https://blog.csdn.net/yanxinyun1990/article/details/131148077

  • vite4+vue3中后台管理系统
    https://blog.csdn.net/yanxinyun1990/article/details/130144212

基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例,uniapp+vue3,vite4+vue3+pinia2,uni-app实例,uniapp-chatgpt,uniapp+vue3,uniapp仿chatgpt,uniapp+vite4文章来源地址https://www.toymoban.com/news/detail-525692.html

到了这里,关于基于uni-app+vue3跨端「h5+小程序+App」仿制chatGPT模板实例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue uni-app App/小程序/H5 通用tree树形结构图

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(46)
  • uni-app:vue3 + uni-app 在微信小程序中无法使用app.component全局注册组件

    按上文中的代码执行后,会发现在微信小程序开发中全局注册的组件是无法显示的,这是uniapp的一个未解决bug, 在uniapp中出了可以通过vue实例的component方法注册全局组件外,uniapp支持另一种全局注册的方式,就是通过 easycom 扫描注册,步骤如下 easycom 的扫描流程是:通过代码

    2024年02月16日
    浏览(91)
  • 小程序-uni-app:uni-app-base项目基础配置及使用 / uni-app+vue3+ts+vite+vscode

    目前(20230605)uni-app最新版本(3.8.4.20230531) 一、官网文档 微信开放文档 uni-app官网 二、创建项目 项目目标:vue3+ts+vite+vscode 创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板) npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base ​ 本文创建成功 ​ 为了验

    2024年02月05日
    浏览(481)
  • 小程序-uni-app:uni-app-base项目基础配置及使用/uni-app+vue3+ts+vite+vscode

    目前(20230605)uni-app最新版本(3.8.4.20230531) 一、官网文档 微信开放文档 uni-app官网 二、创建项目 项目目标:vue3+ts+vite+vscode 创建以 typescript 开发的工程(如命令行创建失败,请直接访问 gitee 下载模板) npx degit dcloudio/uni-preset-vue#vite-ts uniapp-base ​ 本文创建成功 ​ 为了验

    2024年02月15日
    浏览(90)
  • uni-app+vue3微信小程序切换主题皮肤

    思路来源: https://blog.csdn.net/qq_42611074/article/details/128236458 引用store做全局css变量替换; store.js 添加全局的监听函数 common/themeMixin.js main.js 给要切换的页面加上css变量 login.vue 升级版 在base.css写好主题配色; 引用store做全局css变量替换; store.js 添加全局的监听函数 common/themeM

    2024年02月12日
    浏览(60)
  • uni-app微信小程序分享微信好友与分享到朋友圈功能【vue3+ts+uni-app+vite】

    微信小程序开发结束之后,点击右上角三个点显示: 1、创建share.ts文件 2、全局使用, 在 main.ts 里面 添加全局的 mixin 这样配置结束之后整个小程序所有页面点击右上角转发分享都走的这个文件,如果需要单个页面可以转发,可以看第三点 3、在需要的页面进行调用就行啦 a.

    2024年02月14日
    浏览(66)
  • uni-app开发微信小程序 vue3写法添加pinia

    使用uni-app开发,选择vue3语法,开发工具是HBliuderX。虽然内置有vuex,但是个人还是喜欢用Pinia,所以就添加进去了。 Pinia官网连接 第一步: 在项目根目录下执行命令: npm install pinia 第二步: 配置main.js文件 第三步,使用: 创建store文件夹、创建store/index.js 然后创建store/modu

    2024年02月03日
    浏览(54)
  • 如何用uni-app+vue3+vant开发微信小程序

    uni-app之前一直只支持vue2语法, 2021年8月:新版支持 了vue3 开发,App平台编译器升级为 Vite; 新版 uni-app 框架主要做了三大改进: 重写框架内核:基于 vue3 + ts 重写内置组件和API,实现更彻底、更高效的 tree-shaking ; 新增支持 Vite 构建工具,在H5平台实现秒开预览; 新增支持

    2024年02月09日
    浏览(63)
  • uni-app vue3+ts+vite开发小程序采坑说明

    uniapp v3 搭建项目使用官方推荐命令 或者是使用 uniapp官方gitee 模板库 在项目启动前UI调用,建议使用 扩展组件(uni-ui)里面有很多组件,不能满足需求自己可以手动修改 uni_modules 为在插件市场下载出来的插件目录(uni-app官方维护的组件库,能够兼容vue3) 自动引用components文件

    2024年02月09日
    浏览(44)
  • uni-app基于vue实现商城小程序

    目录 一、前言 二、功能效果图 1.首页 2.分类 ​3.活动 4.我的 ​5.商品详情 6.购物车 三、代码实现 1.项目结构截图 uni-app,Hbuilder 2.首页源码 3.数据模拟通讯 四、总结 参考“网易严选”小程序 项目采用传统vue项目结构,即uni-app打包和运行成小程序,使用HBuilder开发工具开发项

    2024年02月03日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包