实战教程：将AI大模型接入微信小程序，打造智能客服系统

柳思木

于 2025-05-13 08:59:38 发布

阅读量1k

点赞数 20

文章标签：人工智能微信小程序小程序

本文链接：https://blog.csdn.net/qq_41678239/article/details/147915094

版权

实战教程：将AI大模型接入微信小程序，打造智能客服系统

本文介绍如何将微调后的AI大模型（基于Ollama和Dify）接入微信小程序，实现一个功能完整的智能客服系统。通过本文，你将学习到微信小程序开发、AI接口对接、UI设计等实用技能。

前言

在人工智能快速发展的今天，将AI大模型应用到实际业务场景中已经成为一种趋势。本文将带领大家完成一个完整的项目：将微调后的AI大模型接入微信小程序，打造一个智能客服系统。这个系统不仅界面美观，而且功能完整，可以直接用于实际业务场景。

技术栈

微信小程序开发
AI大模型（基于Ollama和Dify）
RESTful API
前端UI设计

一、项目概述

1.1 功能特点

美观的聊天界面
实时对话功能
自动滚动到最新消息
加载状态提示
错误处理机制
与AI大模型的无缝集成

1.2 技术难点

微信小程序与AI接口的对接
实时对话的实现
良好的用户体验设计
错误处理和异常情况的处理

二、项目结构

首先，让我们创建项目的基本结构：

project/
├── project.config.json    // 项目配置文件
├── miniprogram/
│   ├── app.json          // 应用配置文件
│   │   └── chat/
│   │       ├── chat.wxml // 聊天页面结构
│   │       ├── chat.wxss // 聊天页面样式
│   │       └── chat.js   // 聊天页面逻辑

三、具体实现

3.1 项目配置

首先创建项目配置文件 project.config.json：

{
  "description": "项目配置文件",
  "packOptions": {
    "ignore": []
  },
  "miniprogramRoot": "miniprogram/",
  "compileType": "miniprogram",
  "projectname": "ai-customer-service",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "enhance": true,
    "postcss": true,
    "minified": true
  },
  "appid": "你的小程序appid",
  "libVersion": "2.30.2"
}

3.2 应用配置

在 app.json 中配置页面路由和窗口样式：

{
  "pages": [
    "pages/index/index",
    "pages/chat/chat"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "AI智能客服",
    "navigationBarTextStyle": "black"
  }
}

3.3 聊天界面实现

3.3.1 页面结构 (chat.wxml)

<view class="chat-container">
  <scroll-view scroll-y="true" class="chat-list" scroll-into-view="{{scrollToMessage}}">
    <block wx:for="{{messages}}" wx:key="index">
      <view class="message {{item.type === 'user' ? 'user-message' : 'ai-message'}}" id="msg-{{index}}">
        <view class="message-content">
          <text>{{item.content}}</text>
        </view>
      </view>
    </block>
  </scroll-view>
  
  <view class="input-area">
    <input class="message-input" 
           value="{{inputMessage}}" 
           bindinput="onInputChange"
           placeholder="请输入您的问题..."
           confirm-type="send"
           bindconfirm="sendMessage"/>
    <button class="send-btn" bindtap="sendMessage">发送</button>
  </view>
</view>

3.3.2 页面样式 (chat.wxss)

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

.chat-list {
  flex: 1;
  padding: 20rpx;
  overflow-y: auto;
}

.message {
  margin-bottom: 20rpx;
  display: flex;
  flex-direction: column;
}

.user-message {
  align-items: flex-end;
}

.ai-message {
  align-items: flex-start;
}

.message-content {
  max-width: 70%;
  padding: 20rpx;
  border-radius: 10rpx;
  word-wrap: break-word;
}

.user-message .message-content {
  background-color: #007AFF;
  color: white;
}

.ai-message .message-content {
  background-color: white;
  color: #333;
}

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

.message-input {
  flex: 1;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 40rpx;
  padding: 0 30rpx;
  margin-right: 20rpx;
}

.send-btn {
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007AFF;
  color: white;
  border-radius: 40rpx;
  padding: 0;
  font-size: 28rpx;
}

3.3.3 页面逻辑 (chat.js)

const app = getApp()

Page({
  data: {
    messages: [],
    inputMessage: '',
    scrollToMessage: '',
    apiUrl: '你的API地址', // 替换为你的Dify API地址
    apiKey: '你的API密钥'  // 替换为你的Dify API密钥
  },

  onLoad: function() {
    // 添加欢迎消息
    this.setData({
      messages: [{
        type: 'ai',
        content: '您好！我是AI智能客服，很高兴为您服务。请问有什么可以帮您？'
      }]
    })
  },

  onInputChange: function(e) {
    this.setData({
      inputMessage: e.detail.value
    })
  },

  sendMessage: function() {
    if (!this.data.inputMessage.trim()) return

    const userMessage = this.data.inputMessage
    const messages = this.data.messages

    // 添加用户消息
    messages.push({
      type: 'user',
      content: userMessage
    })

    this.setData({
      messages: messages,
      inputMessage: '',
      scrollToMessage: `msg-${messages.length - 1}`
    })

    // 调用API获取AI回复
    this.getAIResponse(userMessage)
  },

  getAIResponse: function(userMessage) {
    wx.showLoading({
      title: '正在思考...',
    })

    wx.request({
      url: this.data.apiUrl,
      method: 'POST',
      header: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${this.data.apiKey}`
      },
      data: {
        query: userMessage,
        response_mode: "streaming",
        conversation_id: "", // 如果需要保持对话上下文，需要保存并传递conversation_id
        user: "user_" + Date.now() // 用户标识
      },
      success: (res) => {
        const messages = this.data.messages
        messages.push({
          type: 'ai',
          content: res.data.answer || '抱歉，我现在无法回答这个问题。'
        })

        this.setData({
          messages: messages,
          scrollToMessage: `msg-${messages.length - 1}`
        })
      },
      fail: (error) => {
        console.error('API请求失败：', error)
        wx.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      },
      complete: () => {
        wx.hideLoading()
      }
    })
  }
})