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

本文介绍了如何在星图GPU平台上自动化部署Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF镜像，快速构建智能对话系统。该方案特别适用于微信小程序集成，用户可通过简单的API调用实现个人AI助手功能，完成智能问答、对话记录等实用场景，大幅提升移动端AI应用开发效率。

十三木

140人浏览 · 2026-04-11 05:28:18

十三木 · 2026-04-11 05:28:18 发布

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" data-index="{{index}}">
      <text>{{item.preview}}</text>
      <text class="time">{{item.time}}</text>
    </view>
  </block>
</view>

5.2 历史页面逻辑

在pages/history/history.js中实现：

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))}`
    })
  }
})