【ibbot角色智能体-案例】志愿小助手（微信小程序）

【ibbot角色智能体-案例】志愿小助手（微信小程序）

任务指令

将此应用转为微信小程序：志愿填报小助手 - 张雷峰AI

任务结果

---

根据您提供的网页内容，这个"志愿填报小助手"是一个基于AI的交互式工具。要将其完整地转为微信小程序，核心是在微信小程序中复现其AI对话与报告生成功能。

由于原网页是一个包含后端AI服务的动态应用，无法仅通过前端代码完整复制。下面是一个可运行的微信小程序前端框架，并说明了如何对接您已有的API服务。

1. 微信小程序核心代码

以下代码实现了小程序的界面布局和交互逻辑。您需要将其中的 API_URL 和请求参数替换为您的真实服务地址和密钥。

<!-- 此文件为微信小程序页面 wxml 结构 -->
<!-- pages/gaokao/gaokao.wxml -->
<view class="container">
  <!-- 顶部专家信息 -->
  <view class="header">
    <text class="emoji">🎯</text>
    <text class="title">志愿填报小助手</text>
    <text class="expert">张雷峰 · 15年实战专家 · 敢说真话</text>
    <view class="balance-warning">
      <text>⚠️ 请配置 💳 余额: --</text>
    </view>
  </view>

  <!-- 快速示例按钮 -->
  <view class="quick-examples">
    <text class="label">📌 快速示例：</text>
    <button size="mini" bindtap="fillExample" data-text="北京历史类3500">北京历史类3500</button>
    <button size="mini" bindtap="fillExample" data-text="江苏历史类3000">江苏历史类3000</button>
    <button size="mini" bindtap="fillExample" data-text="广东物理类8500">广东物理类8500</button>
    <button size="mini" type="primary" bindtap="sendMessage">生成报告</button>
    <text class="mode-tag">模式: task</text>
  </view>

  <!-- 对话消息列表 -->
  <scroll-view class="chat-area" scroll-y scroll-into-view="{{scrollToView}}" style="height: 60vh;">
    <view wx:for="{{messages}}" wx:key="id" id="msg-{{index}}" class="message-item {{item.role === 'user' ? 'user-msg' : 'ai-msg'}}">
      <text class="role-label">{{item.role === 'user' ? '我' : '张雷峰'}}</text>
      <view class="bubble">
        <text>{{item.content}}</text>
        <text wx:if="{{item.isLoading}}" class="loading-dot">⏳ 处理中... 0s</text>
      </view>
    </view>
    <view wx:if="{{isWaiting}}" class="typing-indicator">
      <text>⏳ 张雷峰正在思考...</text>
    </view>
  </scroll-view>

  <!-- 底部输入区 -->
  <view class="input-area">
    <input type="text" placeholder="输入你的分数、排名和意向..." value="{{inputValue}}" bindinput="onInput" confirm-type="send" bindconfirm="sendMessage" />
    <button type="primary" size="mini" bindtap="sendMessage">发送</button>
  </view>
</view>

/* 此文件为页面样式 wxss */
/* pages/gaokao/gaokao.wxss */
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f7f9fc;
  padding: 10px 16px;
  box-sizing: border-box;
}

