猹件开发组

Appearance

On this page

猹引擎 ​

GUI - 按钮与点击回传 ​

这页解决什么问题 ​

让“按钮点击”变成“服务端能识别的业务动作”。

不写代码版做法 ​

你只需要统一三项：

  1. 按钮名：页面里这个按钮叫啥。
  2. 动作名：点击后要触发什么。
  3. 参数：这次点击要带什么信息。

按钮动作清单模板 ​

按钮文案动作名参数示例
进入活动enter_activityactivityId
领取奖励claim_rewardrewardId
打开商店open_shopshopId
关闭页面close_pagepageId

页面模板（带中文注释） ​

html
<button id="btnEnter">进入活动</button>
<button id="btnReward">领取奖励</button>

<script>
  // 统一发送动作的方法
  async function sendAction(action, body = {}) {
    await ChaEngine.sendToServer('ui.action', {
      action, // 动作名，例如 enter_activity
      body    // 参数对象，例如 { activityId: 'arena_001' }
    });
  }

  // 点击“进入活动”
  document.getElementById('btnEnter').addEventListener('click', () => {
    sendAction('enter_activity', { activityId: 'arena_001' });
  });

  // 点击“领取奖励”
  document.getElementById('btnReward').addEventListener('click', () => {
    sendAction('claim_reward', { rewardId: 'daily_1' });
  });
</script>

回执模板（成功失败提示） ​

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

  const data = JSON.parse(packet.data || '{}');
  // data.type: success / error
  // data.message: 提示语
  if (data.type === 'success') {
    showSuccess(data.message);
  }
  if (data.type === 'error') {
    showError(data.message);
  }
});

客户常见错误 ​

  1. 页面动作名写 enterActivity，服务端却约定 enter_activity。
  2. 参数字段名不一致，例如服务端收 rewardId，页面发 id。
  3. 页面用错通道，动作应该走 ui.action。