当前位置：首页 > news >正文

微信小程序接入deepseek

news 来源：原创 2025/8/27 15:06:27

先上效果

在这里插入图片描述

话不多说，直接上代码（本人用的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":…...

编程日记 2025/8/27 15:06:27

大白话react第十六章React 与 WebGL 结合的实战项目

大白话react第十六章React 与 WebGL 结合的实战项目 1. 项目简介 React 是一个构建用户界面的强大库，而 WebGL 则允许我们在网页上实现高性能的 3D 图形渲染。将它们结合起来，我们可以创建出炫酷的 3D 网页应用，比如 3D 产品展示、虚拟场景…...

编程日记 2025/8/25 7:34:32

DeepSeek-R1：引领AI领域革新，MLA技术助力模型迁移

摘要 DeepSeek的MLA技术实现了大型机器学习模型的轻松迁移，其突破性产品DeepSeek-R1凭借显著降低的训练和推理成本，吸引了业界广泛关注。MLA技术的核心在于创新性的低秩压缩键值缓存架构，使得推理成本大幅减少，仅为同等性能大型模…...

编程日记 2025/8/27 15:03:49

Nginx：从入门到实战使用教程

全方位解析Nginx：从入门到实战使用教程 Nginx安装、配置详细教程文章目录全方位解析Nginx：从入门到实战使用教程导语一、Nginx简介二、Nginx安装与配置 1. 在CentOS系统上安装Nginx：2. 在Ubuntu系统上安装Nginx：3. Nginx配置文…...

编程日记 2025/8/27 15:03:49

SyntaxError: Unexpected token ‘xxx‘

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》 🍚 蓝桥云课签约作者、…...

编程日记 2025/8/27 15:03:49

GaussDB安全配置指南：从认证到防御的全方面防护

一、引言随着企业数据规模的扩大和云端化进程加速，数据库安全性成为运维的核心挑战之一。GaussDB作为一款高性能分布式数据库，提供了丰富的安全功能。本文将从认证机制、权限控制、数据加密、审计日志等维度，系统性地讲解如何加固 Ga…...

编程日记 2025/8/27 15:06:27

[项目]基于FreeRTOS的STM32四轴飞行器: 四.LED控制

基于FreeRTOS的STM32四轴飞行器: 四.LED控制一.配置Com层二.编写驱动一.配置Com层先在Com_Config.h中定义灯位置的枚举类型： 之后定义Led的结构体： 定义飞行器状态： 在Com_Config.c中初始化四个灯： 在Com_Config.h外部声明…...

编程日记 2025/8/27 15:03:49

Python——计算机网络

一.ip 1.ip的定义 IP是“Internet Protocol”的缩写，即“互联网协议”。它是用于计算机网络通信的基础协议之一，属于TCP/IP协议族中的网络层协议。IP协议的主要功能是负责将数据包从源主机传输到目标主机，并确保数据能够在复杂的网络环境中正…...

编程日记 2025/8/27 15:03:48

【并发编程】聊聊定时任务ScheduledThreadPool的实现原理和源码解析

