微信小程序对接实战：快速开发集成通义千问1.5-1.8B模型的AI聊天应用

你是不是也想过，给自己的微信小程序加上一个智能聊天助手？比如，做一个能解答用户问题的客服机器人，或者一个能陪你闲聊、帮你写文案的创意伙伴。听起来很酷，但一想到要处理模型部署、API对接、还有小程序那些复杂的网络请求限制，是不是就觉得头大？

别担心，这篇文章就是来帮你解决这些问题的。我们不走弯路，直接用一个最省事的方案：后端模型部署，我们用现成的星图GPU平台，一键就能拉起一个带WebUI的通义千问服务，自带API；前端小程序，我们用最熟悉的微信原生开发框架。我会手把手带你，把这两个部分稳稳地连接起来，做出一个界面好看、对话流畅的AI聊天小程序。

整个过程，我们会重点攻克几个小程序开发里常见的“拦路虎”：怎么配置安全域名让小程序能访问我们的API、怎么实现那种一个字一个字蹦出来的流式对话效果、还有怎么在用户手机里妥善保存聊天记录。最后，我会给你一套可以直接拿去用的前端组件代码，让你能快速集成到自己的项目里。

1. 项目整体思路与准备工作

在开始写代码之前，我们先花几分钟，把整个项目的架子在脑子里搭起来。这样后面每一步做什么，你都会很清楚。

我们的目标是：用户在小程序里输入问题，小程序把问题发给后端的通义千问模型，模型思考后生成回答，再流式地传回小程序展示出来。

为了实现这个目标，我们需要拆解成三个部分：

1. 后端服务（AI大脑）：我们需要一个始终在运行的通义千问模型，它能接收文本、理解并生成回复。自己从零训练或部署一个大模型成本太高，所以我们选择用星图GPU平台。它上面有预置的“通义千问WebUI”镜像，我们只需要点几下，就能得到一个带可视化界面和标准API接口的服务。这一步我们主要关注如何获取这个服务的访问地址（API URL）。
2. 前端小程序（交互界面）：这是用户直接看到和操作的部分。我们需要一个聊天界面，包含消息列表、输入框和发送按钮。更重要的是，小程序需要能向后端API发送请求，并处理返回的数据。这里的关键是处理好网络通信。
3. 连接桥梁（通信与存储）：这是本教程的核心。小程序不能随意访问任何网络地址，必须将后端API的域名配置到小程序的“合法域名”列表中。同时，为了获得更好的对话体验（不用等全部生成完再显示），我们需要实现“流式响应”。最后，为了不让聊天记录每次打开都消失，我们需要把对话历史保存在用户的手机本地。

1.1 你需要准备什么

在动手之前，请确保你手头有这几样东西：

• 一个微信小程序账号：去微信公众平台注册一个，并创建一个小程序项目，拿到你的 AppID。这是后续配置服务器域名和真机调试必需的。
• 一个星图GPU平台的账号：访问其官网注册即可。我们将使用它来部署模型服务。
• 基础的微信小程序开发知识：了解 WXML、WXSS、JavaScript 和 Page 生命周期即可。如果你用过 uni-app，原理也相通。
• 代码编辑器：微信开发者工具是必须的，另外可以用你顺手的编辑器如 VSCode 来写代码。

好了，思路理清了，东西也备齐了，接下来我们就从最核心的后端服务开始，一步步把它搭建起来。

2. 后端服务：一键部署通义千问WebUI

后端服务是整个应用的大脑，幸运的是，借助云平台，这个过程变得异常简单。我们选择星图GPU平台，主要是看中它的“预置镜像”功能，省去了我们自己安装依赖、配置环境的繁琐步骤。

2.1 在星图平台创建服务

首先，登录你的星图GPU平台控制台。

1. 找到镜像市场或应用中心：在平台首页或侧边栏，寻找“镜像市场”、“AI应用”或“快速创建”之类的入口。
2. 选择通义千问镜像：在镜像列表里，搜索“通义千问”或“Qwen”。你应该能找到类似 “通义千问 WebUI” 或 “Qwen-Chat WebUI” 的镜像。注意选择版本，我们目标是对接1.5-1.8B这个参数量的模型，确保镜像包含它。
3. 部署实例：点击该镜像的“部署”或“创建实例”按钮。平台会引导你进行一些配置：
   • 实例规格：对于1.5-1.8B的模型，选择配备 GPU 的规格（如NVIDIA T4、V100等）会获得极快的响应速度。如果仅用于测试，CPU规格也可以运行，但速度会慢很多。
   • 存储：默认配置通常足够。
   • 网络与安全组：确保开放服务的访问端口。这个WebUI镜像通常会在容器内部监听一个端口，比如 7860 或 8000。你需要在平台的安全组或容器网络设置中，将这个端口对公网开放（例如，添加一条规则允许 0.0.0.0/0 访问 7860 端口）。
