Суперсила библиотеки мобильных компонентов OKee

внешний интерфейс внешний фреймворк
Суперсила библиотеки мобильных компонентов OKee

Адрес сайта с открытым исходным кодом OKee Mobile:о, о, о. Ocean Engine.com/Mobile/v UE/…

Гитхаб:GitHub.com/океан-двигатель…

предисловие

Что такое ОКи? За словом «ОК» стоит «Все правильно», и это именно то, чего оно пытается достичь — придерживаться правильных действий и делать их лучше, будучи достаточно простыми для запоминания.

Лозунг OKee Design: «Делайте больше OKee, делайте все лучше», чтобы достичь максимального делового опыта и всегда придерживаться стремления к совершенству, разнообразию и совместимости, открытости и беспроигрышным концепциям.

Сегодня я хочу представить вам первую библиотеку мобильных компонентов с открытым исходным кодом экосистемы OKeeDesign.OKee Mobile.

Каждый может использовать и вносить предложения.

Некоторые люди спросят, на рынке так много библиотек мобильных компонентов, зачем писать еще одну библиотеку мобильных компонентов? Позвольте мне подробно остановиться ниже.

Когда мы получим бизнес-требование и установим стек технологий, мы выберем одну из множества библиотек компонентов, которая будет нам служить. Много раз, изучив множество библиотек компонентов, мы все еще сомневались, потому что ни одна из библиотек компонентов не может соответствовать потребностям нашего бизнеса. Если мы с неохотой выберем неподходящее «он», мы проделаем много бесполезной работы в следующей разработке, такой как переопределение стилей или введение второй библиотеки компонентов.

Почему возникает такая проблема?

Потому что разные бизнесы и даже разные проекты имеют уникальные стили взаимодействия и стили пользовательского интерфейса. И все библиотеки компонентов являются производными от бизнеса.Если позиционирование библиотеки компонентов не соответствует вашему бизнесу, всегда будут различные проблемы.

Позиционирование главного героя OKee Mobile на этот раз заключается в том, что он может не только обслуживать бизнес ToC, но также охватывать общие сценарии ToB и активно участвовать в сценариях отображения данных. Основываясь на полном наборе концепций дизайна, библиотека компонентов разбивает компоненты на маркеры дизайна, что позволяет элегантно настраивать ваши продукты.

На данном этапе OKee Mobile предоставляет 36 компонентов, которые охватили большое количество бизнесов и продолжают развиваться!

Давайте кратко, в чем разница?

Опыт снятия скинов

  1. Мы извлекли полный набор глобальных переменных less для управления общим стилем компонента. Включая такие свойства, как цвет, закругленные углы, шрифт, анимация и т. д. Перехваченная часть стиля показана следующим образом:
@primary-color: @blue;
@primary-color-1: ~`colorPalette('@{primary-color}', 7) `; 
@primary-color-2: ~`colorPalette('@{primary-color}', 6) `; 
@primary-color-3: ~`colorPalette('@{primary-color}', 5) `;
@primary-color-4: ~`colorPalette('@{primary-color}', 3) `; 
@primary-color-5: ~`colorPalette('@{primary-color}', 1) `; 

@z-index-1: 1;
@z-index-2: 3;
@z-index-3: 5;
@z-index-4: 7;
@z-index-5: 10;

@border-radius-1: 2px;
@border-radius-2: 4px;
@border-radius-3: 8px;
@border-radius-4: 12px;
@border-radius-5: 16px;

@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
  1. Элементы дизайна одного компонента извлекаются, а возможности настройки одного компонента расширяются. Ниже показаны элементы дизайна кнопки:

Lark20210721-155533.gif

1. Скиннинг во время компиляции

Чтобы снизить затраты на общение между дизайнерами и разработчиками и сократить вторичную разработку компонентов.

