Hướng dẫn

Làm nó cảm giác như Lia

Sao chép trang

Một danh sách kiểm tra và mã khởi đầu để ứng dụng của bạn cảm giác như một phần của Lia. Chủ đề, khu vực an toàn, ngôn ngữ, nút, điều hướng quay lại, rung và âm thanh.

#Một người bắt đầu

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>

#Danh sách kiểm tra

Gọi Lia.ready() ngay khi màn hình đầu tiên của bạn được vẽ, không sau khi mọi thứ đã tải xong. Lia'bộ tải của nó che phủ ứng dụng của bạn cho đến lúc đó.
Sử dụng Lia'màu sắc. Xây dựng trên --lia-bg-color, --lia-text-color, --lia-hint-color và --lia-secondary-bg-color, và ứng dụng của bạn chuyển đổi với Lia giữa chế độ ánh sáng và chế độ tối.
Lưu ý đến các khu vực an toàn. Đệm phía dưới bằng --lia-safe-area-inset-bottom; trong chế độ toàn màn hình, giữ nội dung dưới --lia-content-safe-area-inset-top.
Nói ngôn ngữ của họ. Sử dụng Lia.language cho các từ của bạn, đặt dir từ Lia.rtl, và lắng nghe languageChanged. Lia nói 13 ngôn ngữ; tiếng Anh là sự thay thế hợp lệ.
Sử dụng Lia'nút cho hành động chính. Lia.mainButton nằm ở nơi mọi người kỳ vọng, phía trên thanh trang chủ, trong màu xanh Lia.
Sử dụng nút quay lại cho các màn hình của bạn. Hiển thị Lia.backButton một màn hình vào, và xử lý onClick; ẩn nó trên màn hình đầu tiên của bạn.
Sử dụng Lia'các hộp thoại. Lia.confirm, Lia.showPopup và Lia.toast trông giống như phần còn lại của Lia và đọc từ trái sang phải khi chúng nên.
Cảm nhận nó. Lia.haptic("selection") cho các lựa chọn, "success" và "error" cho kết quả. Không phải khung hình nào.
Tôn trọng âm thanh. Chỉ chơi khi Lia.soundOn, và dừng lại ở soundChanged và pause.
Tạm dừng trên pause. Các bộ đếm thời gian, vòng lặp trò chơi, âm nhạc và socket quan trọng.
Hỏi trước khi đóng trò chơi đang diễn ra với Lia.enableClosingConfirmation(), và tắt nó khi nó'kết thúc.
Dừng các cử chỉ vuốt làm đóng trò chơi sử dụng chúng với Lia.disableVerticalSwipes().
Không có hiệu ứng hover, không có mục nhỏ. Nó's một lần đi lại đến 44 mỗi lần. Đối với một ứng dụng thường xuyên giao tiếp với máy chủ của nó, hãy xác minh một lần và sau đó sử dụng riêng của bạn:

#Màu header của bạn

Nếu ứng dụng của bạn có màu sắc riêng mạnh mẽ, hãy cung cấp Lia'tiêu đề và nền giống nhau:

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

Lia chuyển đổi tiêu đề'mà văn bản và nút có thể sáng hoặc tối để phù hợp.

Được dịch tự động. Tiếng Anh là nguồn tin cậy. Đọc bằng tiếng Anh