Понятия

Внешний вид и ощущения

Копировать страницу

Сделайте так, чтобы ваше приложение ощущалось частью Lia. Переменные Lia в теме CSS, область просмотра и безопасные зоны, язык человека и текст справа налево, а также звук, который можно отключить.

#Lia'тема

Lia передает свои цвета вашей странице, светлые или темные, в зависимости от того, как настроен Lia человека. После Lia.init() они'пере CSS переменных на вашей странице'ваш корень, поддерживается актуальным, когда человек меняет:

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); }

Переменная	От `Lia.theme`	Что это
`--lia-bg-color`	`bg_color`	Страница'фоне
`--lia-text-color`	`text_color`	Текст
`--lia-hint-color`	`hint_color`	Более тихий текст
`--lia-link-color`	`link_color`	Ссылки (Lia синий)
`--lia-button-color`	`button_color`	Кнопки (Lia синий)
`--lia-button-text-color`	`button_text_color`	Текст на кнопках
`--lia-secondary-bg-color`	`secondary_bg_color`	Карты и ямы
`--lia-header-bg-color`	`header_bg_color`	Lia'заголовок
`--lia-bottom-bar-bg-color`	`bottom_bar_bg_color`	За нижними кнопками
`--lia-accent-text-color`	`accent_text_color`	Текст с акцентами
`--lia-section-bg-color`	`section_bg_color`	Разделы
`--lia-section-header-text-color`	`section_header_text_color`	Заголовки разделов
`--lia-subtitle-text-color`	`subtitle_text_color`	Субтитры
`--lia-destructive-text-color`	`destructive_text_color`	Разрушительные действия
`--lia-section-separator-color`	`section_separator_color`	Границы
`--lia-color-scheme`	`Lia.colorScheme`	`light` или `dark`

Имена следуют за Telegram'параметры темы, поэтому код, написанный для Telegram mini-приложений, отображается. Слушайте theme событие для перерисовки всего, что вы сами нарисовали (например, холст).

Вы также можете установить цвет фона вашей страницы и Lia'заголовок с Lia.setBackgroundColor и Lia.setHeaderColor.

#Просмотр

Lia.viewport это { height, expanded }: высота вашей страницы в пикселях и то, поднимается ли всплывающее окно до полной высоты. The viewport событие срабатывает при изменении (лист открыт, нижние кнопки показаны), и --lia-viewport-height удерживает высоту.

#Безопасные зоны

Телефоны имеют вырезы и домашние полосы. Lia передает их как Lia.safeArea и CSS переменных, в px:

Переменная	Что это
`--lia-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Телефон'свое безопасное пространство (`Lia.safeArea`)
`--lia-content-safe-area-inset-top`, `-bottom`, `-left`, `-right`	Чисто от Lia'плавающие кнопки Закрыть и ⋯ в полноэкранном режиме тоже (`Lia.contentSafeArea`)

В таблице или под Lia'заголовок, вы в основном нуждаетесь в нижнем. В полноэкранном режиме держите содержимое ниже безопасной области содержимого'верх:

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

#Язык

Lia.language является языком, который человек использует Lia в, один из Lia's 13:

Код	Язык	Код	Язык
`en`	Английский	`id`	Индонезийский
`es`	Испанский	`fil`	Филиппинский
`pt`	Португальский	`sw`	Кисвахили
`fr`	Français	`hi`	हिन्दी
`tr`	Türkçe	`ar`	Арабский (слева направо)
`ru`	Русский	`zh`	中文
`vi`	Tiếng Việt

Показать ваше приложение'свои слова в нем. SDK устанавливает вашу страницу's lang для вас; Lia.rtl говорит, читается ли язык справа налево, поэтому установите направление самостоятельно:

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);
});

#Звук

Люди могут отключить уведомления вашего приложения из Lia's ⋯ меню, и Lia запоминает это для вашей приложения. Lia.soundOn говорит, хотят ли они ваши звуки, и soundChanged говорит, когда он меняется. Воспроизводить звуки только тогда, когда он'включено.

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

Ваша страница может воспроизводить звук без ожидания первого нажатия. Чтобы смешать его с музыкой, уже воспроизводимой на телефоне, а не останавливать ее, установите navigator.audioSession.type = "ambient" где телефон поддерживает это (Lia'свои игры do).

#Платформа

Lia.platform это ios или android после init(). Lia'фрейм — это телефон'свой веб-просмотр: Safari'на iPhone, Chrome'на Android.

Автоматически переведено. Английский — источник истины. Читать на английском