猹件开发组

Appearance

On this page

猹引擎 ​

GUI - 输入框与表单提交 ​

这页解决什么问题 ​

让玩家在页面填写内容后，能稳定提交到服务端。

不写代码版做法 ​

  1. 先定义要收集哪些字段。
  2. 每个字段给出规则（必填、长度、选项）。
  3. 点击提交后统一打包上行。
  4. 服务端返回结果后页面显示提示。

字段规划模板 ​

字段用途规则
name角色名2 到 16 字符
camp阵营必填
title头衔可选

页面模板（带注释） ​

html
<input id="name" placeholder="角色名" />
<select id="camp">
  <option value="">选择阵营</option>
  <option value="light">光明</option>
  <option value="dark">暗影</option>
</select>
<button id="btnSubmit">提交</button>

<script>
  // 把页面输入内容整理成一个对象
  function buildPayload() {
    return {
      name: document.getElementById('name').value,
      camp: document.getElementById('camp').value
    };
  }

  // 点击提交后上行
  document.getElementById('btnSubmit').addEventListener('click', async () => {
    await ChaEngine.sendToServer('ui.action', {
      action: 'submit_profile',
      body: buildPayload()
    });
  });
</script>

回执模板 ​

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

  const data = JSON.parse(packet.data || '{}');
  if (data.action !== 'submit_profile') {
    return;
  }

  if (data.code === 0) {
    showSuccess('资料保存成功');
  } else {
    showError(data.message || '资料保存失败');
  }
});

客户常见错误 ​

  1. 输入框 id 改了，但读取代码没改。
  2. 阵营没选也允许提交，导致服务端校验失败。
  3. 发送动作名写错，回执匹配不到。