Guides

Une checklist et du code de départ pour que votre application semble faire partie de Lia. Thème, zones sûres, langue, boutons, navigation en arrière, haptiques et sons.

#Un débutant

<!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>

#La liste de vérification

• Appel Lia.ready() dès que votre première écran est dessiné, pas après que tout ait chargé. Lia'chargeur couvre votre application jusqu'à ce que cela soit fait.
• Utilisez Lia'les couleurs. Construire sur --lia-bg-color, --lia-text-color, --lia-hint-color et --lia-secondary-bg-color, et votre application bascule avec Lia entre clair et sombre.
• Faites attention aux zones sûres. Remplir le bas avec --lia-safe-area-inset-bottom; en plein écran, gardez le contenu en dessous --lia-content-safe-area-inset-top.
• Parlez leur langue. Utiliser Lia.language pour vos mots, définissez dir de Lia.rtl, et écoutez languageChanged. Lia parle 13 langues ; l'anglais est une bonne option de secours.
• Utilisez Lia'les boutons pour l'action principale. Lia.mainButton se situe là où les gens s'y attendent, au-dessus de la barre d'accueil, en bleu Lia.
• Utilisez le bouton précédent pour vos propres écrans. Afficher Lia.backButton une seule fenêtre, et gérer onClick; cachez-le sur votre première page.
• Utilisez Lia'les boîtes de dialogue. Lia.confirm, Lia.showPopup et Lia.toast ressemblent au reste de Lia et s'affichent de gauche à droite lorsqu'elles devraient.
• Ressentez-le. Lia.haptic("selection") pour les choix, "success" et "error" pour les résultats. Pas chaque image.
• Respecte le son. Jouer uniquement pendant Lia.soundOn, et arrêter sur soundChanged et pause.
• Mettre en pause sur pause. Chronomètres, boucles de jeu, musique et sockets qui comptent.
• Demandez avant de fermer un jeu en cours avec Lia.enableClosingConfirmation(), et l'éteindre quand il'au-dessus.
• Arrêter les glissements de fermeture d'un jeu qui en utilise avec Lia.disableVerticalSwipes().
• Aucun survol, aucune cible petite. Il's un téléphone : cibles de tap 44 px au moins, et pas de sélection de texte sur les boutons.

#Coloriez votre en-tête

Si votre application a une couleur forte propre, donnez Lia'en-tête et arrière-plan identiques :

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

Lia change l'en-tête'son texte et ses boutons clairs ou sombres selon le thème.

Traduit automatiquement. L'anglais est la source de vérité. Lire en anglais