Alibaba DASD-4B Thinking 对话工具开发：微信小程序前端接入全攻略

最近在做一个智能对话项目，需要把大模型的对话能力快速集成到微信小程序里。选来选去，发现阿里云的DASD-4B模型是个不错的选择，推理速度快，对话效果也够用。但真到动手的时候，发现小程序端接入还是有不少坑要踩，比如WebSocket连接怎么管理、语音输入怎么集成、还有最头疼的域名备案问题。

今天这篇文章，我就把自己从零开始，把DASD-4B对话能力接入微信小程序的完整过程分享出来。我会重点讲小程序前端怎么实现，包括界面设计、语音处理，还有怎么通过云函数巧妙绕过备案限制，让你能快速上线一个可用的对话小程序。

1. 为什么选择DASD-4B与小程序结合？

在做技术选型的时候，我对比了几个方案。直接用现成的对话API虽然省事，但定制化程度低，数据隐私也是个问题。自己从头训练一个大模型，成本和时间又太高。DASD-4B这个模型吸引我的地方在于，它在保持不错对话能力的同时，对计算资源的要求相对友好，适合我们这种中小型团队快速部署。

微信小程序就更不用说了，用户不用下载安装，打开就用，传播起来特别方便。想象一下，用户在你的小程序里，能像和朋友聊天一样和AI对话，还能直接语音输入，这个体验是很吸引人的。

但把这两者结合起来，挑战就来了。小程序的环境比较特殊，网络请求有限制，特别是WebSocket，对域名有严格要求。直接连接自己部署的模型服务，如果没有备案域名，根本行不通。这也是我后面要重点讲的，怎么用云函数来解决这个问题。

2. 小程序前端核心架构设计

开始写代码之前，得先把小程序的整体结构想清楚。我们的核心目标是：创建一个流畅、稳定的对话界面，能处理文本和语音两种输入方式，并且要处理好网络连接的各种异常情况。

2.1 对话界面UI与交互设计

小程序的界面设计，我追求的是简洁和实用。左边是对话历史列表，右边是主对话区域。主区域上面是聊天记录，下面是输入框和功能按钮。

// pages/chat/chat.wxml 部分结构示例
<view class="chat-container">
  <!-- 对话历史侧边栏 -->
  <scroll-view class="history-sidebar" scroll-y>
    <view wx:for="{{chatHistory}}" wx:key="id" class="history-item" bindtap="loadHistory" data-id="{{item.id}}">
      <text>{{item.title}}</text>
    </view>
  </scroll-view>

  <!-- 主对话区域 -->
  <view class="main-area">
    <!-- 消息列表 -->
    <scroll-view class="message-list" scroll-y scroll-into-view="{{scrollToViewId}}">
      <view wx:for="{{messages}}" wx:key="id" class="message-item {{item.role}}">
        <image wx:if="{{item.role === 'assistant'}}" class="avatar" src="/images/ai-avatar.png"></image>
        <view class="bubble">
          <text>{{item.content}}</text>
          <text wx:if="{{item.role === 'assistant' && item.isStreaming}}" class="typing-indicator">...</text>
        </view>
      </view>
    </scroll-view>

    <!-- 输入区域 -->
    <view class="input-area">
      <textarea 
        value="{{inputText}}" 
        placeholder="输入您的问题..." 
        bindinput="onInput" 
        bindconfirm="sendMessage"
        disabled="{{isLoading}}"
      ></textarea>
      <button class="voice-btn" bindtap="toggleVoiceInput">
        <image src="{{isRecording ? '/images/recording.png' : '/images/mic.png'}}"></image>
      </button>
      <button class="send-btn" bindtap="sendMessage" disabled="{{!inputText.trim() || isLoading}}">
        发送
      </button>
    </view>
  </view>
</view>

