微信小程序接入 AI 服务实战：基于 Bmob SDK 实现智能对话

为了实现流式对话体验，需要建立长连接并处理实时返回的数据。

打开 Index/index.js 文件，添加 initChat 方法：

initChat() {
  // 初始化 AI 链接
  this.ChatAi = wx.Bmob.ChatAI();

  let msg = '';
  let isStart = true;

  // 处理消息流
  this.ChatAi.onMessage((res) => {
    if (isStart) {
      isStart = false;
    }
    if (res === 'done') {
      // 完成标记
      if (msg !== '') {
        isStart = true;
      }
      msg = '';
    } else {
      // 拼接流式内容
      msg += res;
      this.amendMessage(this.createUserMessage(msg, false));
    }
  });

  // 处理连接关闭
  this.ChatAi.onClose(() => {
    console.log('连接被关闭，准备重新连接 Bmob AI 服务');
    this.ChatAi.connect();
  });
},

关键点说明：

• wx.Bmob.ChatAI()：建立与服务端的长连接。
• onMessage：接收流式数据。由于是流式传输，内容会分多次到达，需进行拼接。
• onClose：监听连接断开事件，自动重连以保证稳定性。

四、发送对话内容

绑定发送按钮事件，构建请求数据并发送给服务端。

sendMessage(e) {
  const content = this.data.inputContent;
  if (!content) return false;

  // 构造请求体
  const datas = {
    messages: [{
      content: content,
      role: 'user'
    }],
    session: 'bmobchat'
  };

  // 发送请求
  this.ChatAi.send(JSON.stringify(datas));

  // UI 更新
  this.pushMessage(this.createUserMessage(content, true));
  this.pushMessage(this.createUserMessage('AI 思考中...', false));
  this.setData({ inputContent: '' });
},

注意：

• 当前示例仅发送单条消息，未携带历史上下文，因此 AI 表现可能较为独立。
• role 固定为 user，标识提问者身份。

五、构造前端界面

修改 Index/index.wxml 文件，构建聊天容器和输入区域。

<view class="page-wrap">
  <scroll-view 
    class="chat-container" 
    scroll-y 
    scroll-into-view="{{lastMessageId}}" 
    scroll-top="9999999999">
    <view wx:for="{{messages}}" wx:for-item="message" wx:key="id" id="{{message.id}}" class="message {{message.type}}">
      <!-- 用户消息 -->
      <view wx:if="{{message.type == 'speak'}}" class="user-message {{message.isMe ? 'me' : 'other'}}">
        <image class="avatar" src="/images/{{message.isMe?'bmob':'ai'}}.png" mode="aspectFill"></image>
        <view class="text">
          <view class="content">
            <mp-html markdown content="{{message.content}}" />
          </view>
        </view>
      </view>
      <!-- 系统消息 -->
      <view wx:if="{{message.type == 'system'}}" class="system-message">
        {{message.content}}
      </view>
    </view>
    <view class="v-fake"></view>
  </scroll-view>

  <!-- 输入面板 -->
  <view class="input-panel">
    <button class="pic-icon"></button>
    <view class="send-input-box">
      <textarea 
        auto-height 
        type="text" 
        value="{{inputContent}}" 
        bindinput="changeInputContent"
        bindconfirm="sendMessage" 
        style="max-height: 300rpx !important;" 
        cursor-spacing='12'></textarea>
    </view>
    <button bindtap="sendMessage" class="send-btn" hover-class="hover">发送</button>
  </view>
</view>

样式文件较长，建议参考官方示例或根据需求自行调整 CSS，重点保证 scroll-view 的滚动行为和输入框的高度自适应。

六、补充辅助函数

为了使上述逻辑完整运行，需要在 Index/index.js 中补充缺失的消息处理函数。

// 创建消息对象
createUserMessage(content, isMe) {
  return {
    id: Date.now(),
    type: 'speak',
    content: content,
    isMe: isMe
  };
},

// 推送消息到列表
pushMessage(message) {
  const messages = this.data.messages || [];
  messages.push(message);
  this.setData({
    messages: messages,
    lastMessageId: message.id
  });
},

// 更新消息内容（用于流式输出）
amendMessage(newMessage) {
  const messages = this.data.messages;
  const index = messages.length - 1;
  if (index >= 0 && messages[index].type === 'speak') {
    messages[index].content = newMessage.content;
    this.setData({ messages: messages });
  }
},

// 输入框变化处理
changeInputContent(e) {
  this.setData({ inputContent: e.detail.value });
},

七、总结与优化建议

通过上述步骤，我们成功实现了微信小程序与 AI 服务的对接。以下是进一步优化建议：

1. 上下文管理：在实际应用中，应维护一个会话历史数组，每次发送时将最近 N 条记录一并传给 AI，以保持对话连贯性。
2. 错误处理：增加网络异常捕获机制，当连接失败时给予用户明确提示。
3. 性能优化：对于长文本流式输出，避免频繁调用 setData，可考虑节流处理或仅在关键节点更新 UI。
4. 安全性：切勿在前端硬编码 Secret Key，生产环境建议通过自有后端代理转发请求，保护密钥安全。

此方案可作为基础模板，开发者可根据业务需求扩展语音识别、图片上传等多模态功能。