Эта статья представляет собой документацию по содержанию темы «Weex + Ui» на Weex Conf в 2018 году. слой Некоторый опыт в строительстве.
длинные статьи,Сначала укажите адрес Weex Ui с открытым исходным кодом, каждый может упомянуть PR, и вы также можете выразить свою симпатию через Star.
Why Weex ?
Weex vs H5
Почему мы выбрали Weex в качестве нашей основной технологии кросс-энд разработки? Студенты, которые написали H5, определенно будут впечатлены этим.Просто и эффективно,Обновить как релиз,Один URL может быть адаптирован для нескольких терминаловподожди этихбыстрыйПривлечено, но студенты, которые написали на родном языке, обязательно будут привлечены на родном языке.богатое взаимодействие,опыт работы,Вызываемые собственные возможности,управляемая памятьи другие функции, чтобы сделать наш бизнес более удобным.
Быстрота и опыт хотят иметь и то, и другое одновременно
Но много раз мы будем хотеть поставить H5быстрыйи роднойопытИ то, и другое, Флигги исследовал в этом направлении несколько лет назад.
Включая первоначальную разработку гибрида, предоставляя некоторые нативные через мост Возможность улучшить опыт H5.Например, в H5 мы можем напрямую получать информацию о местоположении приложения, использовать камеру, воспроизводить видео, перемещаться и прыгать и т. д. Существуют также зрелые решения, такие как Cordova, Ionic и Метеор в индустрии.
Существует также система автономной пакеты, которая загружает файлы ресурсов заранее и загружает локальные ресурсы путем маршрутизации перехвата во время доступа, так что наша страница H5 может достигать эффекта мгновенного вывода, динамического обновления и слабой сети доступности. Есть Zcache, Fliggy, Alipay Kyushu Эти зрелые системы.
Примерно через 16 лет кроссплатформенная технология разработки постепенно стала популярной, и нас привлекла новая идея разработки, а именно использование JS для написания Native, использование опыта веб-разработки для создания высокопроизводительных и масштабируемых Native приложений, а также в то же время действительно получить то, что сказано вышебыстрыйиопыт.
Сравнительный анализ бизнеса
Так почему же стоит выбрать Weex? На самом деле, это во многом связано с характеристиками бизнеса Флигги, и в то же время оно может очень хорошо решить эти болевые точки.
летающая свиньяБыстрая бизнес-итерация, он также должен быстро выходить в интернет; в то же время, много разДостопримечательности и слабое использование сети за границей, имея при этом хороший опыт, самым важным из которых являетсяДоступ к нескольким контейнерам, подходит для Fliggy, Hand Tao, Tmall, Alipay, то есть для важного развития бизнеса нам нужен одноклассник iOS и Android для разработки обоих концов, и одноклассник H5 для разработки веб-версии, совместимой с Taobao, Alipay и UC, то есть бизнес-релиз предполагает одновременную разработку нескольких концов, онлайн.
Weex на самом деле очень хорошо решает некоторые из вышеперечисленных проблем, в том числе полноеРодной опыт, в то время как размер ресурса пакетаГораздо меньше, чем H5, в сочетании с богатым интерактивным опытом и производительностью длинных списков, он очень подходит для страниц со списком продуктов и сценариев Double Eleven.Самое главное, что мы действительно сократили разработку 3 человек до 1 человека, а остальные 2 человека могут сделать более значимые вещи имеют значение.
Далее мы можем увидеть дисплей и сравнение данных Weex и бизнеса H5 на следующем дисплее.Записать видео >>>
Это страница со сложной бизнес-логикой, включая фильтрацию, сортировку, выбор календаря, избранное, длинные списки и страница со сложной бизнес-логикой После рефакторинга в Weex мыДоступное время первого экрана снижено на 68%,Размер пакета напрямую уменьшен на 73%, поскольку опыт становится лучше и быстрее, давайтеКоэффициент конверсии страницы фактически увеличился на 14,5%..
Именно поэтому мы выбрали Weex в качестве одной из важных причин для нашей кросс-энд разработки.Далее мы представим технологическую систему weex от Fliggy.
Техническая система Fliggy Weex
Диаграмма архитектуры
Мы можем смотреть вверх с нижнего уровня.Нижний уровень состоит из фреймворка/библиотек/ядра ОС нашего приложения.Мы разработали унифицированный дизайн API вместе с Hand Tao и Tmall на верхнем и нижнем уровнях Weex, включая запросы интерфейса и захоронение данных Ряд общих сервисов, таких как точка, переход по маршруту, статус сети, функция оплаты, настройка панели навигации и т. д. В Weex мы инкапсулировали библиотеку компонентов пользовательского интерфейса Weex, библиотеку бизнес-компонентов, модуль маркетинга здания UPX и сглаживание многоконечных различий.Используйте библиотеку функций, чтобы мы могли развивать наши многочисленные предприятия на нашем верхнем уровне.
Поскольку Weex такой же, как H5 на нашей стороне, он публикуется как страница вместо того, чтобы писать множество подпредставлений в представлении для организации.В то же время не рекомендуется использовать vue-router для управления и т. д. используйте несколько страниц для перехода Опыт передачи будет лучше.
Когда дело доходит до процесса создания и выпуска, мы используем Clam для инициализации, сборки, отладки, предварительного выпуска и выпуска нашего проекта, В то же время мы можем напрямую опубликовать страницу в CND через команду Awpp в онлайн-аспекте. , В то же время мы можем передавать автономные ресурсы через почтовых голубей, Подталкивая его к приложению, студенты-операторы также могут публиковать страницу напрямую с помощью метода построения.
Как разместить страницы Weex на Fliggy, Hand Tao, Alipay?
Тогда вы можете спросить, как страница Weex может быть размещена на Fliggy, Hand Tao, Alipay с нескольких сторон? Здесь есть два пути, первыйРешите, следует ли отображать как Weex или H5 с помощью параметров URL-адреса внешнего интерфейса.
xxxx.html?_wx_tpl=xxxx.js: Спереди — адрес H5 при переходе на более раннюю версию, сзади —_wx_tplПараметр с ним представляет адрес Weex JS, когда контейнер находит URL-адрес с_wx_tplКогда параметр установлен, следующий адрес JS будет загружен и обработан с помощью контейнера Weex.
Существует такжеРешите, следует ли отображать как Weex или H5, возвращая контент с сервера.:
xxxx?wh_weex=true: Спереди может быть адрес JS или адрес H5, за которым следуют фиксированные параметры.wh_weex=true, когда контейнер находит URL сwh_weex=trueКогда запрашивается предыдущий адрес xxxx, если обнаружено, что тип mime (тип содержимого заголовка HTTP) ответаapplication/javascript, затем используйте Weex для рендеринга возвращенного контента, в противном случае используйте WebView для рендеринга в H5.
Бизнес-рынок Fliggy Weex
Некоторые посторонние не ходят слухов о Weex, что ни одна компания не использует Weex, но это выходит за рамки вашего воображения.Выше приведен список связанных страниц weex на нашей стороне до декабря 2017 г. Вы можете найти его на Fliggy, Hand Эти страницы найдены в Taobao и Alipay, которые размещены на нескольких терминалах одновременно.
Какой бизнес подходит для использования Weex?
Включая множество маркетинговых предприятий, домашних страниц, каналов, списков поиска, процессов пересылки, простых деталей и многофункциональных интерактивных страниц, которые очень подходят для разработки Weex.В то же время, на нашей стороне также есть соответствующий принцип, включая:Медийные проекты предпочитают использовать Weex,Рефакторинг/новые проекты предпочитают использовать Weex, глубокая вертикальная категория попробуйте использовать Weex.
Weex не подходит для сложных сцен?
Вы можете увидеть следующие сценарииВидео шоу >>>
Вы можете подумать, что Weex не подходит для сложных сцен, но это не обязательно.Существует множество способов поддержки сложных сцен, в том числеДвойной 11Сверхдлинная прокрутка списка, более 30 экранов данных, быстрая прокрутка очень плавная.
В то же время, включая страницу списка международных авиабилетов с чрезвычайно сложной логикой и несколькими компонентами, Weex также может быть компетентным; включая богатый интерактивный сценарий использования на рис. 3, эффект шелковистого перетаскивания липкой руки, быстрое скольжение, динамическое скрытие голова и другие функции - это все, что можно сделать.
Фактически, благодаря накоплению передового опыта использования Weex во многих бизнес-сценариях с нашей стороны, есть много вещей, которые могут быть депонированы и использованы другими последующими предприятиями посредством инкапсуляции, чтобы последующие предприятия могли достичь быстрого производства, что является также наше учреждение. Большая причина для системы компонентов пользовательского интерфейса Weex.
Разработка пользовательского интерфейса Weex и открытый исходный код
Зачем создавать систему библиотек компонентов Weex Ui?
- В начале знакомства с Weex, через Weex Ui, пусть учащиеся, которые не знакомились с Weex, хорошо понимают его написание.Ссылка
- Уточните общедоступные компоненты в бизнесе для удобства прямой ссылки,Повысить эффективность разработки каждого
- Деловая норма, визуальная норма,Лучшие практикисвоевременная синхронизация
- Включите Weex в свой бизнесТрудноизлечимые заболеванияБлагодаря инкапсуляции компонентов внешнему миру доступна только простая логика.
Краткий обзор пользовательского интерфейса Weex
После более чем года строительства, шаг за шагом мыWeex UiОптимизация, сортировка и, наконец, открытый исходный код в 20170930 году, вы можете увидеть, как появился Weex Ui на следующем рисунке.
В настоящее время библиотека компонентов Weex Ui включает в себя зрелый компонент 31 в категориях 7. В то же время он не является открытым исходным кодом для всех, но открыт для всех после того, как он использовался внутри более чем в год, а затем стабилизировался. Любой браузер для сканирования кода для предварительного просмотра
В то же время документация библиотеки с открытым исходным кодом на самом деле является важным фактором, позволяющим пользователям быстро приступить к последующей разработке. Включая описание компонента, правила использования, демонстрационный дисплей, подробное использование API, документацию по обновлению и т. д., вы можете использовать его быстро.
Подходит ли Weex Ui только для системы электронной коммерции?
Недавно наша команда пользователей Weex Ui сделала это один разОпросник, результаты нас удивили, используется не только электронная коммерция, но и многие другие системы, включая инструменты, корпоративные приложения, развлечения, собственные средства массовой информации и новости.
Создайте свою страницу Weex с помощью компонентов
Во многих случаях создание инфраструктуры на самом деле предназначено для ускорения развития бизнеса.Например, следующая страница Fliggy Line создается с помощью нашей библиотеки компонентов Weex Ui.
Однако базовый фундамент может решить только проблему общих компонентов, на самом деле он включает в себя и бизнес-компоненты, то есть приведенную выше картинку.your-itemКомпоненты, то есть компонентизация бизнеса Weex, о которой мы поговорим ниже
Что еще можно сделать на уровне пользовательского интерфейса Weex помимо базовой библиотеки?
Компонентизация бизнеса Weex
Библиотека бизнес-компонентов — это скорее «контракт» между фронтендом, бэкендом и дизайнерами.Благодаря определенным спецификациям бизнес-компоненты можно использовать повторно. То есть, напрямую внедряя этот компонент в код Weex и напрямую вставляя исходные данные, возвращаемые бэкендом, можно сгенерировать карточку товара, разработанную дизайнером, и, наконец,Возможность размещения любого бизнес-модуля Weex в любом месте на любой странице Weex..
Так что должно быть сделано?
Можно ли автоматизировать тестирование Weex?
Ответ да, ранее проходилmacacajsПлатформа тестирования сочетается с Weex, настраивая серию жестов и событий и, наконец, используя json для указания порядка выполнения, это можно сделать, и можно увидеть детали.Адрес видео>>>
1. Установите приложение 2. Автоматически открывать нативную страницу 3, логин, автоматический ввод 4. Автоматически тестировать домашнюю страницу отпуска Fliggy, включая такие операции, как щелчки, прыжки, скольжение и потягивание вниз для обновления. 5. Автоматически тестировать специальную строку Fliggy, включая операции смахивания влево и вправо. 6. Автоматическое тестирование пользовательского интерфейса Weex, включая открытие компонентов и логику взаимодействия при нажатии. 7. Автоматически запускайте скриншоты каждой страницы и отправляйте тестовую ситуацию по электронной почте тестовой группе.
Оптимизация доступности Weex
Weex на самом деле поддерживает специальные возможности, а это означает, что слепые люди могут найти нужную им информацию в кратчайшие сроки и самым быстрым способом.
В то же время, когда незрячие люди посещают нашу страницу Weex, пусть они будут заметными, операбельными, понятными для Weex, и страница также будет надежной. Например этоДемо >>>:
Доступность очень просто реализовать в Weex, например, следующая реализация:
Оптимизация производительности Fliggy Weex Double Eleven
Ежегодный Double Eleven также является полем битвы нашего Weex. Почти все страницы мероприятий реализованы Weex. Как сделать так, чтобы пользователи могли беспрепятственно просматривать наши страницы? В этот период мы также поместили большой предыдущий опыт, в том числе навыки оптимизации, на страницу места проведения Double Eleven, в том числе разобрались с некоторым опытом.
вернуться к открытому исходному коду
На самом деле, Weex можно использовать во многих, многих местах, включая различные сценарии приложений, что также является серьезной причиной для нас открыть исходный код Weex Ui, чтобы предоставить вам больше информации о достижимых функциях Weex и рекомендации по внедрению передового опыта.
В то же время внешним разработчикам также срочно нужна зрелая библиотека компонентов для повышения эффективности разработки.
С 20170930 года мы работаем над разработкой Weex Ui с открытым исходным кодом, включая совместную разработку weex-toolkit для лучшей поддержки Weex Ui, дополняя недостающие компоненты + улучшая существующие компоненты, продолжая расширять границы + библиотека пользовательского интерфейса решения для каноэ, представляя более богатые интерактивный опыт + оптимизация доступности компонентов, простота использования + подробные документы на китайском и английском языках и т. д.
На самом деле, я хочу, чтобы все вместе участвовали и совместно продвигали развитие нашего Weex.
Говоря о совместном содействии, что вы можете сделать? На самом деле, вы можете делать многое, многое
Резюме вечернего круглого стола о направлении компонентов Weex
1. На что следует обратить внимание при инкапсуляции нативных компонентов Weex?
- Универсальность, только компоненты, которые используются несколькими службами одновременно и имеют характеристики отсоединения, такие как Video/TabBar/TitleBar/ImageUpload эти зрелые компоненты в Native
- Стабильность, нативные компоненты не так настраиваемые, как компоненты на верхнем уровне weex, поэтому следует отметить, что нативные компоненты должны быть свободны от ошибок, чтобы предотвратить хлопотный ремонт и обновления Частые обновления, в результате чего необходимо адаптироваться ко многим версиям
- Атомарность, компоненту не рекомендуется делать много вещей одновременно, это должна быть одна функция, а потом получить больше функций путем сопоставления
2. Некоторый опыт разработки и применения компонентов weex?
- Согласно принципу 811, по умолчанию 80% функций не должны требовать от пользователей настройки многих параметров.В 10% мест пользователи могут настраивать некоторые параметры для достижения своих целей.10% редких случаев можно временно игнорировать.Это разработка может занять много времени, поэтому можно подождать, пока бизнесу понадобится его использовать, а затем обновить
- Принцип единого закрытия, чтобы последующие компоненты не превратились в солянку, последующие итерации визуального взаимодействия и добавления новых функций должны учитывать универсальность.Здесь один человек должен быть единым, чтобы закрывать, развивать и поддерживать этот компонент, который позволяет избежать многих «бизнес-характеристик».
- Оптимизация производительности, компоненты Weex должны обеспечивать его производительность больше, чем написание страниц.
- Механизм доверия: Во многих случаях основная причина, по которой другие используют ваши компоненты, заключается в том, что они считают, что ваши компоненты не имеют проблем, стабильны и будут часто поддерживаться в будущем.
3. Как вы думаете, чего еще не хватает компоненту пользовательского интерфейса Weex?
- Есть несколько сценариев, которые можно использовать вместе.В настоящее время документация по использованию одного компонента была подробно объяснена, но для некоторых случаев использования нескольких компонентов или разработки на уровне страницы отсутствуют соответствующие случаи, необходимо постепенно дополняться на более позднем этапе.weex-ui-demo
- Необходимо учитывать гибкость конфигурации темы. В настоящее время цвет темы изменяется конфигурацией параметра. На самом деле, его можно изменить с помощью единой конфигурации внешнего параметра.
4. Как будет выглядеть кросс-энд разработка в будущем?
- Метод компоновки Native должен учиться на гибкости разработки H5 и постепенно использовать автоматическую компоновку для ее реализации.В то же время вводятся гибкие идеи разработки, чтобы избежать абсолютных расчетов.
- Привязка данных будет становиться все более и более удобной, например, как в идее MVVM, после изменения данных представление модифицируется сразу, а не вручную
More
Вы можете использовать DingTalk для сканирования следующего QR-кода для обсуждения и общения:
- На этот раз обмен файлами PDF:«Векс + пользовательский интерфейс»
- Адрес официального сайта:alibaba.github.io/weex-ui
- Адрес на гитхабе:GitHub.com/Alibaba/Я, о, о…
Please feel free to use and contribute to the development.