样式方面，我用了比较柔和的背景色，用户消息和AI消息用不同的气泡颜色区分。AI回复的时候，我还加了个打字机效果，让文字一个一个出来，这样体验更自然。语音输入按钮在录音状态会有视觉反馈，用户一眼就能知道现在是不是在录音。

2.2 WebSocket连接管理与状态维护

和小程序打交道，网络连接是最需要小心的地方。我设计了一个连接管理器，专门处理WebSocket的生命周期和重连逻辑。

// utils/websocketManager.js
class WebSocketManager {
  constructor(url, options = {}) {
    this.url = url;
    this.socket = null;
    this.isConnected = false;
    this.reconnectAttempts = 0;
    this.maxReconnectAttempts = options.maxReconnectAttempts || 5;
    this.reconnectDelay = options.reconnectDelay || 3000;
    this.messageQueue = [];
    this.listeners = {
      onMessage: [],
      onOpen: [],
      onClose: [],
      onError: []
    };
  }

  // 建立连接
  connect() {
    return new Promise((resolve, reject) => {
      if (this.socket && this.isConnected) {
        resolve();
        return;
      }

      this.socket = wx.connectSocket({
        url: this.url,
        header: {
          'content-type': 'application/json'
        },
        success: () => {
          console.log('WebSocket连接开始建立');
        },
        fail: (err) => {
          reject(err);
        }
      });

      // 监听WebSocket事件
      wx.onSocketOpen(() => {
        console.log('WebSocket连接已打开');
        this.isConnected = true;
        this.reconnectAttempts = 0;
        
        // 发送队列中积压的消息
        this.flushMessageQueue();
        
        this.listeners.onOpen.forEach(callback => callback());
        resolve();
      });

      wx.onSocketMessage((res) => {
        const data = JSON.parse(res.data);
        this.listeners.onMessage.forEach(callback => callback(data));
      });

      wx.onSocketError((err) => {
        console.error('WebSocket连接错误:', err);
        this.isConnected = false;
        this.listeners.onError.forEach(callback => callback(err));
        this.handleReconnect();
      });

      wx.onSocketClose(() => {
        console.log('WebSocket连接已关闭');
        this.isConnected = false;
        this.listeners.onClose.forEach(callback => callback());
        
        // 如果不是主动关闭，尝试重连
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
          this.handleReconnect();
        }
      });
    });
  }

  // 发送消息
  sendMessage(message) {
    if (!this.isConnected) {
      console.warn('WebSocket未连接，消息加入队列');
      this.messageQueue.push(message);
      this.connect(); // 尝试重新连接
      return false;
    }

    try {
      wx.sendSocketMessage({
        data: JSON.stringify(message),
        success: () => {
          console.log('消息发送成功');
        },
        fail: (err) => {
          console.error('消息发送失败:', err);
          this.messageQueue.push(message); // 失败后加入队列
        }
      });
      return true;
    } catch (err) {
      console.error('发送消息异常:', err);
      return false;
    }
  }

  // 处理重连
  handleReconnect() {
    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
      console.error('达到最大重连次数，停止重连');
      return;
    }

    this.reconnectAttempts++;
    const delay = this.reconnectDelay * Math.pow(1.5, this.reconnectAttempts - 1);
    
    console.log(`第${this.reconnectAttempts}次重连，${delay}ms后尝试`);
    
    setTimeout(() => {
      if (!this.isConnected) {
        this.connect().catch(err => {
          console.error('重连失败:', err);
        });
      }
    }, delay);
  }

  // 清空消息队列
  flushMessageQueue() {
    while (this.messageQueue.length > 0 && this.isConnected) {
      const message = this.messageQueue.shift();
      this.sendMessage(message);
    }
  }

  // 添加事件监听
  on(event, callback) {
    if (this.listeners[event]) {
      this.listeners[event].push(callback);
    }
  }

  // 关闭连接
  close() {
    if (this.socket) {
      wx.closeSocket();
      this.socket = null;
      this.isConnected = false;
      this.messageQueue = [];
    }
  }
}

