मार्गदर्शन

एक सूची और शुरुआती कोड जो आपके एप्प को Lia के हिस्से के रूप में महसूस कराता है। थीम, सुरक्षित क्षेत्र, भाषा, बटन, वापस नेविगेशन, हैप्टिक्स और ध्वनि।

#एक स्टार्टर

<!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().
• कोई होवर, कोई छोटे लक्ष्य। यह'से एक फोन: 44 पिक्सल टैप लक्ष्य कम से कम, और बटनों पर कोई टेक्स्ट चयन नहीं।

#अपने हेडर को रंग दें

अगर आपके एप्प के पास अपना मजबूत रंग है, तो Lia को दें'शीर्षक और पृष्ठभूमि एक ही हैं:

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

Lia हेडर को बदलता है'राज्य के टेक्स्ट और बटन उपयुक्त के लिए हल्का या गहरा है।

स्वचालित अनुवाद। अंग्रेजी सत्य का स्रोत है। अंग्रेजी में पढ़ें