4. 启动并获取访问地址：完成配置后，启动实例。等待几分钟，实例状态变为“运行中”后，平台会为你分配一个公网访问地址，通常格式是 http://<你的实例IP>:<端口号>。请记下这个完整的URL，比如 http://123.45.67.89:7860。这个地址就是我们后端的API基础地址。

2.2 验证WebUI与获取API信息

拿到地址后，先别急着关掉页面。

1. 访问WebUI界面：打开浏览器，输入你刚才记下的地址（如 http://123.45.67.89:7860）。如果一切正常，你会看到一个聊天界面，这就是通义千问的WebUI。你可以在这里直接输入文字和它对话，确认模型服务运行正常。
2. 找到API端点：大多数这类WebUI镜像（基于Gradio或FastAPI等框架）都会同时提供标准的API接口。常见的API端点路径可能是 /api/chat 或 /api/v1/chat/completions（模仿OpenAI格式）。你需要查看该镜像的文档或通过开发者工具（F12打开浏览器控制台，查看网络请求）来确认。
   • 一个简单的方法：在WebUI界面发送一条消息，同时在浏览器开发者工具的“Network”标签页观察，看看向哪个URL发送了POST请求。那个URL就是聊天API的端点。
   • 假设我们通过观察发现，请求发往 http://123.45.67.89:7860/api/chat。那么，我们的 API URL 就确定了。

至此，一个功能完整、自带API的后端AI服务就已经在云端运行起来了。接下来，我们就要让小程序能够安全、稳定地访问它。

3. 前端核心：小程序与API的对接实战

这是将想法变成现实的关键一步。小程序端主要负责三件事：构建聊天界面、管理聊天数据、以及与后端API通信。我们逐一突破。

3.1 配置小程序服务器域名

微信小程序出于安全考虑，要求网络请求的域名必须事先在管理后台配置，否则无法在真机上发起请求。这是第一个必须完成的步骤。

1. 登录微信公众平台，进入你的小程序管理后台。
2. 在左侧菜单找到 “开发” -> “开发管理” -> “开发设置”。
3. 找到 “服务器域名” 板块。
4. 在 “request合法域名” 列表中，添加你后端服务的域名。注意，这里填的是域名，不是完整的URL。
   • 例如，你的API地址是 http://123.45.67.89:7860/api/chat，那么你需要添加的域名是 http://123.45.67.89:7860。
   • 重要：微信小程序要求后端服务必须支持 HTTPS。如果你的服务是 http 开头，在开发阶段可以在微信开发者工具中勾选“不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书”，以便调试。但上线前必须转换为HTTPS服务（可以为你的服务器配置SSL证书，或使用支持HTTPS的网关/反向代理）。
5. 保存配置。注意：域名配置后可能需要几分钟到几小时生效。

3.2 实现流式对话（SSE）

传统的API请求是“一问一答”，小程序要等到模型完全生成所有文字后才收到并显示，体验不连贯。流式响应（Server-Sent Events, SSE）允许服务器一边生成，一边像流水一样把文字推送给小程序，实现打字机效果。

虽然微信小程序原生不支持 EventSource（标准的SSE客户端），但我们可以用 wx.request 或 wx.connectSocket (WebSocket) 来模拟。这里介绍一种使用 wx.request 处理流式响应的方法，它兼容性更好。

后端需要支持流式输出（通常API会设置一个 stream: true 的参数）。前端的关键在于监听 wx.request 返回的 onChunkReceived 事件（微信基础库2.14.0及以上支持）或使用 SocketTask 处理分块数据。

下面是一个使用 wx.request 进行流式请求的示例组件方法：

