Phi-3.5-mini-instruct微信小程序开发：集成AI对话功能实战-编程阁

Phi-3.5-mini-instruct微信小程序开发：集成AI对话功能实战

1. 为什么要在小程序里集成AI对话

最近帮朋友公司做了个智能客服小程序，发现很多中小企业都有类似需求。传统客服人力成本高，响应速度慢，而集成AI对话功能后，不仅能7x24小时在线，还能智能回答常见问题。Phi-3.5-mini-instruct这个轻量级模型特别适合放在小程序里用，部署简单，响应快，效果也不错。

用微信小程序做AI应用有个明显优势：用户不用下载新APP，扫码就能用。我们这次要做的，就是把Phi-3.5-mini-instruct的对话能力无缝集成到小程序里，打造一个既智能又便捷的交互体验。

2. 准备工作与环境搭建

2.1 获取模型API访问权限

首先需要搞定模型服务。Phi-3.5-mini-instruct可以通过两种方式使用：

直接调用云端API：如果有现成的服务提供商，直接申请API Key就行
本地部署：在自有服务器上部署模型，适合对数据隐私要求高的场景

我建议初创团队先用云端方案，省去部署维护的麻烦。这里以某云服务商为例，注册后获取到这两个关键信息：

API端点：https://api.example.com/v1/chat
鉴权密钥：sk-xxxxxxxxxxxxxxxx

2.2 创建微信小程序项目

打开微信开发者工具，新建项目时注意：

选择"不使用云服务"（我们自己做后端）
勾选"ES6转ES5"和"增强编译"
AppID可以用测试号先开发

项目结构建议这样组织：

├── pages/ │ ├── index/ # 主页面 │ └── chat/ # 对话页面 ├── utils/ │ └── api.js # 网络请求封装 └── app.js # 全局配置

3. 核心功能实现步骤

3.1 封装网络请求模块

在小程序的utils/api.js里，我们先封装一个通用的请求方法：

const BASE_URL = 'https://api.example.com/v1' function request(path, data, method = 'POST') { return new Promise((resolve, reject) => { wx.request({ url: `${BASE_URL}${path}`, method, data, header: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${getApp().globalData.apiKey}` }, success(res) { if (res.statusCode === 200) { resolve(res.data) } else { reject(res.data) } }, fail(err) { reject(err) } }) }) } export const chatWithAI = (messages) => { return request('/chat', { messages }) }

这里有几个关键点：

把API Key存在app.globalData里，避免硬编码
统一处理错误状态码
暴露具体的业务接口（如chatWithAI）

3.2 实现流式文本输出

直接等AI生成完整回复再显示，用户体验会很差。我们可以用WebSocket或者分块请求实现流式输出：

// 在页面中 let timer = null function streamChat(messages, callback) { let fullResponse = '' timer = setInterval(async () => { const res = await chatWithAI({ messages, partial_response: fullResponse }) if (res.content) { fullResponse += res.content callback(fullResponse) } if (res.is_end) { clearInterval(timer) } }, 300) } // 使用示例 streamChat([{role: 'user', content: '你好'}], (text) => { this.setData({ replyText: text }) })

这个方案虽然简单，但能明显提升用户体验。更完善的方案可以用WebSocket，这里不展开讲。

3.3 处理敏感词过滤

AI生成内容必须经过合规性检查。我们在收到回复后要做两步处理：

本地过滤：维护一个基础敏感词库

const bannedWords = ['敏感词1', '敏感词2'] function filterText(text) { let result = text bannedWords.forEach(word => { result = result.replace(new RegExp(word, 'g'), '***') }) return result }

云端二次校验：调用内容安全API

function checkTextSafety(text) { return new Promise((resolve) => { wx.cloud.callFunction({ name: 'contentCheck', data: { text }, success(res) { resolve(res.result.isSafe) } }) }) }

建议两者结合使用，本地过滤快速响应，云端校验更全面。

4. 完整案例：编程问答助手

4.1 页面布局设计

在chat.wxml中设计对话界面：

<view class="chat-container"> <scroll-view scroll-y class="message-list"> <block wx:for="{{messages}}" wx:key="id"> <view class="message {{item.role}}"> <text>{{item.content}}</text> </view> </block> </scroll-view> <view class="input-area"> <input placeholder="输入编程问题..." bindinput="onInput"/> <button bindtap="sendMessage">发送</button> </view> </view>

样式要点：

区分用户和AI的消息气泡
固定输入框在底部
消息列表自动滚动到底部

4.2 对话逻辑实现

在chat.js中维护对话状态：

Page({ data: { messages: [], inputText: '' }, onInput(e) { this.setData({ inputText: e.detail.value }) }, async sendMessage() { const userMsg = { id: Date.now(), role: 'user', content: this.data.inputText } this.setData({ messages: [...this.data.messages, userMsg], inputText: '' }) const aiMsg = { id: Date.now() + 1, role: 'assistant', content: '' } this.setData({ messages: [...this.data.messages, aiMsg] }) await this.streamAIResponse(userMsg.content) }, async streamAIResponse(question) { const messages = this.data.messages .filter(m => m.content) .map(m => ({ role: m.role, content: m.content })) streamChat(messages, (text) => { const updated = this.data.messages.map(m => { if (m.id === aiMsg.id) { return { ...m, content: filterText(text) } } return m }) this.setData({ messages: updated }) }) } })