ScheduledThreadPoolExecutor 是在线程池的基础上拓展的定时功能的线程池，主要有四种方式，具体可以看代码， 这里主要描述下 scheduleAtFixedRate ： 除了第一次执行的时间，后面任务执行的时间为 time MAX(任务执行时…...

编程日记 2025/8/26 22:29:32

nginx-静态资源部署

目录静态资源概述静态资源配置指令 listen指令 server_name指令精确匹配 ?编辑 ?编辑使用通配符匹配使用正则表达式匹配匹配执行顺序 default_server属性 location指令 root指令 alias指令 root与alisa指令的区别 index指令 error_page指令直接使用…...

编程日记 2025/8/27 15:02:20

WebGPT: 基于浏览器辅助的问答系统，结合人类反馈优化答案质量

【摘要】本论文介绍了WebGPT，这是一种通过浏览器辅助问答系统来使用人类反馈进行训练和优化的模型。具体来说，该系统通过与基于文本的网络浏览环境互动，使模型能够搜索和导航网络，从而提高其回答长文本问题的能力。通过将任务设计为人类可以完成的任务，研究人员能够利用…...

编程日记 2025/8/26 22:48:48

C# 异步任务队列封装

在 C# 中，可以使用 Task 和 ConcurrentQueue 来构建一个异步任务队列，确保任务按照 FIFO（先进先出）顺序执行，并支持并发安全。设计方案任务队列 (ConcurrentQueue<Func>) 存储异步任务（每个任务都…...

编程日记 2025/8/27 15:00:09

安装并运行hadoop程序

1.在虚拟机上安装javaJDK （1）把javaJDK文件上传到服务器在opt文件夹下新建一个software文件夹，将jdk拖入software （2）解压文件在opt文件夹下新建一个module文件夹，确认上传成功之后，在softwa…...

编程日记 2025/8/27 15:01:20

第TR3周：Pytorch复现Transformer

🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 Transformer通过自注意力机制，改变了序列建模的方式，成为AI领域的基础架构编码器：理解输入，提取上下文特征…...

编程日记 2025/8/24 10:42:09

51c视觉~3D~合集2

我自己的原文哦~ https://blog.51cto.com/whaosoft/13422809 #中科大统一内外参估计和3DGS训练这下真的不用相机标定了？ 同时优化相机的内外参和无序图像数据在给定一组来自3D场景的图像及其相应的相机内参和外参的情况下，3D高斯喷溅&#xff…...

编程日记 2025/8/27 15:00:07

dify在腾讯云服务器上部署

Dify 是一个开源的 LLM 应用开发平台。提供从 Agent 构建到 AI workflow 编排、RAG 检索、模型管理等能力，轻松构建和运营生成式 AI 原生应用，比 LangChain 更易用。首先到dify官方网站上有详细介绍 https://docs.dify.ai/zh-hans/getting-started/ins…...

编程日记 2025/8/27 15:00:07

Redis——缓存穿透、击穿、雪崩

缓存穿透什么是缓存穿透缓存穿透说简单点就是大量请求的 key 根本不存在于缓存中，导致请求直接到了数据库上，根本没有经过缓存这一层。举个例子：某个黑客故意制造我们缓存中不存在的 key 发起大量请求，导致大量请求落到数据库…...

编程日记 2025/8/27 15:00:08

Java 并发编程：synchronized 与 Lock 的区别

精心整理了最新的面试资料和简历模板，有需要的可以自行获取点击前往百度网盘获取点击前往夸克网盘获取 Java 并发编程：synchronized 与 Lock 的深度对比在 Java 多线程编程中，同步机制是保证线程安全的核心手段。synchronized 关键字和 …...

编程日记 2025/8/27 15:00:08

12组复古暖色调旅行电影摄影照片调色Lightroom预设 12 Warm Vintage Film Lightroom Presets

使用这 12 种暖色复古胶片 Lightroom 预设来转换您的照片，旨在将经典胶片的永恒精髓带入您的数字编辑中。每个预设都经过精心制作，以唤起丰富的色彩、微妙的颗粒和怀旧的色调。这些预设非常适合寻求复古魅力和现代精度融合的摄影师，将毫不费…...

编程日记 2025/8/26 19:27:28

WebSocket：实现实时通信的利器

在现代Web应用中，实时通信变得越来越重要。无论是聊天应用、在线游戏，还是实时数据推送，传统的HTTP请求-响应模式已经无法满足需求。WebSocket作为一种全双工通信协议，应运而生，成为实现实时通信的利器。本文将深入探讨…...

编程日记 2025/8/27 15:01:50

小谈java内存马

基础知识 （代码功底不好，就找ai优化了一下） Java内存马是一种利用Java虚拟机（JVM）动态特性（如类加载机制、反射技术等）在内存中注入恶意代码的攻击手段。它不需要在磁盘上写入文件&#xff0c…...

编程日记 2025/8/27 15:04:30

wordpress自定the_category的输出结构

通过WordPress的过滤器the_category来自定义输出内容。方法很简单，但是很实用。以下是一个示例代码： function custom_the_category($thelist, $separator , $parents ) {// 获取当前文章的所有分类$categories get_the_category();if (empty($categ…...

编程日记 2025/8/24 1:36:16

Flink深入浅出之01：应用场景、基本架构、部署模式

Flink 1️⃣ 一、知识要点 📖 1. Flink简介 Apache Flink — Stateful Computations over Data StreamsApache Flink 是一个分布式大数据处理引擎，可对有界数据流和无界数据流进行有状态的计算。Flink 能在所有常见集群环境中运行，并能以…...

编程日记 2025/8/17 19:52:30

安装 react脚手架 React官方提供的脚手架工程Create React App：https://github.com/facebook/create-react-app npm install create-react-app -g 全局安装 create-react-app my-react (my-react为项目名称，可以自定义) cd my-react 启动项目&#xff1a…...

编程日记 2025/8/24 22:21:48

TypeError: Cannot set properties of undefined (setting ‘xxx‘)

编程日记 2025/8/26 0:55:48

使用Node.js从零搭建DeepSeek本地部署（Express框架、Ollama）

目录 1.安装Node.js和npm2.初始化项目3.安装Ollama4.下载DeepSeek模型5.创建Node.js服务器6.运行服务器7.Web UI对话-Chrome插件-Page Assist 1.安装Node.js和npm 首先确保我们机器上已经安装了Node.js和npm。如果未安装，可以通过以下链接下载并安装适合我们操作系…...

编程日记 2025/8/18 19:48:07

考网络安全工程师证要什么条件才能考?

在当今数字化时代，网络安全问题日益凸显，网络安全工程师成为了一个备受瞩目的职业。许多有志于投身这一行业的学子或职场人士，都希望通过考取网络安全工程师证书来提升自己的专业素养和竞争力。那么，考网络安全工程师证需要具备哪…...

编程日记 2025/8/26 20:13:41

【情境领导者】评估情境——准备度水平

本系列是看了《情境领导者》一书，结合自己工作的实践经验所做的学习笔记。在文章【情境领导者】评估情境——什么是准备度-CSDN博客我们提到准备度是由能力和意愿两部分组成的。准备度水平而我们要怎么去评估准备度呢？准备度水平是指人们在每项工作中…...

编程日记 2025/8/23 7:40:58

一套企业级智能制造云MES系统源码， vue-element-plus-admin+springboot

MES应该是继ERP之后制造企业信息化最热门的管理软件，它适应产品个性化与敏捷化制造需求，满足生产过程精益管理而产生和发展起来的信息系统。作为企业实现数字化与智能化的核心支撑技术与重要组成部分，MES在帮助制造企业走向数字化、智能化等…...

编程日记 2025/8/24 1:50:08

蓝桥杯备考：动态规划线性dp之传球游戏

按照动态规划的做题顺序 step1：定义状态表示 f[i][j] 表示第i次传递给了第j号时一共有多少种方案 step2: 推到状压公式 step3:初始化 step4:最终结果实际上就是f[m][1] #include <iostream> #include <cstring> using namespace std;const int N …...

编程日记 2025/8/21 22:58:38

网络编程 day05

网络编程 day05 12. SQL 数据库概念常用数据库MySQL与SQLite的区别 SQL基础SQL语句使用基本语句的使用—命令行操作sqlite3系统命令sqlite命令 sqlite3编程—函数接口 13. setsockopt：设置套接字属性 12. SQL 数据库概念数据库是“按照数据结构来组织、存储和管理…...

编程日记 2025/8/27 13:45:31

Excel中COUNTIF用法解析

COUNTIF 是 Excel 中一个非常实用的函数，用于统计满足某个条件的单元格数量。它的基本语法如下： 基本语法 COUNTIF(范围, 条件) 范围：需要统计的单元格区域，例如 A1:A10 或整列 A:A。条件：用于判断哪些单元格需要被…...

编程日记 2025/8/25 17:10:43

使用XShell连接RHEL9并配置yum阿里源

目录 1.先在终端查看本地IP 2.打开XShell进行连接方法一： 方法二： 3.关闭防火墙及SElinux 4.更改主机名为node2 5.修改YUM源为阿里源（将系统中国外的yum文件换成国内的阿里镜像文件） 1.找到本机的yum配置文件 2.删除原有…...

编程日记 2025/8/21 9:34:45

FPGA时序约束的几种方法

一，时钟约束时钟约束是最基本的一个约束，因为FPGA工具是不知道你要跑多高的频率的，你必要要告诉工具你要跑的时钟频率。时钟约束也就是经常看到的Fmax，因为Fmax是针对“最差劲路径”，也就是说，如果该“最差劲路径”得到好成绩，那些不是最差劲的路径的成绩当然比…...

编程日记 2025/8/26 4:55:11

C# 在Excel中插入和操作切片器-详解

目录使用工具 C# 在Excel中插入切片器插入切片器到透视表插入切片器到表格 C# 在Excel中修改切片器 C# 删除Excel中的切片器切片器（Slicer）是Excel中的一个强大工具，它提供了直观且交互式的方式来过滤数据。通过切片器，…...

编程日记 2025/8/27 0:42:06

新编大学应用英语综合教程3 U校园全套参考答案

获取全套答案： 链接：https://pan.quark.cn/s/abaa0338724e...

编程日记 2025/8/19 6:41:07

Kubernetes中的 iptables 规则介绍

#作者：邓伟文章目录一、Kubernetes 网络模型概述二、iptables 基础知识三、Kubernetes 中的 iptables 应用四、查看和调试 iptables 规则五、总结在 Kubernetes 集群中，iptables 是一个核心组件， 用于实现服务发现和网络策略。iptables 通…...

编程日记 2025/8/23 7:49:19

操作系统 2.2-多进程总体实现

多个进程使用CPU的图像如何使用CPU呢？ 通过让程序执行起来来使用CPU。如何充分利用CPU呢？ 通过启动多个程序，交替执行来充分利用CPU。启动了的程序就是进程，所以是多个进程推进操作系统需要记录这些进程，并按照…...

编程日记 2025/8/27 3:15:26

基于SeaShips数据集的yolov8训练教程

之前已经试过在yolov3和faster-rcnn上训练SeaShips数据集，本次在yolov8上进行训练。 yolov8的训练有两种方式，一种是在mmdetection框架下下载mmyolo运行，另一种是直接采用ultralytics。本文两种方法都会介绍。目录一、mmyolo 1.1 创建环…...

编程日记 2025/8/25 19:51:25

【时间序列聚类】从数据中发现隐藏的模式

在大数据时代，时间序列数据无处不在。无论是股票市场的价格波动、天气的变化趋势，还是用户的点击行为，这些数据都随着时间推移而产生。然而，面对海量的时间序列数据，我们如何从中提取有价值的信息？答案之一…...

编程日记 2025/8/24 6:00:33

在线研讨会 | 加速游戏和AI应用，全面认识Imagination DXTP GPU

近日，Imagination宣布推出 Imagination DXTP GPU IP，该产品重新定义了智能手机和其他功耗受限设备的图形和计算加速。它专为高效的效率而设计，能够提供运行AI、游戏和用户界面体验所需的性能，确保这些体验可以全天候流畅且持续地运…...

编程日记 2025/8/27 4:51:15

百度SEO关键词布局从堆砌到场景化的转型指南

百度SEO关键词布局：从“堆砌”到“场景化”的转型指南引言在搜索引擎优化（SEO）领域，关键词布局一直是核心策略之一。然而，随着搜索引擎算法的不断升级和用户需求的多样化，传统的“关键词堆砌”策略已经…...

编程日记 2025/8/23 16:08:42

数据库基础练习1

目录 1.创建数据库和表 2.插入数据创建一个数据库，在数据库种创建一张叫heros的表，在表中插入几个四大名著的角色： 1.创建数据库和表 #创建表 CREATE DATABASE db_test;#查看创建的数据库 show databases; #使用db_test数据库 USE db_te…...

编程日记 2025/8/25 22:32:39

UVC for USBCamera in Android

基于UVC 协议，完成USBCamera 开发文章目录一、目的：二、USBCamera 技术实现方案难点三、误区：四、基础补充、资源参考架构图了解Camera相关专栏零散知识了解部分相机源码参考，学习API使用，梳理流程，偏应…...

编程日记 2025/8/21 12:23:09

C++学习之路，从0到精通的征途：入门基础

目录一.C的第一个程序二.命名空间 1.namespace的价值 2.命名空间的定义 3.命名空间使用三.C的输入与输出 1.<iostream> 2.流 3.std(standard) 四.缺省参数 1.缺省参数的定义 2.全缺省/半缺省 3.声明与定义五.函数重载 1.参数个数不同 2.参数类型不…...

编程日记 2025/8/27 10:20:25

RSA-OAEP填充方案与定时攻击防护

目录 RSA-OAEP填充方案与定时攻击防护一、前言二、RSA 与 OAEP 填充方案概述2.1 RSA 加密算法基础2.2 OAEP 填充方案的引入2.3 数学公式推导三、定时攻击原理与防护策略3.1 定时攻击的基本原理3.2 防护定时攻击的策略四、基于 Python 的 RSA-OAEP 与定时攻击防护实现五、完整…...

编程日记 2025/8/27 3:33:16

探索高性能AI识别和边缘计算 | NVIDIA Jetson Orin Nano 8GB 开发套件测评总结

# NVIDIA Jetson Orin Nano 8GB测评：当边缘计算遇上"性能暴徒"，树莓派看了想转行引言：比咖啡机还小的"AI超算"，却让开发者集体沸腾 2025年的某个深夜，程序员老王盯着工位上巴掌大的NVIDIA Jets…...

编程日记 2025/8/25 13:12:08

Seata

Seata是一款开源的分布式事务解决方案，由阿里巴巴发起并维护，旨在帮助应用程序管理和协调分布式事务。以下是对Seata的详细介绍： 一、概述 Seata致力于提供高性能和简单易用的分布式事务服务，它为用户提供了AT、TCC、SAGA和XA等…...

编程日记 2025/8/26 1:19:35

STM32之Unix时间戳

时间戳按秒计时，可转换成年月日时分。32有符号存储时间戳，2的32次/2-1到2038年，STM32是2的32次方-1，到2106年溢出。所有时区共用一个时间戳秒计数器，在伦敦和北京都是0，不同经度加上小时即可。...

编程日记 2025/8/27 3:02:06

告别手动复制粘贴：可定时自动备份的实用软件解析

软件介绍此前不少小伙伴都在找备份工具，其实复制文件用fastcopy就可以，但它需要手动操作。今天介绍的简易备份工具则能实现定时备份。这款软件有个小问题，当源目录和目标目录路径太长时，【立即备份】按钮可能会超出软件界面范…...

编程日记 2025/8/26 12:38:48

相关文章：