module.exports = WebSocketManager;

这个管理器有几个关键点：一是自动重连机制，网络不稳定的时候能自己尝试恢复连接；二是消息队列，断网期间的消息不会丢失，等连接恢复后再发出去；三是事件监听，把连接状态的变化通知给各个业务模块。

3. 语音输入与处理全流程

语音功能是提升体验的关键。微信小程序提供了录音API，但怎么把录音文件转换成文字，再送给DASD-4B模型处理，这里面有不少步骤。

3.1 录音功能实现

我先在小程序里实现了基本的录音功能，包括开始、停止，还有实时的音量反馈。

// pages/chat/chat.js 部分代码
Page({
  data: {
    isRecording: false,
    recordTime: 0,
    voiceVolume: 0
  },

  // 开始录音
  startRecording() {
    const that = this;
    
    // 获取录音权限
    wx.authorize({
      scope: 'scope.record',
      success: () => {
        that.setData({ isRecording: true, recordTime: 0 });
        
        // 开始录音
        that.recorderManager = wx.getRecorderManager();
        that.recorderManager.start({
          duration: 60000, // 最长60秒
          sampleRate: 16000,
          numberOfChannels: 1,
          encodeBitRate: 48000,
          format: 'mp3'
        });

        // 录音计时器
        that.recordTimer = setInterval(() => {
          that.setData({
            recordTime: that.data.recordTime + 1
          });
        }, 1000);

        // 监听录音音量（用于UI反馈）
        that.recorderManager.onFrameRecorded((res) => {
          const { frameBuffer } = res;
          // 简单计算音量大小
          let sum = 0;
          for (let i = 0; i < frameBuffer.length; i++) {
            sum += Math.abs(frameBuffer[i]);
          }
          const volume = Math.min(100, Math.floor(sum / frameBuffer.length * 100));
          that.setData({ voiceVolume: volume });
        });

        // 录音结束回调
        that.recorderManager.onStop((res) => {
          clearInterval(that.recordTimer);
          that.setData({ isRecording: false, voiceVolume: 0 });
          
          if (res.tempFilePath) {
            that.processAudioFile(res.tempFilePath);
          }
        });
      },
      fail: (err) => {
        console.error('录音授权失败:', err);
        wx.showToast({
          title: '需要录音权限',
          icon: 'none'
        });
      }
    });
  },

  // 停止录音
  stopRecording() {
    if (this.recorderManager) {
      this.recorderManager.stop();
    }
  },

  // 切换语音输入模式
  toggleVoiceInput() {
    if (this.data.isRecording) {
      this.stopRecording();
    } else {
      this.startRecording();
    }
  }
});

录音的时候，我实时显示录音时长和音量波动，让用户有直观的反馈。录音格式选的是mp3，兼顾了音质和文件大小。

3.2 语音转文字与敏感词过滤

录音文件拿到后，需要先转成文字。这里我用了微信的语音识别API，识别准确度还不错。但识别出来的文字，不能直接发给AI，得先过滤一下敏感词。

// utils/voiceProcessor.js
class VoiceProcessor {
  constructor() {
    this.sensitiveWords = ['违规词1', '违规词2', '违规词3']; // 实际使用时应从服务器获取
  }

  // 语音文件转文字
  async speechToText(tempFilePath) {
    return new Promise((resolve, reject) => {
      wx.uploadFile({
        url: 'https://your-cloud-function-domain.com/speech-to-text',
        filePath: tempFilePath,
        name: 'audio',
        formData: {
          type: 'mp3'
        },
        success: (res) => {
          const result = JSON.parse(res.data);
          if (result.code === 0) {
            const text = this.filterSensitiveWords(result.text);
            resolve(text);
          } else {
            reject(new Error(result.message || '语音识别失败'));
          }
        },
        fail: (err) => {
          reject(err);
        }
      });
    });
  }

