Concepts

Apparence et fonctionnalité

Copier la page

Faites en sorte que votre application fasse partie de Lia. Les variables Lia de CSS, la zone d'affichage et les zones sûres, la langue de la personne et le texte de droite à gauche, ainsi que le son qu'elle peut désactiver.

#Lia'son thème

Lia transmet ses couleurs à votre page, claire ou sombre, selon la configuration Lia de la personne. Après Lia.init() ils'réutilisez les variables CSS sur votre page'la racine, maintenue à jour lorsque la personne change :

body {
  background: var(--lia-bg-color);
  color: var(--lia-text-color);
}
.card { background: var(--lia-secondary-bg-color); }
.hint { color: var(--lia-hint-color); }
button.primary { background: var(--lia-button-color); color: var(--lia-button-text-color); }

Variable	De `Lia.theme`	Ce qu'il est
`--lia-bg-color`	`bg_color`	La page'le premier plan
`--lia-text-color`	`text_color`	Texte
`--lia-hint-color`	`hint_color`	Texte plus discret
`--lia-link-color`	`link_color`	Liens (Lia bleu)
`--lia-button-color`	`button_color`	Boutons (Lia bleu)
`--lia-button-text-color`	`button_text_color`	Texte sur les boutons
`--lia-secondary-bg-color`	`secondary_bg_color`	Cartes et puits
`--lia-header-bg-color`	`header_bg_color`	Lia'en-tête
`--lia-bottom-bar-bg-color`	`bottom_bar_bg_color`	Derrière les boutons inférieurs
`--lia-accent-text-color`	`accent_text_color`	Texte avec accents
`--lia-section-bg-color`	`section_bg_color`	Sections
`--lia-section-header-text-color`	`section_header_text_color`	Titres de section
`--lia-subtitle-text-color`	`subtitle_text_color`	Sous-titres
`--lia-destructive-text-color`	`destructive_text_color`	Actions destructrices
`--lia-section-separator-color`	`section_separator_color`	Lignes de cheveux
`--lia-color-scheme`	`Lia.colorScheme`	`light` ou `dark`

Les noms suivent Telegram'ses paramètres de thème, donc le code écrit pour les mini-applications Telegram s'applique. Écoutez le theme événement pour redessiner tout ce que vous peignez vous-même (un canvas, par exemple).

Vous pouvez également définir la couleur derrière votre page et celle de Lia'en-tête avec Lia.setBackgroundColor et Lia.setHeaderColor.

#La fenêtre d'affichage

Lia.viewport est { height, expanded }: la hauteur que votre page a en px, et si une feuille est tirée jusqu'à la hauteur maximale. Le viewport événement se déclenche lorsqu'il change (la feuille affichée, les boutons du bas montrés), et --lia-viewport-height garde la hauteur.

#Zones sécurisées

Les téléphones ont des encoches et des barres de maison. Lia les transmet comme Lia.safeArea et CSS variables, en px :

Variable	Ce qu'il est
`--lia-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Le téléphone'sa propre zone de sécurité (`Lia.safeArea`)
`--lia-content-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Débarrassé de Lia'les boutons Flottants Fermer et ⋯ même en plein écran (`Lia.contentSafeArea`)

Dans une feuille ou sous Lia'en-tête, vous avez surtout besoin de la partie du bas. En plein écran, gardez le contenu en dessous de la zone de sécurité du contenu'top :

.app {
  padding-top: var(--lia-content-safe-area-inset-top, 0px);
  padding-bottom: var(--lia-safe-area-inset-bottom, 0px);
}

#Langue

Lia.language est la langue que la personne utilise Lia en, l'une des Lia's 13:

Code	Langue	Code	Langue
`en`	Anglais	`id`	Indonésien
`es`	Espagnol	`fil`	Philippin
`pt`	Português	`sw`	Swahili
`fr`	Français	`hi`	हिन्दी
`tr`	Turque	`ar`	Arabe (de droite à gauche)
`ru`	Русский	`zh`	中文
`vi`	Vietnamien

Afficher votre application'ses propres mots dans le texte. Le SDK définit votre page's lang pour vous ; Lia.rtl dit si la langue est lue de gauche à droite, donc définissez la direction vous-même :

Lia.init().then(function () {
  document.documentElement.dir = Lia.rtl ? "rtl" : "ltr";
  render(WORDS[Lia.language] || WORDS.en);
  Lia.ready();
});
Lia.on("languageChanged", function (data) {
  document.documentElement.dir = data.rtl ? "rtl" : "ltr";
  render(WORDS[data.language] || WORDS.en);
});

#Son

Les gens peuvent désactiver votre application depuis Lia'menu ⋯, et Lia le rappelle pour votre application. Lia.soundOn dit s'ils veulent vos sons, et soundChanged dit quand il change. Jouez des sons uniquement pendant qu'il'sur. Résout avec

let soundOn = Lia.soundOn;
Lia.on("soundChanged", function (data) {
  soundOn = data.on;
  if (!soundOn) music.pause();
});
function play(sound) { if (soundOn) sound.play(); }

Votre page peut jouer un son sans attendre le premier clic. Pour mixer avec la musique déjà en cours sur le téléphone au lieu de l'arrêter, définissez navigator.audioSession.type = "ambient" où le téléphone le supporte (Lia'jeux maintenant).

#Plateforme

Lia.platform est ios ou android après init(). Lia'frame est le téléphone'sa propre vue web : Safari'sur iPhone, Chrome'sur Android, Chrome

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