// 在Page或Component的methods中
sendMessageStream(text) {
  const that = this
  // 显示“正在输入”的加载状态
  this.setData({
    isGenerating: true
  })

  // 将用户消息添加到列表
  const userMsg = { role: 'user', content: text }
  const newMessages = [...this.data.messages, userMsg]
  this.setData({ messages: newMessages })

  // 初始化AI的回复消息（内容为空，用于后续追加）
  const assistantMsg = { role: 'assistant', content: '' }
  const messagesWithAssistant = [...newMessages, assistantMsg]
  this.setData({ 
    messages: messagesWithAssistant,
    // 记录当前正在接收的回复消息的索引
    receivingIndex: messagesWithAssistant.length - 1
  })

  // 发起流式请求
  wx.request({
    url: 'https://你的域名/api/chat', // 替换为你的HTTPS API地址
    method: 'POST',
    header: {
      'Content-Type': 'application/json'
    },
    data: {
      messages: newMessages, // 发送历史对话
      stream: true // 关键参数，告诉后端开启流式输出
    },
    enableChunked: true, // 启用分块传输
    success(res) {
      // 对于流式请求，success回调可能不包含完整数据
      console.log('请求连接成功')
    },
    fail(err) {
      console.error('请求失败:', err)
      that.setData({ 
        isGenerating: false,
        receivingIndex: -1 
      })
      wx.showToast({ title: '网络请求失败', icon: 'none' })
    },
    // 监听每个数据块
    onChunkReceived(res) {
      // res.data 是ArrayBuffer，需要解码
      const chunkStr = wx.arrayBufferToUtf8String(res.data)
      // 假设后端返回的是纯文本流或简单的JSON行格式
      // 这里需要根据你后端API的实际流式格式进行解析
      // 例如，如果是简单的文本流：
      that.processStreamChunk(chunkStr)
    }
  })
},

// 处理接收到的数据块
processStreamChunk(chunkStr) {
  // 简单的文本追加逻辑（根据你的API响应格式调整）
  // 例如，直接追加到当前正在接收的消息内容中
  const idx = this.data.receivingIndex
  if (idx >= 0) {
    const key = `messages[${idx}].content`
    // 使用微信小程序提供的差分更新，提高性能
    this.setData({
      [key]: this.data.messages[idx].content + chunkStr
    })
  }
},

请注意：onChunkReceived 和 enableChunked 需要微信基础库版本支持。你需要在小程序管理后台或 app.json 中设置最低基础库版本。如果考虑更低版本兼容，或者后端支持WebSocket，也可以采用 wx.connectSocket 方案，逻辑类似，都是监听 onMessage 事件并拼接数据。

3.3 管理本地对话历史

我们不能每次都让用户从头开始聊天。利用小程序的本地存储能力，我们可以轻松实现对话历史的保存与加载。

// 保存当前对话记录到本地
saveChatHistory() {
  try {
    wx.setStorageSync('chatHistory', this.data.messages)
    console.log('对话历史已保存')
  } catch (e) {
    console.error('保存对话历史失败:', e)
  }
},

// 从本地加载对话历史
loadChatHistory() {
  try {
    const history = wx.getStorageSync('chatHistory')
    if (history) {
      this.setData({ messages: history })
      console.log('对话历史已加载')
    }
  } catch (e) {
    console.error('加载对话历史失败:', e)
  }
},

// 清空对话历史
clearChatHistory() {
  wx.showModal({
    title: '提示',
    content: '确定要清空所有对话记录吗？',
    success: (res) => {
      if (res.confirm) {
        try {
          wx.removeStorageSync('chatHistory')
          this.setData({ messages: [] })
          wx.showToast({ title: '已清空' })
        } catch (e) {
          console.error('清空历史失败:', e)
        }
      }
    }
  })
}

在 Page 的 onLoad 生命周期中调用 loadChatHistory()，在每次消息列表更新后（如发送消息或收到回复后）调用 saveChatHistory()，就可以实现对话的持久化了。

4. 可复用组件代码与界面搭建

理论讲完了，我们来点实际的。下面提供一个精简但功能完整的聊天页面代码，你可以直接复制到你的小程序项目中修改使用。

4.1 WXML模板 (index.wxml)

