微信小程序接入 AI 服务实战:基于 Bmob SDK 实现智能对话
本文详细讲解了在微信小程序中集成 AI 聊天功能的完整流程。内容包括安装 mp-html 组件以支持 Markdown 渲染,配置 Bmob 后端云密钥并初始化 SDK,建立 WebSocket 长连接以接收流式文本响应,以及构建包含滚动视图和输入框的前端界面。通过补充缺失的消息处理辅助函数,实现了用户消息发送、AI 流式输出显示及会话管理的闭环,帮助开发者快速搭建具备智能对话能力的小程序应用。

本文详细讲解了在微信小程序中集成 AI 聊天功能的完整流程。内容包括安装 mp-html 组件以支持 Markdown 渲染,配置 Bmob 后端云密钥并初始化 SDK,建立 WebSocket 长连接以接收流式文本响应,以及构建包含滚动视图和输入框的前端界面。通过补充缺失的消息处理辅助函数,实现了用户消息发送、AI 流式输出显示及会话管理的闭环,帮助开发者快速搭建具备智能对话能力的小程序应用。

在微信小程序开发中,集成人工智能服务可以显著提升用户体验。本文将详细介绍如何快速为小程序接入 AI 聊天功能,实现流式文本输出和 Markdown 渲染。
AI 模型通常返回 Markdown 格式的文本内容。为了在小程序中正确显示格式化后的文本(如标题、列表、代码块等),我们需要使用 mp-html 组件。
在小程序开发工具的命令行中执行以下命令:
npm install mp-html
如果提示缺少 npm 命令,请确保已配置好小程序的 npm 环境。
安装完成后,项目根目录会生成 miniprogram_npm 文件夹。打开 Index/index.json 文件,注册组件并设置页面标题:
{
"navigationBarTitleText": "微信小程序接入 AI 示例",
"usingComponents": {
"mp-html": "mp-html"
}
}
Bmob 提供了便捷的 AI 接口封装,适合快速集成。
登录 Bmob 后端云平台,进入应用管理页面。点击 设置 -> 应用密钥,获取 Secret Key 和 API 安全码。这两个值将在初始化时用于身份验证。
访问 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;
为了实现流式对话体验,需要建立长连接并处理实时返回的数据。
打开 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: '' });
},
注意:
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 服务的对接。以下是进一步优化建议:
setData,可考虑节流处理或仅在关键节点更新 UI。Secret Key,生产环境建议通过自有后端代理转发请求,保护密钥安全。此方案可作为基础模板,开发者可根据业务需求扩展语音识别、图片上传等多模态功能。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online
基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online