基于Hbuilder X的uni-app连接DeepSeek大模型，实战指南（四）——AI交互

承前智

已于 2025-03-23 16:44:19 修改

阅读量2.5k

点赞数 29

CC 4.0 BY-SA版权

分类专栏：基于HbuilderX的连接OneNET平台及AI交互文章标签： uni-app 交互 ai 人工智能

于 2025-03-23 16:28:48 首次发布

本文链接：https://blog.csdn.net/qq_35540725/article/details/146457194

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

本系列将以0基础新手视角，完整演示从账号注册到云端数据可视化的全流程，涵盖token生成、获取云平台数据，MQTT命令下发及代码实现。
🔗 配套学习：建议结合《基于ArduinoESP32-S3连接OneNET云平台指南》理解硬件端对接逻辑
注：此版本基于OneNET云平台的数据流模型，与物模型不同。但也会附上相关代码。

可私我

（四）本文为基于Hbuilder X的uni-app连接DeepSeek大模型，AI交互
注：本文可不与前面系列共享，无关云平台

一、前期准备

1. DeepSeek的注册和登录

在官网，注册并登录账号探索未至之境

2. DeepSeek的API创建

1.进入API 开放平台→充值五块钱
在这里插入图片描述
2.进入API keys→创建API key→名字（不作要求，代码中也不涉及)

在这里插入图片描述
3.将API key存到桌面的txt的文本中，此项不能再次查看。
注：如忘记掉，直接删除项目，再建立一个新的

在这里插入图片描述

二、HBuilderX的外部环境搭建

一、搭建项目

1. 复制粘贴

复制粘贴“P2从云平台获取数据”，重新命名为 P4ai交互
在这里插入图片描述

2. 导入

1.右键工作区→导入→从本地目录导入
在这里插入图片描述

2.打开对应的index.vue，关闭“P2的vue”
在这里插入图片描述

3.运行到“内置浏览器”，页面效果应和P2一样。
在这里插入图片描述

三、核心代码解析

1.代码如下（示例）：

注：修改1. API_KEY； 2. content:

<template>
  <view class="vw1">
    <view class="center">
      <scroll-view class="message_box" scroll-y :scroll-top="scrollTop">
        <view class="vw3" v-for="(msg, index) in messages" :key="index">
          <!-- AI消息 -->
          <view v-if="msg.role === 'assistant'">
            <view class="icon_box">
			  		      <image class="icon" src="../../static/logo.png" mode="aspectFit"></image>
              <p>AI小助手</p>
            </view>
            <text class="chat-bubble">{
   
   {
   
    msg.content }}</text>
          </view>

          <!-- 用户消息 -->
          <view class="my" v-else>
            <view class="my_box">
			    <image class