当前位置：首页 > news >正文

Qwen3.5-4B模型微信小程序集成教程：打造个人AI助手

news 2026/7/30 6:38:02

Qwen3.5-4B模型微信小程序集成教程：打造个人AI助手

1. 准备工作与环境搭建

在开始之前，我们需要确保开发环境已经准备就绪。首先需要安装微信开发者工具，这是开发微信小程序的必备IDE。可以从微信官方开发者网站下载最新版本。

对于后端API部分，假设你已经部署好了Qwen3.5-4B模型的推理服务，并获得了可访问的API地址。如果没有现成的API服务，可以考虑使用云服务商提供的预置镜像快速部署。

开发微信小程序需要注册小程序账号并获取AppID。注册完成后，在微信开发者工具中新建项目时填入这个AppID。建议选择"不使用云服务"的基础模板开始项目。

2. 小程序基础结构配置

2.1 项目目录结构

微信小程序的标准目录结构如下：

pages/ # 页面目录 index/ # 首页 logs/ # 日志页 utils/ # 工具函数 app.js # 小程序逻辑 app.json # 小程序公共配置 app.wxss # 小程序公共样式表

我们需要在app.json中配置页面路径和窗口样式：

{ "pages": [ "pages/index/index", "pages/history/history" ], "window": { "navigationBarTitleText": "AI助手", "navigationBarBackgroundColor": "#ffffff" } }

2.2 基础页面布局

在pages/index/index.wxml中构建聊天界面基本结构：

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

3. 实现API通信功能

3.1 配置网络请求

微信小程序使用wx.request方法进行网络请求。首先在utils目录下创建api.js文件封装API调用：

const API_BASE_URL = 'https://your-api-endpoint.com/v1' export const chatCompletion = (messages) => { return new Promise((resolve, reject) => { wx.request({ url: `${API_BASE_URL}/chat/completions`, method: 'POST', data: { model: "Qwen3.5-4B", messages: messages, stream: true }, header: { 'Content-Type': 'application/json', 'Authorization': 'Bearer your-api-key' }, responseType: 'text', enableChunked: true, success(res) { resolve(res.data) }, fail(err) { reject(err) } }) }) }

3.2 实现流式响应处理

Qwen3.5-4B支持流式响应，我们可以通过监听数据块来实现实时显示：

let socketTask = null function connectWebSocket(messages) { socketTask = wx.connectSocket({ url: 'wss://your-api-endpoint.com/v1/chat/completions', header: { 'Authorization': 'Bearer your-api-key' }, success() { socketTask.onMessage((res) => { const data = JSON.parse(res.data) if (data.choices && data.choices[0].delta.content) { this.setData({ assistantMessage: this.data.assistantMessage + data.choices[0].delta.content }) } }) } }) socketTask.onOpen(() => { socketTask.send({ data: JSON.stringify({ model: "Qwen3.5-4B", messages: messages, stream: true }) }) }) }

4. 实现完整聊天功能

4.1 页面逻辑实现

在pages/index/index.js中实现完整的聊天逻辑：

Page({ data: { messages: [], inputValue: '', loading: false }, onInput(e) { this.setData({ inputValue: e.detail.value }) }, async sendMessage() { if (!this.data.inputValue.trim()) return const userMessage = { id: Date.now(), role: 'user', content: this.data.inputValue } this.setData({ messages: [...this.data.messages, userMessage], inputValue: '', loading: true }) try { const response = await chatCompletion(this.data.messages) const assistantMessage = { id: Date.now() + 1, role: 'assistant', content: response.choices[0].message.content } this.setData({ messages: [...this.data.messages, assistantMessage], loading: false }) this.saveHistory() } catch (error) { console.error('API请求失败:', error) this.setData({ loading: false }) } }, saveHistory() { wx.setStorageSync('chatHistory', this.data.messages) }, onLoad() { const history = wx.getStorageSync('chatHistory') || [] this.setData({ messages: history }) } })

4.2 样式优化

在pages/index/index.wxss中添加样式：

.container { display: flex; flex-direction: column; height: 100vh; } .chat-area { flex: 1; padding: 20rpx; overflow-y: auto; } .message { margin-bottom: 20rpx; padding: 15rpx 20rpx; border-radius: 10rpx; max-width: 80%; } .user { background-color: #95ec69; align-self: flex-end; } .assistant { background-color: #f5f5f5; align-self: flex-start; } .input-area { display: flex; padding: 20rpx; border-top: 1rpx solid #eee; } .input-area input { flex: 1; margin-right: 20rpx; padding: 15rpx; border: 1rpx solid #ddd; border-radius: 10rpx; }

5. 实现对话历史功能

5.1 创建历史页面

新建pages/history/history.wxml：

<view class="container"> <block wx:for="{{historyList}}" wx:key="timestamp"> <view class="history-item" bindtap="loadHistory">Page({ data: { historyList: [] }, onLoad() { this.loadHistoryList() }, loadHistoryList() { const allHistory = wx.getStorageSync('allChatHistory') || [] this.setData({ historyList: allHistory.map(item => ({ preview: item.messages[0].content.substring(0, 20) + '...', time: new Date(item.timestamp).toLocaleString(), messages: item.messages })) }) }, loadHistory(e) { const index = e.currentTarget.dataset.index const messages = this.data.historyList[index].messages wx.navigateTo({ url: `/pages/index/index?messages=${encodeURIComponent(JSON.stringify(messages))}` }) } })