Поддержка платформ
Платформы первого выпуска
| Платформа | Статус | Описание |
|---|---|---|
| H5 | ✅ Полная | Все компоненты с полным функционалом |
| WeChat Mini Program | ✅ Полная (частичная деградация) | Настольные возможности компонентов-слоёв деградируют, см. таблицу ниже |
| Alipay / Douyin Mini Program | 🚫 Не поддерживается в первом выпуске | Будут добавлены позже, после проверки каждой платформы через условную компиляцию |
| App (nvue) | 🚫 Не делается | Система рендеринга nvue отличается от webview, не входит в дорожную карту |
Матрица возможностей компонентов
«Деградация» означает, что неподдерживаемые платформой возможности удаляются на этапе компиляции (в сборке Mini Program нет мёртвого кода), а не ошибку во время выполнения.
| Компонент | H5 | WeChat Mini Program | Стратегия деградации / описание |
|---|---|---|---|
| config-provider | Полная | Полная | provide/inject + инлайновые CSS-переменные работают на всех платформах; тёмная тема переключается классом page.dark (document отсутствует) |
| button / tag | Полная | Полная | — |
| icon | Полная | Полная | Шрифт iconfont (на web-стороне инлайн SVG, см. ниже «Отличия рендеринга icon») |
| input | Полная | Полная | Стиль плейсхолдера через prop placeholder-style (MP не поддерживает ::placeholder) |
| checkbox / radio / switch | Полная | Полная | view собственной отрисовки (без нативных компонентов, единый визуальный язык lh) |
| form / form-item | Полная | Полная | Логика валидации — чистые функции core, нулевая зависимость от платформы |
| select | Полная | Деградация | root-portal + измерение за два кадра; клавиатурная навигация только на H5, в MP — клик + scroll-view |
| dialog | Полная | Деградация | root-portal; focus-trap / lockScroll только на H5, в MP перехват кликов маской как fallback |
| tooltip | Полная | Деградация | Измерение за два кадра; без hover, в MP срабатывает по клику / касанию |
| message / loading | Полная | Полная | Паттерн точки монтирования (в Mini Program нет document, нельзя создавать DOM из JS) |
Конкретные ограничения WeChat Mini Program и их замены
| Ограничение | Замена |
|---|---|
Не поддерживается тег <svg> | Иконки на этапе сборки преобразуются в шрифт iconfont (base64 встранивается), рендеринг через <text class="lh-iconfont"> |
Не поддерживается ::placeholder | Props placeholder-style / placeholder-class компонента input |
Не поддерживаются * universal / селекторы атрибутов / :not() / :nth-* | Санитизация при сборке: универсальный селектор * заменяется на flex + gap, остальные — на эквивалентные имена классов |
Нет document / document.body | Слои — через root-portal; императивные сервисы — через паттерн точки монтирования |
| Нет семантики фокуса с клавиатуры | focus-trap / клавиатурная навигация не вызываются под сторожем LH_IS_H5; aria-атрибуты всё равно выводятся для скринридеров |
transitionend ненадёжен | Анимации появления и скрытия — на CSS transition + setTimeout с выровненной длительностью |
На этапе onLoad компоненты ещё не созданы | Все вызовы ref / измерений должны выполняться после onReady |
Версия базовой библиотеки WeChat
- root-portal требует базовую библиотеку ≥ 2.25.2 (монтирование слоёв select / dialog / tooltip зависит от неё).
- На более старых версиях автоматически применяется fallback с фиксированным позиционированием внутри страницы (проверка через
getLhLibVersion()); слой остаётся, просто его z-index ограничен потоком страницы.
root-portal и платформы вроде DingTalk
Внутри lh-root-portal используется условная компиляция из трёх веток: на H5 — <teleport to="body">, на WeChat — <root-portal>, а на платформах без поддержки root-portal (DingTalk и подобных) — фиксированное позиционирование внутри страницы. Это внутренний компонент, пользователю разбираться не нужно; он описан здесь лишь для того, чтобы объяснить, откуда берутся платформенные отличия в поведении слоёв.