微信小程序接入deepseek
先上效果

话不多说,直接上代码(本人用的hbuilder X+uniapp)
<template><view class="container"><!-- 聊天内容区域 --><scroll-view class="chat-list" scroll-y :scroll-top="scrollTop":scroll-with-animation="true"><view v-for="(item, index) in chatList" :key="index" class="chat-item":class="item.role === 'user' ? 'user' : 'assistant'"><view class="content-box"><text class="content">{{ item.content }}</text><text class="time">{{ item.time }}</text></view><view v-if="item.loading" class="loading"><view class="dot"></view><view class="dot"></view><view class="dot"></view></view></view></scroll-view><!-- 输入区域 --><view class="input-area"><input class="input" v-model="inputMessage" placeholder="请输入问题..."@confirm="sendMessage":disabled="isSending"placeholder-class="placeholder"/><button class="send-btn" @tap="sendMessage":disabled="isSending || !inputMessage">{{ isSending ? '发送中...' : '发送' }}</button></view></view>
</template><script>
const API_URL = 'https://api.deepseek.com/v1/chat/completions' // 替换为实际API地址
const API_KEY = 'sk-' // 替换为你的API密钥export default {data() {return {chatList: [],inputMessage: '',isSending: false,scrollTop: 0}},methods: {async sendMessage() {if (!this.inputMessage.trim() || this.isSending) returnconst userMessage = {role: 'user',content: this.inputMessage,time: this.getCurrentTime(),loading: false}// 添加用户消息console.log(userMessage)this.chatList.push(userMessage)this.inputMessage = ''// 添加AI的loading状态const assistantMessage = {role: 'assistant',content: '',time: '',loading: true}this.chatList.push(assistantMessage)this.isSending = truethis.scrollToBottom()try {const res = await uni.request({url: API_URL,method: 'POST',header: {'Content-Type': 'application/json','Authorization': `Bearer ${API_KEY}`},data: {model: 'deepseek-chat', // 模型messages: this.chatList.filter(item => !item.loading).map(item => ({role: item.role,content: item.content}))}})// 更新AI消息const lastIndex = this.chatList.length - 1this.chatList[lastIndex] = {role: 'assistant',content: res.data.choices[0].message.content,time: this.getCurrentTime(),loading: false}this.$forceUpdate()} catch (error) {console.error('API请求失败:', error)uni.showToast({title: '请求失败,请重试',icon: 'none'})this.chatList.pop() // 移除loading状态的消息} finally {this.isSending = falsethis.scrollToBottom()}},getCurrentTime() {const date = new Date()return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`},scrollToBottom() {this.$nextTick(() => {this.scrollTop = Math.random() * 1000000 // 通过随机数强制滚动到底部})}}
}
</script><style scoped>
/* 新增修改的样式 */
.container {padding-bottom: 120rpx; /* 给输入框留出空间 */
}.chat-list {padding: 20rpx 20rpx 160rpx; /* 底部留白防止遮挡 */
}.chat-item {margin: 30rpx 0;
}.content-box {max-width: 75%;padding: 20rpx 28rpx;border-radius: 16rpx;margin: 0 20rpx;position: relative;
}.user .content-box {background: #1989fa;color: white;margin-left: auto; /* 右对齐关键属性 */
}.assistant .content-box {background: #f8f8f8;color: #333;margin-right: auto; /* 左对齐关键属性 */
}.time {font-size: 24rpx;color: #999;position: absolute;bottom: -40rpx;white-space: nowrap;
}/* 新版加载动画 */
.loading {display: flex;align-items: center;padding: 20rpx;
}.dot {width: 12rpx;height: 12rpx;background: #ddd;border-radius: 50%;margin: 0 4rpx;animation: bounce 1.4s infinite ease-in-out;
}.dot:nth-child(2) {animation-delay: 0.2s;
}.dot:nth-child(3) {animation-delay: 0.4s;
}@keyframes bounce {0%, 80%, 100% { transform: translateY(0);}40% {transform: translateY(-10rpx);}
}/* 输入区域样式优化 */
.input-area {position: fixed;bottom: 0;left: 0;right: 0;display: flex;align-items: center;padding: 20rpx;background: #fff;border-top: 1rpx solid #eee;box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.05);
}.input {flex: 1;height: 80rpx;padding: 0 28rpx;background: #e9e9e9;border-radius: 40rpx;font-size: 28rpx;color: #333;border: none;
}.placeholder {color: #999;
}.send-btn {width: 140rpx;height: 80rpx;line-height: 80rpx;margin-left: 20rpx;background: #1989fa;color: white;border-radius: 40rpx;font-size: 28rpx;border: none;
}.send-btn[disabled] {opacity: 0.6;background: blue;color: white;
}
</style>
注:
1、修改你的密钥
2、需要在微信公众平台里面配置服务器域名(在开发管理里面)
https://api.deepseek.com
3、如果接口中有返回数据,但页面中没有数据展示,同时还提示API请求失败,打开接口返回的地址,与下面这段代码一一对应,看路径有没有问题
content: res.data.choices[0].message.content