  // 敏感词过滤
  filterSensitiveWords(text) {
    if (!text || !this.sensitiveWords.length) return text;
    
    let filteredText = text;
    this.sensitiveWords.forEach(word => {
      const regex = new RegExp(word, 'gi');
      filteredText = filteredText.replace(regex, '***');
    });
    
    // 如果过滤后内容变化太大，直接返回空
    const originalLength = text.length;
    const filteredLength = filteredText.replace(/\*/g, '').length;
    if (filteredLength < originalLength * 0.5) {
      return '';
    }
    
    return filteredText;
  }

  // 文字转语音（AI回复的语音播放）
  async textToSpeech(text) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'https://your-cloud-function-domain.com/text-to-speech',
        method: 'POST',
        data: {
          text: text,
          speed: 1.0,
          pitch: 1.0
        },
        success: (res) => {
          if (res.data.code === 0) {
            resolve(res.data.audioUrl);
          } else {
            reject(new Error(res.data.message));
          }
        },
        fail: reject
      });
    });
  }
}

module.exports = VoiceProcessor;

敏感词过滤我做了两层：一是直接替换，二是如果替换太多内容，说明可能有大段违规，就直接返回空，避免风险。文字转语音的功能我也集成了，用户可以选择听AI的语音回复，这对一些不方便看屏幕的场景很有用。

4. 通过云函数解决域名备案难题

这是整个项目里最棘手的问题。微信小程序要求所有网络请求，包括WebSocket，都必须使用备案过的域名。但很多团队，特别是开发初期，没有现成的备案域名。

我的解决方案是：用云函数做中转。小程序连接的是云函数，云函数再去连接我们部署的DASD-4B服务。云服务商提供的函数计算服务，本身就有备案域名，完美解决了这个问题。

4.1 云函数架构设计

我设计了一个简单的云函数，它主要做三件事：转发WebSocket连接、处理语音文件、管理对话上下文。

// cloud-functions/ai-proxy/index.js
const WebSocket = require('ws');

// 连接到DASD-4B服务的WebSocket
let aiSocket = null;
const aiServiceUrl = 'ws://your-dasd-4b-service:port/chat';

// 初始化WebSocket连接
function initAIConnection() {
  if (aiSocket && aiSocket.readyState === WebSocket.OPEN) {
    return aiSocket;
  }

  aiSocket = new WebSocket(aiServiceUrl);
  
  aiSocket.on('open', () => {
    console.log('已连接到AI服务');
  });
  
  aiSocket.on('error', (err) => {
    console.error('AI服务连接错误:', err);
    aiSocket = null;
  });
  
  aiSocket.on('close', () => {
    console.log('AI服务连接关闭');
    aiSocket = null;
  });
  
  return aiSocket;
}

// 主处理函数
exports.main = async (event, context) => {
  const { action, data, sessionId } = event;
  
  try {
    switch (action) {
      case 'chat':
        return await handleChat(data, sessionId);
      
      case 'speech-to-text':
        return await handleSpeechToText(data);
      
      case 'text-to-speech':
        return await handleTextToSpeech(data);
      
      default:
        return {
          code: 400,
          message: '不支持的请求类型'
        };
    }
  } catch (error) {
    console.error('云函数处理错误:', error);
    return {
      code: 500,
      message: '服务内部错误'
    };
  }
};

// 处理对话请求
async function handleChat(message, sessionId) {
  return new Promise((resolve, reject) => {
    const socket = initAIConnection();
    
    if (!socket || socket.readyState !== WebSocket.OPEN) {
      return resolve({
        code: 503,
        message: 'AI服务暂时不可用'
      });
    }
    
    // 设置超时
    const timeout = setTimeout(() => {
      resolve({
        code: 504,
        message: '请求超时'
      });
    }, 30000);
    
    // 发送消息到AI服务
    const requestData = {
      message: message,
      session_id: sessionId,
      stream: false // 小程序端建议用非流式，更稳定
    };
    
    socket.send(JSON.stringify(requestData));
    
    // 监听AI回复
    const onMessage = (data) => {
      try {
        const response = JSON.parse(data.toString());
        clearTimeout(timeout);
        
        // 这里可以添加回复内容的过滤检查
        const filteredResponse = checkResponseSafety(response);
        
        resolve({
          code: 0,
          data: filteredResponse
        });
      } catch (err) {
        reject(err);
      }
    };
    
    socket.once('message', onMessage);
  });
}