<view class="chat-container">
  <!-- 聊天消息区域 -->
  <scroll-view class="message-list" scroll-y scroll-into-view="{{scrollToId}}" scroll-with-animation>
    <block wx:for="{{messages}}" wx:key="index">
      <view id="msg{{index}}">
        <!-- 用户消息 -->
        <view class="message-row user" wx:if="{{item.role === 'user'}}">
          <view class="avatar user-avatar">你</view>
          <view class="bubble user-bubble">{{item.content}}</view>
        </view>
        <!-- AI消息 -->
        <view class="message-row assistant" wx:if="{{item.role === 'assistant'}}">
          <view class="avatar assistant-avatar">AI</view>
          <view class="bubble assistant-bubble">
            <text>{{item.content}}</text>
            <!-- 流式响应时的光标动画 -->
            <text class="cursor" wx:if="{{isGenerating && index === messages.length - 1}}">▌</text>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>

  <!-- 底部输入区域 -->
  <view class="input-area">
    <input 
      class="input-box" 
      value="{{inputValue}}" 
      bindinput="onInput" 
      placeholder="输入你的问题..." 
      confirm-type="send"
      bindconfirm="onSend"
      focus="{{autoFocus}}"
    />
    <button class="send-btn" bindtap="onSend" disabled="{{isGenerating}}">
      {{isGenerating ? '思考中...' : '发送'}}
    </button>
  </view>
</view>

4.2 WXSS样式 (index.wxss)

.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.message-list {
  flex: 1;
  padding: 20rpx;
  box-sizing: border-box;
}

.message-row {
  display: flex;
  margin-bottom: 30rpx;
}

.message-row.user {
  justify-content: flex-end;
}

.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: white;
  flex-shrink: 0;
}

.user-avatar {
  background-color: #07c160;
  margin-left: 20rpx;
}

.assistant-avatar {
  background-color: #576b95;
  margin-right: 20rpx;
}

.bubble {
  max-width: 70%;
  padding: 20rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  line-height: 1.5;
  word-wrap: break-word;
}

.user-bubble {
  background-color: #95ec69;
  color: #000;
}