相关文章:
微信小程序接入deepseek
先上效果 话不多说,直接上代码(本人用的hbuilder Xuniapp) <template><view class"container"><!-- 聊天内容区域 --><scroll-view class"chat-list" scroll-y :scroll-top"scrollTop":…...
推荐算法和推荐系统入门第一趴
以下是推荐系统技术总结的架构梳理和建议表达思路: 从原理到生产环境:推荐系统核心技术与实战代码解析 一、推荐算法的演进图谱 传统算法三剑客 ![推荐系统算法分类示意图] (使用Mermaid绘制算法分类关系图,清晰展示技术演进&am…...
unity pico开发 四 物体交互 抓取 交互层级
文章目录 手部设置物体交互物体抓取添加抓取抓取三种类型抓取点偏移抓取事件抓取时不让物体吸附到手部 射线抓取交互层级 手部设置 为手部(LeftHandController)添加XRDirInteractor脚本 并添加一个球形碰撞盒,勾选isTrigger,调整大小为0.1 …...
基于深度学习的青花瓷图像检索系统开发与实现
目录 1.研究背景与目的 1.1课题背景 1.2研究目的 二、调研资料情况 2.1图像分割研究现状 2.2图像检索调研 2.2.1选择深度学习进行检索的原因及优势 2.2.2基于深度学习的图像检索技术的发展 2.2.3基于深度学习的图像检索的研究重点 2.3基于深度学习的图像检索方法调研 …...
uniapp 系统学习,从入门到实战(八)—— Vuex 的使用
全篇大概 4500 字(含代码),建议阅读时间 30min 📚 目录 Vuex核心概念解析在 UniApp 中集成Vuex状态管理与数据共享实践总结 一、Vuex 核心概念解析 1.1 什么是状态管理 在跨多组件的大型应用中,不同页面/组件需要共享和修改相同数据时&am…...
Vue Hooks 深度解析:从原理到实践
Vue Hooks 深度解析:从原理到实践 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家!点我试试!! 文章目录 Vue Hooks 深度解析:从原理到实践一、背景…...
django中序列化器serializer 的高级使用和需要注意的点
在 Django REST framework(DRF)中,序列化器(Serializer)是一个强大的工具,用于将复杂的数据类型(如 Django 模型实例)转换为 Python 原生数据类型,以便将其渲染为 JSON、XML 等格式,同时也能将接收到的外部数据反序列化为 Django 模型实例。以下将介绍序列化器的高级…...
靶场(二)---靶场心得小白分享
开始: 看一下本地IP 21有未授权访问的话,就从21先看起 PORT STATE SERVICE VERSION 20/tcp closed ftp-data 21/tcp open ftp vsftpd 2.0.8 or later | ftp-anon: Anonymous FTP login allowed (FTP code 230) |_Cant get dire…...
PHP Error处理指南
PHP Error处理指南 引言 在PHP开发过程中,错误处理是一个至关重要的环节。正确的错误处理不仅能够提高代码的健壮性,还能提升用户体验。本文将详细介绍PHP中常见的错误类型、错误处理机制以及最佳实践,帮助开发者更好地应对和处理PHP错误。 PHP错误类型 在PHP中,错误主…...
视频输入设备-V4L2的开发流程简述
一、摄像头的工作原理与应用 基本概念 V4L2的全称是Video For Linux Two,其实指的是V4L的升级版,是linux系统关于视频设备的内核驱动,同时V4L2也包含Linux系统下关于视频以及音频采集的接口,只需要配合对应的视频采集设备就可以实…...
【Manus资料合集】激活码内测渠道+《Manus Al:Agent应用的ChatGPT时刻》(附资源)
DeepSeek 之后,又一个AI沸腾,冲击的不仅仅是通用大模型。 ——全球首款通用AI Agent的破圈启示录 2025年3月6日凌晨,全球AI圈被一款名为Manus的产品彻底点燃。由Monica团队(隶属中国夜莺科技)推出的“全球首款通用AI…...
Mybatis集合嵌套查询,三级嵌套
三个表:房间 玩家 玩家信息 知识点:Mybatis中级联有关联(association)、集合(collection)、鉴别器(discriminator)三种。其中,association对应一对一关系、collectio…...
thinkphp5.1 在fetch模版就超时
场景 当被渲染模版不存在,请求不响应任何内容,过一会就timeout 排查过程 使用xdebug,追踪代码,发现走到D:\temporary_files\m40285_mini\40285_mini\thinkphp\library\think\exception\Handle.php,进入死循环,一直…...
Dockerfile 深入浅出:从基础到进阶全解析
Dockerfile 深入浅出:从基础到进阶全解析 各位同学,大家好!欢迎来到今天的 Dockerfile 课程。Docker 技术在当今的软件开发和部署领域可以说是非常热门,而 Dockerfile 作为构建 Docker 镜像的关键文件,掌握它对于我们…...
CAD2025电脑置要求
Windows 系统 操作系统:64 位 Microsoft Windows 11 和 Windows 10 version 1809 或更高版本。 处理器 基本要求:2.5-2.9GHz 处理器,不支持 ARM 处理器。 推荐配置:3GHz 以上处理器(基础),4GHz …...
android App主题颜色动态更换
如何在Android开发中更换主题颜色,现在他们又问了关于动态更换应用主题颜色的问题。看来他们可能在实现过程中遇到了困难,或者需要更详细的动态切换指导。首先,我需要回顾之前的回答,看看是否已经覆盖了动态切换的部分,…...
微服务,服务治理nacos,负载均衡LOadBalancer,OpenFeign
1.微服务 简单来说,微服务架构风格[1]是一种将一个单一应用程序开发为一组小型服务的方法,每个服务运行在 自己的进程中,服务间通信采用轻量级通信机制(通常用HTTP资源API)。这些服务围绕业务能力构建并 且可通过全自动部署机制独立部署。这…...
浅论数据库聚合:合理使用LambdaQueryWrapper和XML
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、数据库聚合替代内存计算(关键优化)二、批量处理优化四、区域特殊处理解耦五、防御性编程增强 前言 技术认知点:使用 XM…...
FastGPT 引申:混合检索完整实例
文章目录 FastGPT 引申:混合检索完整实例1. 各检索方式的初始结果2. RRF合并过程3. 合并后的结果4. Rerank重排序后5. 最终RRF合并6. 内容总结 FastGPT 引申:混合检索完整实例 下边通过一个简单的例子说明不同检索方式的分值变化过程,假设我…...
Socket.IO聊天室
项目代码 https://github.com/R-K05/Socket.IO- 创建项目 服务端项目和客户端项目 安装Socket依赖 服务端 npm i socket.io 客户端 npm i socket.io-client 客户端添加聊天页面 源码 服务端 app.js const express require("express") const app express()co…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
C# 类和继承(抽象类)
抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...
Axios请求超时重发机制
Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式: 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具,可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板,允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板,并通…...
2023赣州旅游投资集团
单选题 1.“不登高山,不知天之高也;不临深溪,不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...
Linux 中如何提取压缩文件 ?
Linux 是一种流行的开源操作系统,它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间,使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的,要在 …...
力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案
目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后,迭代器会失效,因为顺序迭代器在内存中是连续存储的,元素删除后,后续元素会前移。 但一些场景中,我们又需要在执行删除操作…...