// 语音转文字处理
async function handleSpeechToText(audioData) {
  // 这里可以集成第三方语音识别服务
  // 例如百度语音、阿里云语音识别等
  // 示例使用简单的模拟返回
  return {
    code: 0,
    text: '这是识别出的文字内容'
  };
}

// 安全检查
function checkResponseSafety(response) {
  // 实现内容安全检查逻辑
  // 返回过滤后的安全内容
  return response;
}

这个云函数部署在腾讯云SCF或者阿里云FC上，它们会自动分配一个备案过的访问域名。小程序端就直接用这个域名，所有请求都通过云函数中转。

4.2 小程序端调用适配

小程序端需要稍微调整一下，不再直接连接AI服务，而是通过云函数中转。

// 修改后的连接管理器部分
class AdaptedWebSocketManager extends WebSocketManager {
  constructor(cloudFunctionUrl, sessionId) {
    // 云函数WebSocket端点
    const wsUrl = `wss://${cloudFunctionUrl}/websocket?sessionId=${sessionId}`;
    super(wsUrl);
    this.sessionId = sessionId;
  }

  // 发送消息时带上会话ID
  sendMessage(message) {
    const wrappedMessage = {
      action: 'chat',
      data: message,
      sessionId: this.sessionId
    };
    return super.sendMessage(wrappedMessage);
  }
}

// 在页面中使用
Page({
  onLoad() {
    // 生成或获取会话ID
    const sessionId = this.getOrCreateSessionId();
    
    // 初始化连接管理器
    this.wsManager = new AdaptedWebSocketManager(
      'your-cloud-function-domain.com',
      sessionId
    );
    
    // 连接云函数
    this.wsManager.connect().then(() => {
      console.log('已通过云函数连接到AI服务');
    }).catch(err => {
      console.error('连接失败:', err);
    });
  }
});

这样改造后，小程序端的代码改动很小，主要是换了个连接地址。所有的复杂逻辑都在云函数里处理，小程序端保持简洁。

5. 实际应用效果与优化建议

这套方案在实际项目中跑了一段时间，整体效果还不错。用户反馈对话流畅，语音输入识别准确率也能满足日常使用。通过云函数中转，不仅解决了备案问题，还额外获得了几个好处：一是可以做统一的安全检查和过滤，二是能缓存一些数据，减少对AI服务的直接压力，三是方便做访问统计和监控。

不过在实际使用中，我也发现了一些可以优化的地方：

网络稳定性方面，虽然有了重连机制，但在弱网环境下，体验还是会有影响。后来我加了个本地消息队列，用户发送的消息先存到本地，等发送成功后再从队列移除。这样即使网络暂时中断，用户也不会感知到发送失败。

性能方面，语音转文字如果完全依赖云端服务，响应时间有时会比较长。对于简单的指令性语音，我后来在客户端用了一个轻量级的本地识别库先处理，识别不了的再走云端，这样大部分简单指令都能快速响应。

用户体验方面，我增加了一些细节：比如AI思考时的加载动画、网络中断的友好提示、长按语音按钮的取消发送功能。这些小细节对提升整体体验很有帮助。

还有一点很重要，就是内容安全。除了前面说的敏感词过滤，对于AI的回复内容，我也加了一层检查。特别是当用户问一些边界问题时，AI的回复需要格外注意。我在云函数里实现了一个简单的安全检查逻辑，对某些类型的回复进行二次过滤。

---

获取更多AI镜像

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