更新记录
1.0.0(2026-05-06)
首次发布
- ✅ 支持多平台 API 配置(阿里云百炼、智谱AI、OpenAI、Claude、DeepSeek、Kimi 等)
- ✅ 支持图片上传和视觉识别功能
- ✅ 支持流式响应(H5/App 端实时显示)
- ✅ 支持非流式响应(小程序端自动适配)
- ✅ 支持 Markdown 渲染(代码块、列表、链接、粗体、斜体)
- ✅ 支持会话本地存储和历史记录管理
- ✅ 顶部图标化按钮(⚙ 配置、
平台兼容性
uni-app(4.51)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| - |
√ |
√ |
√ |
√ |
- |
√ |
√ |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
√ |
√ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
安装
- 在 HBuilderX 中,通过插件市场导入
psc-ai-chat
- 或下载插件包,放入项目的
uni_modules/psc-ai-chat 目录
基础用法
<template>
<view class="container">
<psc-ai-chat />
</view>
</template>
自定义配置
<template>
<psc-ai-chat
:default-endpoint="endpoint"
:default-api-key="apiKey"
:default-model="model"
@message-sent="onMessageSent"
@message-received="onMessageReceived"
/>
</template>
<script>
export default {
data() {
return {
// 阿里云百炼配置示例
endpoint: 'https://coding.dashscope.aliyuncs.com/v1/chat/completions',
apiKey: 'your-api-key',
model: 'glm-5'
}
},
methods: {
onMessageSent(message) {
console.log('发送消息:', message)
},
onMessageReceived(message) {
console.log('收到回复:', message)
}
}
}
</script>
Props 属性
| 属性 |
类型 |
默认值 |
说明 |
| defaultEndpoint |
String |
'' |
默认 API 地址 |
| defaultApiKey |
String |
'' |
默认 API Key |
| defaultModel |
String |
'' |
默认模型名称 |
| maxMessages |
Number |
100 |
最大消息数限制 |
Events 事件
| 事件名 |
参数 |
说明 |
| message-sent |
{ content, image, timestamp } |
发送消息时触发 |
| message-received |
{ content, timestamp } |
收到 AI 回复时触发 |
| error |
{ message } |
发生错误时触发 |
API 配置示例
阿里云百炼(推荐)
Endpoint: https://coding.dashscope.aliyuncs.com/v1/chat/completions
API Key: 从阿里云百炼控制台获取
Model: glm-5 / qwen-plus / qwen-turbo / kimi-k2.5
获取方式:
- 登录 阿里云百炼控制台
- 创建 API Key
- 支持模型:GLM-5、Qwen 系列、Kimi、MiniMax 等
智谱AI (GLM)
Endpoint: https://open.bigmodel.cn/api/paas/v4/chat/completions
API Key: 从智谱AI开放平台获取
Model: glm-4 / glm-4-flash / glm-4-plus
OpenAI
Endpoint: https://api.openai.com/v1/chat/completions
API Key: sk-xxxxx
Model: gpt-4o / gpt-4-turbo / gpt-3.5-turbo
DeepSeek
Endpoint: https://api.deepseek.com/v1/chat/completions
API Key: 从 DeepSeek 官网获取
Model: deepseek-chat / deepseek-coder
视觉模型支持
支持图片识别的模型:
| 平台 |
视觉模型 |
| 阿里云百炼 |
qwen-vl-plus, qwen-vl-max |
| 智谱AI |
glm-4v |
| OpenAI |
gpt-4o, gpt-4o-mini, gpt-4-vision |
| Claude |
claude-3-5-sonnet, claude-3-opus |
平台兼容性
| 平台 |
流式响应 |
图片上传 |
说明 |
| H5 |
✅ |
✅ |
需处理 CORS 跨域 |
| App (iOS/Android) |
✅ |
✅ |
完全支持 |
| 微信小程序 |
⚠️ 非流式 |
✅ |
自动切换非流式模式 |
| 支付宝小程序 |
⚠️ 非流式 |
✅ |
自动切换非流式模式 |
| 其他小程序 |
⚠️ 非流式 |
✅ |
需配置域名白名单 |
微信小程序域名配置
微信小程序需在公众平台配置合法域名:
- 登录 微信公众平台
- 开发管理 → 开发设置 → 服务器域名
- 添加对应 API 域名到 request 合法域名
常用域名:
- 阿里云百炼:
coding.dashscope.aliyuncs.com
- 智谱AI:
open.bigmodel.cn
- DeepSeek:
api.deepseek.com
- OpenAI:
api.openai.com
注意事项
- H5 跨域问题:部分 API 不支持 CORS,建议使用 App 或小程序端
- API Key 安全:存储在用户本地,请勿在公共设备保存敏感配置
- 图片上传:仅视觉模型支持,非视觉模型会提示警告
- 流式响应:小程序端自动降级为非流式模式