指南

让它感觉像Lia

复制页面

一个检查清单和入门代码，让你的应用感觉是Lia的一部分。主题、安全区域、语言、按钮、返回导航、触觉反馈和声音。

#一个入门

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no">
  <script src="https://api.lialabs.org/sdk/lia-apps-v1.js"></script>
  <style>
    :root { color-scheme: light dark; }
    html, body { margin: 0; height: 100%; }
    body {
      background: var(--lia-bg-color, #fff);
      color: var(--lia-text-color, #0b0b0f);
      font: 16px/1.5 system-ui, -apple-system, sans-serif;
      -webkit-tap-highlight-color: transparent;
      -webkit-user-select: none;
      user-select: none;
    }
    .app {
      min-height: var(--lia-viewport-height, 100vh);
      padding: calc(16px + var(--lia-content-safe-area-inset-top, 0px)) 16px calc(16px + var(--lia-safe-area-inset-bottom, 0px));
      box-sizing: border-box;
    }
    .muted { color: var(--lia-hint-color, #6b6e7b); }
    .card { background: var(--lia-secondary-bg-color, #f5f5f7); border-radius: 18px; padding: 16px; }
  </style>
</head>
<body>
  <main class="app" id="app"></main>
  <script>
    var WORDS = {
      en: { hello: "Hello", start: "Start" },
      es: { hello: "Hola", start: "Empezar" },
      ar: { hello: "مرحبًا", start: "ابدأ" },
    };
    function words() { return WORDS[Lia.language] || WORDS.en; }

    Lia.init().then(function (me) {
      document.documentElement.dir = Lia.rtl ? "rtl" : "ltr";
      document.getElementById("app").innerHTML = '<div class="card"><b>' + words().hello + ", @" + me.player.name + '</b></div>';
      Lia.mainButton.setText(words().start).show().onClick(start);
      Lia.ready();
    }, function (error) {
      document.getElementById("app").textContent = "Open this app inside Lia.";
    });

    Lia.on("languageChanged", function (data) {
      document.documentElement.dir = data.rtl ? "rtl" : "ltr";
      Lia.mainButton.setText(words().start);
    });
  </script>
</body>
</html>

#清单

调用 Lia.ready() 一旦你的第一个屏幕绘制完成就立即，不要在所有内容加载之后。Lia'的加载器会覆盖你的应用，直到那时。
使用 Lia'的颜色。 在...上构建 --lia-bg-color, --lia-text-color, --lia-hint-color 和 --lia-secondary-bg-color，并且你的应用通过 Lia 在明暗之间切换。
注意安全区域。 在底部添加填充 --lia-safe-area-inset-bottom; 在全屏模式下，保持内容在下方 --lia-content-safe-area-inset-top.
说他们的语言。 使用 Lia.language 为你的词语，设置 dir 从 Lia.rtl，并监听 languageChanged。Lia支持13种语言；英语是一个很好的备用选项。
使用 Lia'的主要操作按钮。 Lia.mainButton 位于人们期望的位置，在主页栏上方，以 Lia 蓝色显示。
使用返回按钮返回到您自己的屏幕。 显示 Lia.backButton 一个屏幕内，并处理 onClick; 在您的第一个屏幕上隐藏它。
使用 Lia'的对话框。 Lia.confirm, Lia.showPopup 和 Lia.toast 看起来像Lia的其余部分，并且在应该从右到左阅读时也是如此。
感受它。 Lia.haptic("selection") 对于选择项， "success" 和 "error" 为了结果。不是每一帧。
尊重声音。 仅在 Lia.soundOn，并停止在 soundChanged 和 pause.
暂停 pause. 计时器、游戏循环、音乐和重要的套接字。
在进行中的游戏中关闭前询问 与 Lia.enableClosingConfirmation()，并在它'结束。
阻止滑动关闭使用它们的游戏 与 Lia.disableVerticalSwipes().
没有悬停、没有小目标。 它's 一个电话：44 像素的点击目标至少，按钮上没有文本选择。

#为你的标题着色

如果你的应用程序有自己的鲜明色彩，请提供Lia'的标题和背景相同：

Lia.setHeaderColor("#0E1A3A");
Lia.setBackgroundColor("#0E1A3A");

Lia会改变标题'的文字和按钮会根据情况变亮或变暗。

自动翻译。英语是真实来源。阅读英文