猹件开发组

Appearance

On this page

猹引擎 ​

GUI - 任务与追踪界面 ​

这页解决什么问题 ​

让任务页面可以“拉取任务、查看详情、设置追踪”。

不写代码版做法 ​

  1. 页面打开后先请求任务列表。
  2. 点击任务条目后显示详情。
  3. 点击“追踪”后把该任务设为主追踪。

任务页功能 ​

功能页面行为
任务列表展示任务和阶段
任务详情展示目标和奖励
任务追踪设置主追踪
任务提交提交当前进度

动作模板 ​

js
async function queryQuestList() {
  await ChaEngine.sendToServer('ui.action', {
    action: 'quest_query'
  });
}

async function trackQuest(questId) {
  await ChaEngine.sendToServer('ui.action', {
    action: 'quest_track',
    body: { questId }
  });
}

状态模板 ​

js
ChaEngine.onServerData((packet) => {
  if (packet.channel !== 'ui.state') {
    return;
  }

  const data = JSON.parse(packet.data || '{}');

  if (data.action === 'quest_query') {
    renderQuestList(data.quests || []);
  }

  if (data.action === 'quest_track') {
    markQuestTracked(data.questId);
    showToast('已设置主追踪任务');
  }
});

客户常见错误 ​

  1. 追踪按钮绑定错任务 ID。
  2. 切页后未重新拉取任务状态。
  3. 任务完成后页面仍显示旧阶段。