Из-за требований эффективности и динамичности разработки среда разработки беспроводной стороны также была обновлена: от Hybrid, Structured Native View, React Native, Weex и теперь до Flutter, которому уделяется много внимания. Какой фреймворк подходит для вашей команды? Не только технические занятия, но и практические потребности бизнеса. Недавно Youzan Mobile выбрала weex в качестве платформы для разработки беспроводных сетей и построила процесс с обратной связью, включающий разработку, отладку, сборку, выпуск и данные. Эта статья поделится этим.
1. Что такое уекс
Weex — это набор кроссплатформенных решений Alibaba с открытым исходным кодом для создания высокопроизводительных и масштабируемых нативных приложений. Сначала суммируем характеристики weex:
-
В настоящее время поддерживается разработка страницыRaxа такжеVue
Weex поддерживает не только Vue и Rax, вы также можете интегрировать свой любимый интерфейсный фреймворк в Weex, есть документРасширенный интерфейсный фреймворкКак это сделать описано, но процесс все равно очень сложный и хитрый, нужно знать много низкоуровневых подробностей о связи между js-native и нативным движком рендеринга.
-
Напишите один раз, запустите на трех терминалах (Android, iOS, интерфейс)
Предпосылка заключается в том, что weex sdk интегрирован, кроме того, визуальная производительность не может быть полностью одинаковой, а некоторые будут иметь некоторые различия, которые необходимо адаптировать. Поэтому при написании страницы weex, если она поддерживает три терминала, вам необходимо выполнить самотестирование на всех трех терминалах.
-
Пользовательский интерфейс рисуется с помощью собственных компонентов, логика JavaScript выполняется в движке JS, и они взаимодействуют через JavaScriptCore.
Все компоненты, используемые в weex, должны быть зарегистрированы на нативной стороне, чтобы их можно было использовать в weex.При запуске происходит их поиск по карте, записанной при регистрации. weex sdk имеет встроенную регистрацию некоторых основных компонентов, включая список, текст, ввод и т. д. WXJSCoreBridge инкапсулирует JavaScriptCore для реализации связи между нативным и js.
-
Встроенная поддержка расширений
Вы можете инкапсулировать собственные компоненты пользовательского интерфейса в компоненты, а код собственной логики — в модули. Так что его можно использовать в weex. Нативные компоненты пользовательского интерфейса здесь включают модальное окно, веб-просмотр, изображение и т. д. Код собственной логики здесь включает хранилище, сеть и т. д.
-
Каждая страница weex будет упакована в js-файл, а weex sdk отобразит js-файл в виде.Weex упакован через webpack, и каждая страница упакована в отдельный файл js.Weex sdk проанализирует js, отобразит часть пользовательского интерфейса в представлении, а затем привяжет события представления к коду js.
2. Зачем использовать weex для разработки беспроводных сетей
1. Вопросы эффективности
1) Человеческие затраты на разработку
Если не учитывать веб-сторону, для страницы потребовались бы Android и iOS.2Личное развитие; нужно только после использования weex1страница разработки.
2) Скорость компиляции разработки
Поскольку проект постепенно становится огромным, Android необходимо скомпилировать проект2-3 минуты, машина нехорошая тоже нужна10 минут, iOS может быть немного быстрее, также требуется1-2 минуты. После использования weex интерфейс изменен, просто нужнодесять секунд.
3) Эффективность испытаний
После тестирования обнаруживаются и исправляются ошибки, при тестировании всегда требуется повторная загрузка пакета для установки, после использования weex ошибки, не связанные с родными, могут быть проверены, пока тест перезапускает приложение.
2. Динамический
Страница weex, наконец, упакована в виде файла js.Поскольку JavaScript может быть динамически доставлен, он может быть динамическим, исправленным или даже развернутым, полностью заменяя или добавляя страницы.
3. Зрелость
В Alibaba Double Eleven 2016 года охват Weex на площадках Alibaba Double Eleven был близок к 99%, а количество страниц приближалось к 2000, охватывая почти все площадки Alibaba, включая основную площадку, филиалы, филиалы и места массового скопления людей. .Двойной 11 концертный бизнес. Второй показатель открытия главной площадки Double Eleven от Alibaba составил 97%, а количество страниц всех площадок достигло 93%. 15 декабря 2016 года Alibaba объявила, что передаст мобильный проект с открытым исходным кодом Weex в фонд Apache Foundation для инкубации. В 2017 году рост weex в бизнесе Alibaba выглядит следующим образом, согласно WeexConf 2018.
4. Стоимость доступа
После практики разработка мобильного терминала может начать использовать weex для развития бизнеса в течение недели.
3. Как использовать weex для беспроводной разработки
Weex на самом деле представляет собой набор решений. Многие вещи в каждом процессе должны быть построены нами самими. Создайте это так, чтобы небольшие партнеры могли начать использовать weex с меньшими затратами, и встроить его в существующую систему. В связи с этим мы сделали следующие аспекты в настоящее время, и предстоит еще долгий путь.
1. Инструмент разработки zweex-toolkit
Это вспомогательный инструмент, основанный на официальном наборе инструментов weex от weex, используемый для создания новых проектов weex, в настоящее время поддерживает только vue.
С увеличением страниц и усложнением бизнеса проект будет постепенно становиться огромным, а если все страницы запущены каждый раз он работает медленно. Чтобы решить эту проблему, когда шаблон проекта, созданный с помощью zweex-toolkit, поддерживает запуск, он поддерживает запуск только страниц в указанном каталоге, просто добавьте параметры после запуска npm, например:
npm run start hi,helloworld
Это означает, что запускаются только страницы в каталоге hi и helloworld. Дополнительно мы поддерживаем:
- добавить страницу
zweex page - включить отладку
zweex debug
2. Внедрение ZanWeex SDK
Что делает официальный weex sdk, так это вводит файл js и возвращает представление. Принимая во внимание потребности маршрутизации и персонализации каждого приложения, ZanWeex SDK не выполняет другую работу и по-прежнему возвращает представление, и бизнес-стороны могут добавлять представление в то место, которое они хотят отображать, в соответствии со своими потребностями. Основные функции ZanWeex SDK следующие:
1)Поддерживает конфигурацию дистрибутива, поддерживает динамизацию и может выполнить замену всей страницы
Упакованный результат страницы weex представляет собой файл js, поэтому его можно распространять и обновлять динамически, затем необходима конфигурация, чтобы связать взаимосвязь между маршрутизацией страницы и файлом js, поэтому мы разработали такую структуру данных:
h5: адрес маршрутизации страницы, вы можете напрямую использовать адрес h5, сгенерированный платформой публикации.
js: адрес упакованного файла js
версия: минимальная поддерживаемая версия приложения, потому что, если новой странице нужны собственные расширения, необходимо выпустить новую версию для поддержки.
md5: Чтобы проверить целостность, мы добавляем md5 каждого файла js в конфигурацию.
2)Поддерживать независимую настройку нескольких модулей, не влияя друг на другаВ приложении будет несколько модулей, и каждый модуль может отвечать за независимую команду, поэтому, чтобы уменьшить связь, мы настроим независимую конфигурацию, каждый модуль может независимо управлять своей собственной конфигурацией, получать доступ к weex независимо и не зависит от хост-приложения.
3)Предварительная загрузка шаблонов страниц, поддержка кэширования шаблонов страниц и кэширования конфигурации
- Если кеша нет, а шаблон страницы каждый раз подтягивается с сервера, открыть за секунды невозможно, что мало чем отличается от страницы H5, которая не кешируется. Наш SDK предварительно загрузит шаблон страницы локально, а открытая страница будет кэширована в памяти. Таким образом, время рендеринга становится ближе к собственному времени рендеринга.
4)Поддержка горячей перезагрузки во время разработки, интерфейс, аналогичный интерфейсу разработки.
- Если горячей перезагрузки нет, то каждый раз при модификации страницы приходится выходить со страницы и заходить заново. Для сохранения этой операции необходима горячая перезагрузка.
- При локальной разработке в проекте weex запускаем вебсокет через webpack-dev-server, а zan weex sdk открывает страницу weex и устанавливает с ней соединение. webpack-dev-server отправляет статус компиляции проекта в ZanWeex SDK, и когда он получает инструкцию о завершении рендеринга, он повторно рендерит страницу, чтобы достичь цели горячей перезагрузки.
5)Поддержка адаптации страницы, предоставление переменных средыZanWeex SDK предоставит следующие четыре переменные, которые будут использоваться страницами weex для облегчения настройки страницы.
- Высота контейнера: weex.config.yzenv.viewHeight.
- Ширина контейнера: weex.config.yzenv.viewWidth
- Высота строки состояния: weex.config.yzenv.statusBarHeight.
- Высота нижней панели (для iPhone X, 0 для других): weex.config.yzenv.bottomHeight
6)Просмотр журнала фазы разработкиНа этапе разработки журналы, выводимые в исходном коде weex sdk, журналы, выводимые console.log в js, и отчеты об ошибках работы js можно просматривать только через XCode и Android Studio. Это очень неудобно для разработчика, который знает только один конец. Итак, мы сделали запись, которая будет отображаться, когда мы откроем страницу weex, нажмите, чтобы просмотреть журнал вывода.
7)Передача параметровПрямая передача параметров: переход со страницы A на страницу B, передача параметров — это сцена, с которой обязательно придется столкнуться в процессе разработки. Параметры интерфейса отрисовки renderByH5, предоставляемые пакетом SDK, включают URL-адрес, параметры и данные. Когда бизнес-сторона отображает, за параметрами может следовать URL-адрес или передаваться через параметры и данные. Разные способы имеют разные способы их получения:
-
Параметры после URL-адреса будут переданы в данных, а параметры, определенные непосредственно в данных на странице weex, будут назначены автоматически;
-
Параметры params можно передать на странице weex.weex.config.nameчтобы получить;
-
Параметр, передаваемый по данным, получается так же, как и первый.
-
Обратный перенос параметров: при возврате со страницы B на страницу A также распространен сценарий возврата с параметрами. SDK предоставляет унифицированный класс хранения ZParamStorage для временного хранения параметров. Когда страница Б хочет вернуться, она сначала сохраняет данные в области хранения, а при отображении страницы А получает их из области хранения, а затем очищает область хранения.
-
Передача параметров без перехода: BroadcastChannel может использоваться для передачи параметров между страницами weex, а передача между weex и native может быть реализована путем инкапсуляции самого модуля.
3. Разработка страницы
Как упоминалось ранее, страницы weex в настоящее время могут быть написаны на Vue или Rax. Синтаксис для Vue и Rax здесь не указан. Здесь мы в основном резюмируем несколько проблем, на которых легко застрять в реальной разработке.
1)Как узнать, реализована ли страница с помощью weex?
Можно считать, что все новые страницы можно разрабатывать с помощью weex, разница лишь в том, сколько нативных возможностей использует эта страница. Вы можете вызвать собственные возможности, настроив модули, и использовать собственные компоненты, настроив компоненты;
2)Когда вам нужен пользовательский модуль?
- Когда требуются собственные возможности, такие как:
- Интерфейс вызова системы для выбора картинки
- Звоните и отправляйте текстовые сообщения
- Откройте другие приложения
- Вызовите существующую бизнес-логику, например:
- Логика шифрования и дешифрования
- Логика входа
3)Когда вам нужен пользовательский компонент?
- Если компонент был реализован с использованием нативного кода, для сохранения единообразия исходный компонент может быть инкапсулирован в компонент.
- Если компонент не может быть реализован с помощью weex, например, компонент карты, отображение сверхдлинных изображений и т. д.
4)Как реализовать компоновку нескольких эластичных слоев?
Уровень рендеринга страницы weex — сверху вниз, чем ниже макет, тем выше отображение. Чтобы использовать в качестве макета слой с пулями, поместите его внизу.
5)Как добиться анимации страницы?
Официальный пакет SDK weex инкапсулирует модуль анимации, который можно использовать напрямую, а сложные анимации можно реализовать с помощью BindingX.
6)Как повторно использовать код weex?
Код можно абстрагировать от компонентов.
- Как компонент пользовательского интерфейса, он извлекается в компонент, а параметры свойств и интерфейсы событий отображаются извне;
- Как независимая функция js, она извлекается в js для импорта другими страницами;
- Стиль css также можно извлечь в файл css для использования на других страницах;
- Если он содержит несколько форм компонентов, его можно ввести через примеси.
4. Сборка и упаковка платформы
Мы разработали проектную платформу сборки:
- Каждый проект может добавлять несколько ветвей, которые могут быть ветвями разных репозиториев. Потому что проект может быть кросс-командным и кросс-модульным, но его нужно выпускать вместе.
- Сборка собирается через webpack, после сборки поддерживает публикацию оффлайн хранилища и онлайн CDN.
Мы также разработали платформу публикации weex в единицах приложений:
- Приложение здесь — это абстрактное понятие, а не традиционное «приложение», которое можно понимать как модуль.
- После того, как платформа построения будет завершена, деловая сторона может перейти к платформе выпуска для выпуска одним щелчком мыши.За исключением того, что минимальный поддерживаемый номер версии необходимо заполнить в первый раз, никаких других операций не требуется.
- Платформа публикации поддерживает публикацию в оттенках серого, полную публикацию и откат.
- Платформа публикации будет отображать использование weex на терминале, время рендеринга, ошибку рендеринга, время загрузки и т. д.
В-четвертых, возникшие проблемы и пути их решения.
В процессе разработки многие проблемы можно решить, прочитав исходный код, например:
-
Поддерживается ли уже кэширование при использовании iconfont?
Ответ: Поддерживается, включая кеш памяти и кеш файлов, кеш памяти использует имя семейства в качестве ключа, а кеш файлов использует md5(url) в качестве локального имени файла.
-
Может ли функция, реализованная модулем, возвращать параметры?
Ответ: Функциональная атмосфера модуля — UIThread и JSThread, JSThread — синхронный для js-потоков и поддерживает прямой возврат параметров, UIThread — асинхронный для JS-потоков и не поддерживает прямой возврат параметров, можно использовать только callback
Кроме того, мы решили многие распространенные проблемы в ZanWeexSDK, включая динамическую реализацию, поддержку нескольких модулей, управление кешем, горячую перезагрузку, просмотр журнала, адаптацию страницы, передачу параметров и т. д.
Кроме того, будут некоторые общие проблемы, которые перечислены здесь:
-
Каков механизм обновления конфигурации? Обновление не удалось, как открыть страницу weex?
Ответ: Интерфейс обновления конфигурации открыт для вызова бизнес-стороной, и бизнес-сторона решает, когда вызывать интерфейс обновления; в SDK выполняются три процесса, чтобы попытаться обеспечить успешное обновление конфигурации:
1) После неудачной попытки извлечения интерфейса конфигурации будет предпринято три повторных попытки;
2) Когда сеть изменится с отсутствия сети на сеть, sdk проверит, была ли конфигурация извлечена, и если она не была извлечена, она будет активно извлечена.
3) Разрешить бизнес-стороне иметь встроенную конфигурацию и js-файлы.При неудачном извлечении SDK будет считывать из встроенной конфигурации
-
Что такое управление версиями конфигурации?
О: При настройке каждого релиза будет указан минимальный номер версии приложения, поддерживаемый релизом. Каждый запрос будет содержать номер версии приложения, и сервер будет возвращать только последнюю конфигурацию, которая соответствует номеру версии.
-
Поддерживает ли поворот экрана?
Ответ: Да. После поворота экран становится ландшафтным, и weex отображает в соответствии с размером ландшафта.Проблема в том, что пока страница, которую вы пишете, соответствует этому изменению, она ничем не отличается от нативной страницы.
5. Чем заняться в будущем
- Построение библиотеки компонентов
- Статистика производительности, такая как частота кадров, память, ЦП
- Инкрементные обновления, push-обновления для конфигурации и js-файлов
- Обработка понижения версии