猹件开发组

Appearance

On this page

猹引擎 ​

GUI - 多页面跳转路由 ​

这页解决什么问题 ​

把首页、活动页、商店页、任务页串成可跳转的导航流程。

路由结构示例 ​

页面ID作用
home.main首页
activity.center活动中心
shop.main商店主页
quest.main任务主页

不写代码版做法 ​

  1. 每个页面先定一个固定 ID。
  2. 每个跳转按钮只做一件事：跳到某个页面 ID。
  3. 需要记录来源页时，额外上报 fromPageId。

跳转模板 ​

js
async function go(pageId) {
  await ChaEngine.openUi(pageId);
}

function bindRoute() {
  document.getElementById('goActivity').onclick = () => go('activity.center');
  document.getElementById('goShop').onclick = () => go('shop.main');
  document.getElementById('goQuest').onclick = () => go('quest.main');
}

带来源页的跳转模板 ​

js
async function goWithTrace(pageId, fromPageId) {
  await ChaEngine.sendToServer('ui.route', {
    action: 'route_change',
    body: { pageId, fromPageId }
  });

  await ChaEngine.openUi(pageId);
}

客户常见错误 ​

  1. 页面 ID 重复，导致跳错页。
  2. 页面跳转成功但状态没刷新，原因是没做目标页初始化请求。
  3. 跳转链路过长，没有统一返回首页按钮。