Мы разрабатываем платформу конфигурации темы, которая позволяет дизайнерам самостоятельно настраивать тему библиотеки компонентов и экспортировать набор скинов библиотеки компонентов, которые соответствуют стилю продукта, до стадии разработки. Эта платформа будет открыта в будущем!

И основная функция этой конфигурационной платформы уже реализована.в документевстроенный.

Отрегулируйте соответствующее значение цвета в интерфейсе конфигурации, например, отрегулируйте основной цвет, и вы сможете просмотреть эффект отображения в реальном времени справа.

После изменения значения цвета будут скорректированы компоненты, использующие это значение цвета.

Наконец, нажмите «Экспорт», чтобы экспортировать настроенные переменные какvar.jsonи перезапишите его в меньшем загрузчике проекта, чтобы завершить настройку темы.

const vars = require('./config/theme/var.json');

module.exports = {
  rules: [
    {
      test: /.less$/,
      use: [
        {
          loader: 'less-loader',
          options: {
            javascriptEnabled: true,
            modifyVars: vars,
          },
        },
      ],
    },
  ],
};

2. Скиннинг во время выполнения

Мы используем стратегию преобразования меньшего количества переменных в переменные CSS для достижения онлайн-скининга.

То есть во время разработки нам не нужно писать переменные css вручную, нам нужно только предоставить файл конфигурации, когда файл упакован, указав, какие меньше переменных должны быть скомпилированы в переменные css. Наш плагин для компиляции автоматически соберет меньше переменных, которые от них зависят, и заменит их соответствующими переменными css. Конкретный процесс выглядит следующим образом:

  • На этапе компиляции less объявите помеченную переменную less как переменную css и зависните в:rootпод псевдоклассом.
  • Преобразуйте значения свойств, которые используют эти переменные, в соответствующие переменные css.
  • При снятии скина измените:rootЗначение переменной css ниже можно изменить во время выполнения, чтобы изменить глобальный стиль, а также особый стиль компонента.

Стоит отметить, что количество css-переменных нужно ограничивать, иначе будет заметное влияние на производительность страницы.

основная компетенция

Упомянутый выше опыт снятия скинов может обеспечить отличную адаптацию к бизнесу.

Однако недостаточно просто иметь возможность адаптации, нам также необходимо иметь полные базовые компоненты и расширять компоненты до определенной степени на основе бизнес-сценариев, улучшать возможности взаимодействия компонентов и постоянно совершенствовать компоненты до конечного результата. улучшайте продукт Используйте опыт.

Ниже приводится краткое введение в компонент, который является основным компонентом продуктов данных, но часто игнорируется на стороне мобильных устройств. Это таблица.

Говоря об этом, люди часто упоминают, что мобильный экран слишком мал, и данные, изначально предназначенные для отображения в таблице, могут быть преобразованы только в другие формы для отображения. Я допускаю, что в сценарии ToC презентационная информация может быть объединена в легковесные компоненты, такие как списки.

Однако в сценарии ToB реальной потребностью часто является отображение большого количества данных, которые не так агрегированы и имеют большое количество столбцов. Эта Таблица, несомненно, имеет свою стадию, и суть проблемы заключается в том, достаточно ли хорошо взаимодействие.

Ниже взгляните на экран таблицы OKee Mobile.

Lark20210721-160204.gif

Суммировать

Система OKee Design охватывает библиотеки ПК и мобильных компонентов, библиотеки диаграмм, библиотеки значков, библиотеки иллюстраций и платформы конфигурации тем для всех основных технологических стеков.В будущем вас ждет еще больше сюрпризов, так что следите за обновлениями!

Я закончил говорить с вами о тех моментах, о которых хочу поговорить, теперь я буду вставлять библиотеку компонентов.Ссылка на GitHub, каждый может принять участие в открытом исходном коде, будь то совместная разработка или задавание вопросов, вы можетеissueСвяжитесь с нами, спасибо за чтение.

В то же время вы также можете оставить сообщение, и мы напишем последующие статьи в ответ на ваши вопросы.