基于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=5592
https://ext.dcloud.net.cn/plugin?id=5593
在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中使用vue3 setup语法,获取手机系统状态栏高度。
由于底部tabbar采用自定义组件,所以在onLaunch中给隐藏掉系统tabbar功能。
如上图:在vue3 setup中globalData有兼容性问题,所以使用了provide/inject替代方案。
uni-chatgpt能很好的兼容适配 h5+小程序+App端 解析markdown语法及代码高亮显示。
至于如何在uniapp中实现解析markdown语法模板以及解决键盘撑起页面布局问题,大家可以去看看之前的这篇文章。
https://www.cnblogs.com/xiaoyan2017/p/17502105.html
为了整体风格一致,会话编辑框采用自定义组件实现功能。
目前兼容h5+小程序+App端,支持input单行文本、textarea多行文本,可自适应高度,自定义前缀/后缀插槽及密码输入等功能。
使用hbuilderx构建的uniapp项目同样支持.env文件及vite.config.js配置。支持修改默认运行端口。 import { defineConfig, loadEnv } from 'vite' // https://vitejs.dev/config/ }) OK,基于uniapp+vue3构建跨端仿制chatgpt模板就分享到这里,希望对大家有所帮助~~ 最后附上一个vue3+electron25桌面端实例项目
<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>
◆ uniapp配置vite.config.js
import uni from '@dcloudio/vite-plugin-uni'
import { resolve } from 'path'
import { parseEnv } from './utils/env'
export default defineConfig(({ command, mode }) => {
const viteEnv = loadEnv(mode, __dirname)
const env = parseEnv(viteEnv)return {
plugins: \[
uni()
\],
define: {
// 自定义环境变量
'process.env.VITE\_APPNAME': JSON.stringify('uniapp-chatgpt'),
'process.env.VITE\_ENV': env
},
// base: '/',
// mode: 'development', // Default: 'development' for serve, 'production' for build
/\*构建选项\*/
esbuild: {
// 打包去除 console.log 和 debugger
drop: env.VITE\_DROP\_CONSOLE && command === 'build' ? \["console", "debugger"\] : \[\]
},
/\*开发服务器选项\*/
server: {
// 端口
port: env.VITE\_PORT,
// 运行时自动打开浏览器
open: env.VITE\_OPEN,
// 代理配置
proxy: {
// ...
}
}
}
手机扫一扫
移动阅读更方便
你可能感兴趣的文章