.header {
  text-align: center;
  padding: 12px 0;
  border-bottom: 1px solid #e6eaef;
  margin-bottom: 12px;
}
.emoji { font-size: 28px; margin-right: 6px; }
.title { font-size: 22px; font-weight: 700; color: #1a1a2e; }
.expert { display: block; font-size: 13px; color: #5e6f7e; margin-top: 4px; }
.balance-warning { background: #fff3cd; color: #856404; padding: 4px 0; border-radius: 6px; margin-top: 6px; font-size: 13px; }

.quick-examples {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0 12px;
  border-bottom: 1px solid #e6eaef;
  margin-bottom: 12px;
}
.quick-examples .label { font-size: 14px; font-weight: 500; margin-right: 4px; }
.quick-examples button { margin: 0; }
.mode-tag { background: #e8f5e9; color: #2e7d32; padding: 2px 10px; border-radius: 12px; font-size: 12px; }

.chat-area {
  flex: 1;
  padding: 8px 0;
  overflow-y: auto;
  margin-bottom: 8px;
}
.message-item {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
}
.user-msg { align-items: flex-end; }
.ai-msg { align-items: flex-start; }
.role-label { font-size: 12px; color: #7f8c9b; margin-bottom: 3px; }
.bubble {
  max-width: 80%;
  padding: 10px 14px;
  border-radius: 12px;
  background-color: #ffffff;
  border: 1px solid #e6eaef;
  word-break: break-word;
}
.user-msg .bubble { background-color: #4caf50; color: white; border: none; }
.loading-dot { color: #888; font-size: 13px; margin-left: 6px; }

.typing-indicator { padding: 10px 0; color: #7f8c9b; font-size: 14px; }

.input-area {
  display: flex;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #e6eaef;
  background: #ffffff;
}
.input-area input {
  flex: 1;
  border: 1px solid #d0d5dd;
  border-radius: 20px;
  padding: 6px 14px;
  height: 40px;
  font-size: 15px;
}
.input-area button { height: 40px; line-height: 40px; padding: 0 18px; border-radius: 20px; }

// 此文件为页面逻辑 js
// pages/gaokao/gaokao.js
Page({
  data: {
    messages: [
      { id: 1, role: 'ai', content: '👋 欢迎使用志愿填报小助手！\n我是张雷峰，15年高考志愿填报实战专家。\n发送你的分数、排名、意向，我帮你分析！' }
    ],
    inputValue: '',
    isWaiting: false,
    scrollToView: '',
    // 请替换为您的真实API地址和参数
    API_URL: 'http://ai.ibbrole.html.dtns.top/api/chat',
    API_KEY: 'your_api_key_here',
    CARD_ID: 'your_card_id_here',
    ROLE_ID: 'your_role_id_here'
  },

  onInput(e) {
    this.setData({ inputValue: e.detail.value });
  },

  // 填充示例文本
  fillExample(e) {
    this.setData({ inputValue: e.currentTarget.dataset.text });
  },

  // 发送消息
  sendMessage() {
    const userMsg = this.data.inputValue.trim();
    if (!userMsg) {
      wx.showToast({ title: '请输入内容', icon: 'none' });
      return;
    }

    // 添加用户消息
    const newMessages = [...this.data.messages, { id: Date.now(), role: 'user', content: userMsg }];
    this.setData({
      messages: newMessages,
      inputValue: '',
      isWaiting: true,
      scrollToView: `msg-${newMessages.length - 1}`
    });

    // 调用AI API
    this.callAI(userMsg);
  },

  // 调用后端AI接口
  callAI(userMessage) {
    wx.request({
      url: this.data.API_URL,
      method: 'GET', // 或 POST，根据文档
      data: {
        api_key: this.data.API_KEY,
        card_id: this.data.CARD_ID,
        role_id: this.data.ROLE_ID,
        message: userMessage,
        mode: 'task' // 根据文档使用 task 模式
      },
      success: (res) => {
        this.handleAIResponse(res.data);
      },
      fail: (err) => {
        console.error('请求失败', err);
        this.handleAIError('网络请求失败，请检查网络或稍后重试。');
      }
    });
  },

  handleAIResponse(data) {
    this.setData({ isWaiting: false });
    let reply = '抱歉，我没有理解您的问题，请重新描述。';
    if (data.success && data.data) {
      // 根据API文档，结果在 data.final_result 或 data.response 中
      reply = data.data.final_result || data.data.response || reply;
    } else {
      reply = data.error || '服务返回错误，请稍后重试。';
    }
    this.appendAIMessage(reply);
  },

  handleAIError(errorMsg) {
    this.setData({ isWaiting: false });
    this.appendAIMessage(`❌ 发生错误：${errorMsg}`);
  },

  appendAIMessage(content) {
    const newMessages = [...this.data.messages, { id: Date.now(), role: 'ai', content: content }];
    this.setData({
      messages: newMessages,
      scrollToView: `msg-${newMessages.length - 1}`
    });
  }
});

2. 对接与配置说明

1. 替换API凭证 ：在 gaokao.js 中找到 API_KEY、CARD_ID、ROLE_ID 变量，替换为您的真实值。这些是调用"角色智能体（点卡模式）"接口所必需的。
2. 确认接口地址 ：当前使用的 API_URL 是 http://ai.ibbrole.html.dtns.top/api/chat，请确保此地址在微信小程序后台已配置为合法请求域名（需为 https 且已备案）。
3. 处理返回结果 ：代码已根据您提供的API文档，优先取 data.final_result 作为AI回复内容，并做了基本的错误处理。

3. 后续优化建议

• 余额显示 ：可从API的返回数据（data.cost.balance）中获取剩余点数，并更新到顶部的余额区域。
• 报告链接 ：如果AI返回的是报告链接（如示例中的 http://web3apps...），可以在 appendAIMessage 中解析出链接，并用微信小程序的 <web-view> 组件打开。
• 交互增强：可以增加"复制消息"、"语音输入"等功能提升体验。

总结来说，这个微信小程序版本已经具备了与您网页版相同的核心对话功能。您只需正确配置API密钥，即可在小程序中运行"志愿填报小助手"。

小程序域名api通道

https://ai.ibbrole.html.dtns.top/api/chat?api_key=YOUR_API_KEY&card_id=YOUR_CARD_ID&role_id=role_1781657551308_84yfibimd&message=%E4%BD%A0%E5%A5%BD&mode=auto

小程序（效果图）

• 运行效果图

、

• 小程序（体验版）二维码