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

在微信小程序开发中，集成人工智能服务可以显著提升用户体验。本文将详细介绍如何快速为小程序接入 AI 聊天功能，实现流式文本输出和 Markdown 渲染。

一、引入 mp-html 富文本组件

AI 模型通常返回 Markdown 格式的文本内容。为了在小程序中正确显示格式化后的文本（如标题、列表、代码块等），我们需要使用 mp-html 组件。

1. 安装组件

在小程序开发工具的命令行中执行以下命令：

npm install mp-html

如果提示缺少 npm 命令，请确保已配置好小程序的 npm 环境。

2. 配置页面

安装完成后，项目根目录会生成 miniprogram_npm 文件夹。打开 Index/index.json 文件，注册组件并设置页面标题：

{
  "navigationBarTitleText": "微信小程序接入 AI 示例",
  "usingComponents": {
    "mp-html": "mp-html"
  }
}

二、引入 Bmob AI 组件

Bmob 提供了便捷的 AI 接口封装，适合快速集成。

1. 设置 API 密钥

2. 下载并引入 SDK

访问 Bmob 官方文档或资源页下载最新的 SDK 文件（例如 Bmob-2.5.30.min.js）。将文件复制到小程序项目的 utils 目录下。

在 app.js 文件中添加初始化代码：

const Bmob = require('/utils/Bmob-2.5.30.min.js');
// 替换为你的实际密钥
Bmob.initialize('你的 Secret Key', '你设置的 API 安全码');
wx.Bmob = Bmob;

三、初始化 AI 连接

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

打开 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>
        </>
      
      
      
        {{message.content}}
      
    
    
  

  
  
    
    
      
    
    发送

样式文件较长，建议参考官方示例或根据需求自行调整 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 服务的对接。以下是进一步优化建议：

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

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

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