Первый опыт работы с приложением Ele.me

Архитектура внешний интерфейс Vue.js Weex Быстрое приложение

Автор: Ты голоден, Гу Чэн?

Почему мы выбираем Быстрое приложение

Долгое время нативное приложение Ele.me имело несколько более высокую стоимость опыта для новых пользователей и немного громоздкое для старых пользователей, которые хотят заказать еду, в то время как веб-версия Ele.me с точки зрения опыта , скорость и функциональная поддержка.Ни одно из них не может достичь уровня нативных приложений, поэтому существует насущная потребность в платформе, которая была бы достаточно функциональной для поддержки опыта работы с сервисом Ele.me и достаточно легкой в ​​использовании, а быстрое приложение просто отвечает нашим потребностям.

  1. Поскольку он напрямую управляется и продвигается производителями (Xiaomi и т. д.), он имеет достаточную поддержку на системной платформе, различные системные интерфейсы и службы завершены, и та же функциональная логика, что и в собственных приложениях, может быть легко реализована.
  2. Легкая и не требующая установки модель позволяет новым пользователям получать заказы быстрого питания, а старым пользователям быстро заказывать еду по очень низкой цене за очень короткий период времени.
  3. Тесная интеграция с системной платформой производителя делает новое приложение эффективным и надежным каналом трафика помимо нативных приложений и веб-приложений.

Новое приложение против родного приложения, веб-приложения

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

  1. процесс разработки В новом приложении используется технологическая система, подобная Vue/Weex, поэтому разработчики, знакомые с этой технологией, могут легко войти в состояние разработки, синтаксис прост и понятен, интерфейс системы завершен, функции понятны, и весь сервис платформа также очень толерантна к внутренней структуре приложения, которая в наибольшей степени может быть реализована по собственным идеям разработчика. Взяв в качестве примера приложение Ele.me, в процессе разработки нового приложения Ele.me многие логики напрямую повторно используют логику и код исходного веб-приложения (на основе системы Vue), процесс миграции и преобразования очень гладкие и даже некоторые части. Компоненты напрямую преобразованы из оригинальных компонентов Vue, и опыт разработки очень хороший. В процессе доступа к различным системным службам наиболее необходимые службы и интерфейсы, такие как хранение данных, географическое положение, сетевые службы, напоминания о сообщениях и оплата, очень полны, а подключение очень просто Дизайн интерфейса соответствует познанию веб-разработчикам.В процессе стыковки в принципе нет препятствий. Основываясь на вышеуказанных факторах, для веб-разработчика очень просто и эффективно завершить разработку нового приложения.

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

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

  4. На уровне компонентов уровень представления компонентов и уровень логики реализованы в соответствии с формой дизайна собственного приложения. Хотя он наследует шаблон в форме Vue, он должен иметь правильное представление о макете в фактическом макете слоя представления. предоставляется как услугаstackВзяв в качестве примера компоненты, обычным веб-разработчикам может быть сложно иметь понятие слоев, таких как плавающие панели навигации, которые мы привыкли использовать в веб-разработке.fixed, stickyДля достижения такого глобального атрибута позиционирования в ненужных случаях трудно реализовать иерархическую связь между различными веб-компонентами для таких атрибутов, как zIndex. В быстрых приложениях стек используется для достижения аналогичной компоновки, что на самом деле требует рационального использования уровня компонентов. То же самое касается компонента длинного списка.List, в сценарии с длинным списком предпочтительно использовать компонент списка для повышения производительности и удобства. Кроме того, в процессе реализации представлений и логики также очень важно учитывать больше в виде нативных приложений, чтобы пользовательский опыт был ближе к нативным приложениям.

Пример проблемы

В процессе разработки быстрых приложений я тоже столкнулся с некоторыми проблемами, вот некоторые из них.

  1. Реализация маскирующего слоя В таких сценариях, как всплывающие окна, необходимо реализовать слой маски, и мы пробовали несколько форм, таких как абсолютное позиционирование и наложение стека, и столкнулись с проблемами, включая некоторые исключения стиля модели (абсолютное позиционирование), исключения отношений наложения (стек). и так далее.

  2. Унифицированное управление вызовами системных служб Для общих системных вызовов, таких как позиционирование и сеть, чтобы учесть эффективность разработки и адаптацию реальной бизнес-логики, интерфейсные вызовы в определенной степени инкапсулированы.В процессе совершенствования инкапсуляции мы также столкнулись с ошибками. такие как обработка сообщений об ошибках и различные данные вызовов компонентов, совместное использование и т. д.

  3. хранение и$appкомпромисс В процессе записи статуса использования пользователя мы также столкнулись с некоторой информацией, которой необходимо поделиться по всему миру.$appвыбор по объектам. Хранение в системе данных является более надежным и может быть в то же время в автономном режиме, и на него не влияет статус пользователя и приложения.Недостатком является то, что он недостаточно гибок;$appОбъекты по своей сути привязаны к жизненному циклу приложения, что, очевидно, больше подходит для данных, разделяемых только в этом жизненном цикле, и в сочетании с хуками каждого этапа жизненного цикла это также может быть сохранено в системе данных в любое время, что более гибко.

резюме

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