предисловие
В мгновение ока Taro UI был выпущен на полгода.Спасибо за вашу поддержку, давайте собирать урожайGitHub1400+ звезд. В течение этого периода мы продолжали улучшать функции и возможности библиотеки компонентов, добавляя множество новых компонентов и виджетов, включая, помимо прочего:
- Добавлены одиннадцать новых компонентов, таких как календарь, выбор индекса, выделение площади и выделение изображения и выбор изображения
- Адаптация к апплету Alipay и аплету Baidu
- Добавлена функция пользовательской темы
- Добавлен генератор тем, чтобы помочь разработчикам лучше использовать пользовательские функции темы.
- Добавлен помощник по задачам, чтобы помочь разработчикам заполнять задачи более стандартно.
новые компоненты
После выпуска версии 1.0 мы последовательно добавили следующие одиннадцать компонентов:
- Компоненты просмотра: подсказки страниц, разделитель, обратный отсчет, занавес, пошаговая панель
- Отзыв о действиях: глобальный информационный компонент
- Формы: селектор изображений, селектор регионов, селектор индексов, компонент календаря, панель поиска.
Среди них самым популярным компонентом в сообществе является некалендарный компонент. Из-за высокой сложности компонента календаря его трудно адаптировать к среде с несколькими терминалами.Глядя на небольшие программные библиотеки компонентов пользовательского интерфейса на рынке, очень немногие включают компонент календаря. Тем не менее, Big Fish из нашей команды в одиночку взял на себя тяжелую работу и почти идеально реализовал этот компонент, и Big Fish заслуживает аплодисментов.
Предварительный просмотр функции компонента календаря:
Адаптация к апплету Alipay и аплету Baidu
Мы столкнулись с большим количеством трудностей при адаптации версии 1.0 к апплету WeChat. Например:
-
Пользовательские компоненты апплета WeChat используют Shadow DOM для рендеринга, что вызывает следующие проблемы:
- Смежные селекторы не могут использоваться между компонентами.Например, требование добавления границы между компонентами может контролироваться только разработчиками путем добавления свойств.
- Невозможно настроить компоненты гибкого макета и, в конечном итоге, предоставить стили только для разработчиков.
-
Компонент Component соответствует стилю файла wxss, который действителен только для узлов в компоненте wxml. После непрерывных исследований я обнаружил, что атрибут addGlobalClass должен активировать опцию addGlobalClass в пользовательском компоненте, чтобы на пользовательский компонент могли влиять все определения стилей в app.wxss или wxss страницы. .
-
Ограничения на использование нативных компонентов. Поскольку собственный компонент отделен от процесса рендеринга WebView, уровень собственного компонента является самым высоким, поэтому независимо от того, какой установлен z-index, другие компоненты на странице не могут перекрыть собственный компонент. В результате такие компоненты, как модальные окна, не могут блокировать собственные компоненты, такие как ввод и текстовое поле, что приводит к эффекту проникновения. Хорошей новостью является то, что официальная команда WeChat решила эту проблему и представила режим рендеринга на одном уровне для нативных компонентов мини-программ. Благодаря рендерингу одного и того же слоя собственные компоненты мини-программ могут быть на том же уровне, что и другие встроенные компоненты, и нет никаких особых ограничений на использование.смотрите подробности.
-
Апплеты не поддерживаются requestAnimationFrame, не могут добиться хорошей js-анимации.
После преодоления упомянутых выше трудностей апплета WeChat большая часть работы по адаптации апплета Alipay и апплета Baidu заключается в устранении различий в стилях и некоторых API. Благодаря хорошей поддержке Taro работа по адаптации Taro UI временно подошла к концу.
Добавлена функция пользовательской темы
Когда Taro UI 1.0 выпущен, существует только один набор цветов темы по умолчанию.Чтобы удовлетворить разнообразные визуальные потребности бизнеса и брендов, библиотека пользовательского интерфейса поддерживает определенную степень настройки стиля.
Стили компонентов пользовательского интерфейса Taro написаны с использованием SCSS. Если SCSS также используется в вашем проекте, вы можете напрямую изменить переменные стиля пользовательского интерфейса Taro в проекте.
Создайте новый файл стиля темы (например, custom-variables.scss) и переопределите его.Переменная темы по умолчанию:
/* 改变主题变量，具体变量名可查看 taro-ui/dist/style/variables/default.scss 文件 */
$color-brand: #6190E8;
/* 引入 Taro UI 默认样式 */
@import "~taro-ui/dist/style/index.scss";
Затем импортируйте вышеуказанные файлы стилей в файл ввода проекта (нет необходимости повторно импортировать стили компонентов по умолчанию).
В настоящее время мы дополнительно настроили тему JD.com и цвет темы 7Fresh, которые можно просмотреть, отсканировав QR-код ниже.
Jingdong тема:
7Свежая тема:
Добавлен генератор тем
Чтобы разработчики могли лучше использовать функцию пользовательской темы, мы также добавили генератор тем. Разработчики могут использовать этот инструмент для простой настройки тем пользовательского интерфейса.
Адрес конструктора тем: Дочь Ви — .GitHub.IO/taro-UI-он и…
Предварительный просмотр эффекта:
Добавлен помощник по проблемам
Несмотря на то, что мы настроили Issue Template, все еще есть разработчики, которые не заполнили Issue согласно спецификации. Когда мы устраняем неполадки, нам часто приходится снова запрашивать информацию о номере версии, воспроизводить код и т. д., что не только тратит нашу энергию на поддержку проекта, но и снижает эффективность обработки проблем. Поэтому мы обращаемся к практикам команд Ant и iView и создаем страницу помощника по задачам, чтобы помочь разработчикам заполнять задачи более стандартизированным способом.
Адрес Taro UI Issue Helper: Дочь V. GitHub.IO/taro-UI-is…
Кроме того, мы обнаружили, что повторное создание страниц помощника по задачам является пустой тратой труда, поэтому мы инкапсулировали помощника по задачам в инструмент командной строки, который разработчики могут настроить с помощью простой настройки.config.js, Выдержки заказаissue-helper buildНужную страницу можно сгенерировать.
Адрес склада инструментов Issue Helper: GitHub.com/т.е. каждый раз, когда я/на высоте…
План на будущее
- Адаптация к аплету ByteDance
- Интернационализировать i18n
Спасибо
Благодарим вас за использование и отзывы о пользовательском интерфейсе Taro. Мы будем стремиться превратить пользовательский интерфейс Taro в высококачественную библиотеку компонентов, продолжать обогащать функции и возможности компонентов и идти в ногу с Taro, чтобы адаптироваться к большему количеству платформ.
Наконец, добро пожаловать в нашу библиотеку компонентов: