предисловие
Содержание статьи предусматривает некоторые приготовления, которые необходимо выполнить перед выполнением многотерминальной унифицированной разработки. Если у вас есть связанные потребности, такие как использование набора кодов для одновременной совместимости, H5/мини-программы/приложения со всех сторон, то эта статья может оказать вам некоторую помощь и сократить количество обходных путей. Без дальнейших церемоний, давайте начнем.
Зачем делать несколько концов
В эпоху множества устройств, все большего количества методов переноса приложений и изоляции основных платформенных технологий нам, как команде компании по эксплуатации и разработке технологий, необходимо найти набор надежных и отличных технических решений для повышения эффективности нашего продукта. разработка и реализация.Снижение технических затрат на внедрение и достижение наилучших результатов продукта.
Факторы, которые следует учитывать перед выбором технической структуры
- Подтвердите размер вашего проекта
- Определите, насколько важен ваш проект для компании
- Подтвердите свой проектный цикл
- Подтвердите свои текущие технические навыки
- Подтвердите функциональность, производительность, зрелость, ремонтопригодность, масштабируемость, активность сообщества выбранной платформы.
Лучшие продукты на рынке
- uni-app DCloud
- Таро JD.com
- Капельница хамелеон
- Хиппи Тенсент
- Векс Али
Вышеупомянутые продукты — это продукты с высокой частотой обновления кода. В то же время те, которые удовлетворяют H5, мини-программы и приложения, включают Uniapp, Taro и Chameleon. Hippy и Weex поддерживают только компиляцию и преобразование как App, так и H5. Стоит отметить, что синтаксис Didi's Chameleon похож на синтаксис Vue.Если вы хотите использовать Chameleon после проверки, вам нужно заранее понять синтаксис Chameleon.
uni-app — это синтаксис Vue и файл Vue, с которым мы знакомы.Метод написания почти такой же, как и у Vue, за исключением того, что структура маршрутизации и переходы должны быть выполнены с использованием встроенного API.
Taro официально предоставляет две версии Vue (2, 3) и React. Это зависит от того, с каким стеком технологий вы лучше знакомы. Но Таро использует React Native от FaceBook для поддержки приложений. Используйте Taro для преобразования в React Native, а затем интегрируйте его в существующее приложение.Если вы хотите что-то сделать в нативном приложении, вам нужно учитывать нативные и React Native, а также совместимость с Taro. А официальный TaroUI не поддерживает React Native.
Поскольку Taro поддерживает обе платформы одновременно, охват должен быть относительно большим. Итак, давайте сначала разберемся, что может Таро
Особенности Таро
Установка и использование | Документация Taro
После установки и эксплуатации некоторых сред в RN я написал несколько небольших демонстраций, чтобы увидеть, как стиль Таро отличается по стилю между апплетом WeChat и приложением.
В процессе настройки среды RN большинство загрузок, зависящих от среды, выполняются довольно медленно, а частота сбоев чрезвычайно высока.Если сеть терминала проксирована за границу, вероятность успеха и скорость загрузки могут быть увеличены. (Конкретный метод можно найти самостоятельно)
Крайний левый из трех вышеприведенных изображений — это апплет WeChat, средний — Android, а правый — IOS.
- При использовании getStatusBar Api, предоставленного Taro, для получения высоты строки состояния для панели в голове видно, что апплет работает хорошо, а начальная позиция стороны Android не находится вверху страницы, поэтому нет способа достичь иммерсивного состояния.Требования к панели, высота панели на стороне IOS и производительность на стороне апплета разные
- Для большинства элементов в RN отображение является встроенным блоком, поэтому, если вы расположите его горизонтально, вам нужно использовать атрибут flex-direction, а значением по умолчанию на стороне RN является столбец, который расположен вертикально.
- Если сторона RN хочет установить цвет для фрагмента текста, ей необходимо использовать компонент Text, иначе запись цвета не будет иметь эффекта. У апплета такой проблемы нет
- Если ситуация переполнения текста обрабатывается в форме веб-стороны, она, очевидно, не повлияет на сторону RN. Сторона RN достигает этого эффекта, заимствуя свойство numberOfLine в компоненте Text.
- Box-shadow также не действует на стороне RN, и возникает ошибка красного экрана.
Мы видим, что в короткой демонстрации на самом деле Taro немного отличается в стилевом исполнении апплета WeChat, Android и IOS.Если вы хотите добиться единства, вам нужно написать некоторые коды совместимости. Читая официальные документы Таро, я обнаружил, что официальные документы Таро очень хороши в плане базовых руководств, расширенных руководств, экологии сообщества и т. д. Нет никаких сомнений в том, что Таро — очень хорошая и авангардная структура. Если для ваших потребностей нет ссылки на приложение, то Taro — очень хороший выбор.
uni-app
официальная документация uni-приложения
Введение на официальном веб-сайте uni-app заключается в том, что uni-app — это платформа для разработки всех интерфейсных приложений с использованием Vue.js.Разработчики пишут набор кодов, которые можно публиковать на iOS, Android, в Интернете (отзывчивый) и различные небольшие программы (WeChat/Alipay/Baidu/Toutiao/QQ/Kaishou/DingTalk/Taobao), Quick Apps и другие платформы.
Видно, что поддержка uni-приложения для Vue довольно дружелюбна. Кроме того, в Tencent Classroom также есть соответствующие видеоуроки для uni-app. Если вы новичок и не хотите изучать юни-приложение, читая документацию, то можете попробовать.
Существует два способа создания уни-приложения:
- Генерация приложений в один клик через официальный редактор HBuildX
- Создан с помощью строительных лесов
В настоящее время, после того как я создал приложение со скаффолдингом, я написал статическое демо. Без лишних слов давайте посмотрим на разницу в производительности между мини-программами WeChat и стилями Android и IOS.
Это по-прежнему апплет WeChat слева, Android посередине и IOS справа.
На самом деле, с точки зрения статических страниц, uni-app довольно хорош с точки зрения производительности в стиле трех терминалов. Например, нет разницы в эффекте перелива текста, анимации перехода, тени и т.д.
uni-app не имеет слишком сложных операций в процессе интеграции в натив, используя HBuildX для упаковки, запуска и других операций, лишь бы была соответствующая среда и симулятор/реальная машина. Может быть очень просто запустить соответствующую модель для отладки. Однако есть поговорка, что официальная документация uni-app не так дружелюбна к читателям, а некоторые проблемы не так эффективны, как рыться в сообществе. Конечно, это также косвенно показывает, что активность сообщества uni-app все еще возможна.
Если ваши требования включают в себя вещи, связанные с приложением, и вы не очень хорошо знакомы с приложением и нативом, вероятно, uni-app — хороший выбор для вас.
Исходя из того, что он знаком с грамматикой хамелеона, автор не имел глубокого понимания поддержки хамелеона для всех сторон.Если вы очень заинтересованы в хамелеоне, вы также можете использовать свои трудолюбивые маленькие ручки, чтобы понять сила его Бар.
Суммировать
Сочетая собственный проект, бизнес-сценарий, стек технологий и другие потребности, правильно подобрать подходящее вам техническое решение. Нет такого понятия, как лучшее техническое решение, то, которое вам подходит, является лучшим.