开始使用

快速入门

复制页面

一个几分钟内即可运行的Lia 应用。托管一个页面，加载SDK，调用Lia.init() 和 Lia.ready()，并在Lia 中作为测试者打开它。

#你需要什么

一个https上的网页。 任何框架，只要它托管在任何地方'通过 HTTPS 提供服务。Lia 仅打开 HTTPS 页面。
一个Lia账户，带有用户名。 人们需要一个用户名才能打开应用，您也需要。
您的应用程序已添加到 Lia。 的 Lia 团队会将其与你的页面一起添加'的地址并让你成为其开发者，这样你就可以在它'在测试中。参见获取访问权限.

#1. 加载SDK

从 SDK 加载 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">
  <script src="https://api.lialabs.org/sdk/lia-apps-v1.js"></script>
  <style>
    body {
      margin: 0;
      font-family: system-ui, sans-serif;
      background: var(--lia-bg-color, #fff);
      color: var(--lia-text-color, #0b0b0f);
      padding-bottom: var(--lia-safe-area-inset-bottom, 0px);
    }
  </style>
</head>
<body>
  <main id="app">Opening…</main>
  <script src="app.js"></script>
</body>
</html>

SDK 在页面上放置一个对象， window.Lia。在Lia应用之外它仍然会加载，但每次调用都会以代码失败 not_in_lia，这样你就可以在普通浏览器中显示友好的消息。

#2. 说你好

调用 Lia.init() 首先。它通过玩家回复，一个用于您服务器的会话代币，那个人'的语言和主题，以及更多。当您的页面绘制时，调用 Lia.ready(): 在此之前，Lia 会在您的应用上显示其自己的加载器。

app.js

Lia.init().then(
  function (me) {
    // me.player.id is this person's id in your app; me.player.name is their Lia username.
    document.getElementById("app").textContent = "Hello, @" + me.player.name;
    Lia.ready();
  },
  function (error) {
    document.getElementById("app").textContent =
      error.code === "not_in_lia" ? "Open this app inside Lia." : "Something went wrong: " + error.code;
  }
);

如果你更喜欢 async 和 await:

try {
  const me = await Lia.init();
  render(me);
  Lia.ready();
} catch (error) {
  if (error.code === "not_in_lia") showOpenInLia();
}

#3. 在 Lia 中打开它

当你的应用处于测试状态时，只有你和Lia团队添加的测试人员可以看到它。打开Lia应用，进入“应用中心”，然后打开你的应用。它的标题显示为测试在你的名称旁边，它出售的任何东西都会花费假的$LIA。

#4. 尝试一些东西

一些可以尝试的事情一旦 init() 已经回答：

// A toast in Lia's own style.
Lia.toast("Welcome in");

// A tap you can feel.
Lia.haptic("success");

// Lia's main button under your app.
Lia.mainButton.setText("Start").show().onClick(function () {
  Lia.mainButton.showProgress();
  startGame().finally(function () { Lia.mainButton.hide(); });
});

// Keep a best score and see the top 50.
Lia.submitScore(1280).then(function () { return Lia.leaderboard(); }).then(console.log);

#5. 添加您的服务器

对于任何重要的内容（人们支付的物品，$LIA你支付的）你的服务器必须检查页面告诉它的内容。它从页面获取会话令牌并用你的密钥进行验证：

server.js

const res = await fetch("https://api.lialabs.org/api/apps/v1/session/verify", {
  method: "POST",
  headers: { Authorization: `Bearer ${process.env.LIA_KEY}`, "Content-Type": "application/json" },
  body: JSON.stringify({ session }),
});
const { valid, playerId } = await res.json();

在您的服务器上验证会逐步通过它。

#下一步

应用如何在Lia中运行: 帧、三种外观和您的页面运行所依据的规则。
出售物品: Lia'的付款表格，端到端。
SDK 参考: 每个方法、属性和事件。
SDK 演示在 https://api.lialabs.org/sdk/demo 尝试每个调用。它在Lia内对测试者开放，Lia团队会将其添加到其中。

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