.assistant-bubble {
  background-color: #fff;
  color: #333;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.cursor {
  display: inline-block;
  font-weight: bold;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.input-area {
  display: flex;
  padding: 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
  align-items: center;
}

.input-box {
  flex: 1;
  height: 80rpx;
  padding: 0 20rpx;
  background-color: #f8f8f8;
  border-radius: 40rpx;
  font-size: 32rpx;
  margin-right: 20rpx;
}

.send-btn {
  width: 140rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 40rpx;
  background-color: #07c160;
  color: white;
  font-size: 32rpx;
  padding: 0;
}
.send-btn[disabled] {
  background-color: #cccccc;
}

4.3 JavaScript逻辑 (index.js)

Page({
  data: {
    messages: [], // 对话消息列表
    inputValue: '', // 输入框内容
    isGenerating: false, // 是否正在生成
    receivingIndex: -1, // 当前正在接收流式消息的索引
    scrollToId: '', // 控制滚动到底部
    autoFocus: false
  },

  onLoad() {
    // 页面加载时，从本地存储读取历史记录
    this.loadChatHistory()
    this.setData({ autoFocus: true })
  },

  onInput(e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

  // 发送消息
  onSend() {
    const text = this.data.inputValue.trim()
    if (!text) {
      wx.showToast({ title: '请输入内容', icon: 'none' })
      return
    }
    if (this.data.isGenerating) {
      wx.showToast({ title: 'AI正在思考，请稍候...', icon: 'none' })
      return
    }

    this.setData({ inputValue: '' })
    this.sendMessageStream(text)
  },

  // 流式发送消息（核心方法，需根据你的API调整）
  sendMessageStream(text) {
    const that = this
    this.setData({ isGenerating: true })

    const userMsg = { role: 'user', content: text }
    const newMessages = [...this.data.messages, userMsg]
    this.setData({ messages: newMessages })
    this.scrollToBottom()

    const assistantMsg = { role: 'assistant', content: '' }
    const messagesWithAssistant = [...newMessages, assistantMsg]
    this.setData({ 
      messages: messagesWithAssistant,
      receivingIndex: messagesWithAssistant.length - 1
    })

    // 注意：此处URL和data格式需要根据你的后端API调整！！！
    wx.request({
      url: 'https://你的域名/api/v1/chat/completions', // 替换为你的真实API地址
      method: 'POST',
      header: { 'Content-Type': 'application/json' },
      data: {
        model: 'qwen1.5-1.8b', // 模型名称，根据后端调整
        messages: newMessages.map(msg => ({ role: msg.role, content: msg.content })),
        stream: true
      },
      enableChunked: true,
      success(res) {
        console.log('流式请求连接成功')
        // 请求结束后的处理
        that.setData({ 
          isGenerating: false,
          receivingIndex: -1 
        })
        that.saveChatHistory() // 保存历史
      },
      fail(err) {
        console.error('请求失败:', err)
        that.setData({ 
          isGenerating: false,
          receivingIndex: -1 
        })
        wx.showToast({ title: '请求失败，请重试', icon: 'none' })
      },
      onChunkReceived(res) {
        // 处理流式数据块
        // 假设API返回的是OpenAI兼容的SSE格式：data: {...}
        const chunkStr = wx.arrayBufferToUtf8String(res.data)
        const lines = chunkStr.split('\n').filter(line => line.trim() !== '')
        
        for (const line of lines) {
          if (line.startsWith('data: ')) {
            const dataStr = line.substring(6) // 去掉'data: '
            if (dataStr === '[DONE]') {
              return
            }
            try {
              const data = JSON.parse(dataStr)
              const deltaContent = data.choices[0]?.delta?.content || ''
              if (deltaContent) {
                that.processStreamChunk(deltaContent)
                that.scrollToBottom()
              }
            } catch (e) {
              console.error('解析流式数据失败:', e, '原始数据:', dataStr)
            }
          }
        }
      }
    })
  },

  processStreamChunk(chunk) {
    const idx = this.data.receivingIndex
    if (idx >= 0) {
      const key = `messages[${idx}].content`
      this.setData({
        [key]: this.data.messages[idx].content + chunk
      })
    }
  },

  scrollToBottom() {
    const lastIndex = this.data.messages.length - 1
    if (lastIndex >= 0) {
      this.setData({
        scrollToId: `msg${lastIndex}`
      })
    }
  },

  // 本地存储方法（同上文）
  saveChatHistory() {
    try {
      wx.setStorageSync('chatHistory', this.data.messages)
    } catch (e) {
      console.error('保存失败:', e)
    }
  },

  loadChatHistory() {
    try {
      const history = wx.getStorageSync('chatHistory')
      if (history && Array.isArray(history)) {
        this.setData({ messages: history })
      }
    } catch (e) {
      console.error('加载失败:', e)
    }
  },

  onUnload() {
    // 页面卸载时保存一次
    this.saveChatHistory()
  }
})

4.4 配置文件 (app.json)

确保在 app.json 中正确配置页面，并设置合适的基础库版本。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#07c160",
    "navigationBarTitleText": "通义千问AI助手",
    "navigationBarTextStyle": "white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "requiredBackgroundModes": ["audio"],
  "requiredPrivateInfos": ["request", "storage"]
}

将以上四个文件分别放置在小程序项目的对应位置，并将 index.js 中的API地址替换成你自己的，一个基本的AI聊天小程序就搭建完成了。

5. 总结与后续优化建议

走完整个流程，你会发现，将大模型能力集成到微信小程序里，核心难点不在于模型本身，而在于“连接”和“体验”。我们通过星图平台解决了模型部署的复杂性，又通过配置域名、实现流式响应和本地存储，解决了小程序端的核心交互问题。

现在你的小程序已经能跑起来了，但如果你想让它更完善、更强大，这里还有几个可以继续打磨的方向：

首先是稳定性。现在的代码是一个基础版本，在实际使用中，网络环境复杂多变，你需要增加更完善的错误处理。比如，请求超时了怎么办？服务器返回了非预期格式的数据怎么办？给用户一个友好的提示，并且提供重试的按钮，体验会好很多。

其次是体验优化。流式输出我们已经做了，还可以加上消息发送的动画、历史记录的搜索或分类管理（比如按主题创建不同的聊天会话）、甚至支持语音输入。界面上也可以根据你的品牌风格做更个性化的设计。

最后是功能扩展。通义千问模型的能力不止于文本对话。如果后端服务支持，你可以尝试集成图片理解、文件上传分析等功能。小程序端相应地增加图片选择、文件预览等组件，就能打造一个多模态的AI助手。

整个过程最花时间的可能是在调试API通信格式和流式数据解析上，因为不同后端服务的实现可能有细微差别。多利用开发者工具的Network面板查看数据流，耐心调试，问题都能解决。希望这套代码和思路能帮你快速启动项目，做出让人眼前一亮的小程序应用。

---

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。