предисловие

mpvue — это фреймворк для разработки мини-программ WeChat с использованием Vue.js. Используя эту платформу, разработчики получат полный опыт разработки Vue.js, а также предоставят возможности повторного использования кода для H5 и апплетов. Если вы хотите преобразовать проект H5 в апплет или хотите преобразовать его в H5 после разработки апплета, mpvue будет очень подходящим решением.

В настоящее время mpvue был проверен в нескольких реальных бизнес-проектах Meituan Dianping, поэтому мы решили открыть его исходный код, надеясь, что больше технических специалистов разработают его вместе и применят к более широкому спектру сценариев. Адрес проекта:

GitHub.com/Mehtuan-DI Ах…

Чтобы помочь вам лучше понять архитектуру mpvue, давайте проанализируем идеи дизайна и реализации фреймворка. Основное содержание статьи было опубликовано в специальном репортаже 9-го номера журнала «Программист» за 2017 год с небольшими изменениями.

Особенности разработки мини-программ

Апплет WeChat рекомендует лаконичный метод разработки и дополняет облегченные функции продукта за счет многостраничного агрегирования. Апплет загружается на локалку в виде офлайн-пакета, загружается и запускается через клиент WeChat, спецификация разработки лаконична, техническая упаковка тщательна, система разработки самодостаточна, имеет тень Native и H5, но это не то же самое.

Сам апплет позиционируется как простой фреймворк уровня логического представления, который официально не рекомендуется для разработки сложных приложений, но с его помощью сложно упростить бизнес-требования. Сложные приложения предъявляют более высокие требования к методам разработки, таким как компоненты и модульность, автоматическое построение и интеграция, повторное использование кода и эффективность разработки и т. д., но спецификации разработки небольших программ сильно ограничивают эту часть возможностей. Чтобы решить вышеуказанные проблемы и обеспечить лучший опыт разработки, мы создали mpvue для разработки мини-программ WeChat с использованием Vue.js.

что такое мпвуе?

mpvue — это набор интерфейсных сред разработки для разработки небольших программ. Его основная цель — повысить эффективность разработки и улучшить опыт разработки. Используя эту структуру, разработчикам нужно только иметь предварительное представление о спецификациях разработки мини-программ и быть знакомым с основным синтаксисом Vue.js, чтобы начать работу. Фреймворк обеспечивает полный опыт разработки Vue.js, разработчики пишут код Vue.js, mpvue анализирует его на небольшие программы и обеспечивает его правильную работу. Кроме того, платформа также предоставляет разработчикам пример кода для быстрого запуска с помощью инструмента vue-cli, и разработчикам нужно всего лишь выполнить простую команду, чтобы получить работоспособный проект.

Зачем делать мпвуе?

В начале внутреннего тестирования апплета мы планируем быстро итерировать реализацию продукта, которая будет сравниваться с H5.Основные требования: быстрая реализация, повторное использование кода, низкая стоимость и высокая эффективность... После этого мы испытали построение нескольких программ-апплетов в сочетании с бизнес-сценариями, выбором технологий и методами разработки малых программ, мы разобрали основные проблемы, с которыми столкнулись на этапе разработки:

• Механизм компонентизации не совершенен

• Отсутствие возможности мультиплексирования кода

• Структура апплета и стек командных технологий не могут органично сочетаться

• Небольшая стоимость обучения по программе недостаточно низка

Компонентный механизм: логика апплета и код уровня представления отделены друг от друга, общедоступные компоненты не могут быть объединены в единую запись файла после извлечения, компоненты должны быть представлены на уровне представления и уровне логики соответственно, и обслуживание плохое; нет механизма пространства имен, и обратные вызовы событий должны быть установлены как глобальные. Функции и компоненты разработаны с учетом риска конфликтов имен, а инкапсуляция данных не является надежной. Разработчикам нужна дружественная организация кода, которую можно импортировать за один раз через модули ES, данные компонентов имеют хорошую инкапсуляцию. Зрелый компонентный механизм необходим для инженерного развития.

Multi-Terminal Reion: Существует два типа общих бизнес-сценариев, благодаря преобразованию существующих продуктов H5 в небольшие программные приложения или наоборот. С точки зрения эффективности, разработчики надеются завершить разработку путем повторного использования кода, но каркас развития апплета не может. Мы постарались преобразовать код H5 в апплет через статический анализ кода, но мы только просмотрели преобразование уровня и не могли принести больше преимуществ. Повторное использование нескольких терминалов требует более зрелого раствора.

Знакомство с Vue.js: метод разработки небольших программ аналогичен H5, поэтому мы рассматриваем возможность повторного использования кода в H5. После выбора технологического стека команды мы определили Vue.js как стандарт для разработки небольших программ. Использование Vue.js для разработки небольших программ напрямую приведет к следующим улучшениям эффективности разработки:

• Код H5 можно повторно использовать в апплете с минимальной модификацией.

• Используйте механизм компонентов Vue.js для разработки небольших программ, которые могут реализовать повторное использование небольших программ и компонентов H5.

• После унификации стека технологий стоимость обучения мини-программам снижается, и разработчикам не нужно больше учиться, чтобы перейти с H5 на мини-программы.

• Код Vue.js позволяет всем внешним интерфейсам напрямую участвовать в разработке и обслуживании.

Почему Vue.js? Это зависит от выбора стека технологий команды.Введение нового выбора противоречит унификации стека технологий и повышению эффективности разработки, а также исходному замыслу бизнеса по обслуживанию средств разработки.

Эволюция MPVUUE

Формирование mpvue исходит из бизнес-сценариев и требований, и окончательный план прошел три этапа.

Этап 1. Мы внедрили инструмент преобразования кода на уровне представления, который призван повысить эффективность разработки кода в первый раз. Вторичная разработка выполняется для этого целевого кода путем преобразования кода слоя представления H5 в код апплета, включая сопоставление тегов HTML, шаблон Vue.js и преобразование стилей. Мы добились ограниченного повторного использования кода, но стоимость компонентной разработки и обучения небольших программ существенно не уменьшилась.

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

Третий этап: наша цель — поддерживать полный набор синтаксиса Vue.js и достичь цели разработки небольших программ с использованием Vue.js. А благодаря внедрению среды выполнения Vue.js реализована поддержка синтаксиса Vue.js, что позволяет избежать адаптации синтаксиса человеческого тела. На данный момент мы достигли цели использования Vue.js для разработки небольших программ. Цели унификации стека технологий, компонентной разработки, многотерминального повторного использования кода, снижения стоимости обучения и повышения эффективности разработки успешно достигаются.

идеи дизайна mpvue

Vue.js и апплет являются типичными платформами уровня логического представления.Метод работы между логическим уровнем и уровнем представления таков: изменения данных приводят к обновлениям представления; показано на рисунке 1.

Рисунок 1: Принцип реализации мини-программы

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

Рисунок 2: принцип реализации mpvue

Vue-код

• Напишите страницу апплета как реализацию Vue.js

• Реализовать ассоциацию компонентов «родитель-потомок» со спецификацией разработки Vue.js.

код апплета

• Напишите шаблон слоя представления в соответствии со спецификацией разработки апплета.

• Настройка функций жизненного цикла, связанных вызовов обновления данных

• Сопоставление данных Vue.js с моделью данных апплета

И на этой основе добавляется следующий механизм

• Экземпляр Vue.js связан с экземпляром страницы апплета.

• Отношение сопоставления устанавливается между апплетом и жизненным циклом Vue.js, что может инициировать жизненный цикл Vue.js в жизненном цикле апплета.

• Небольшое событие программы устанавливает прокси-механизм и запускает соответствующий ответ события компонента Vue.js в функции прокси события.

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

• Чтобы сохранить Vue.js и апплеты, необходимость написать две версии кода для достижения?

• Апплет отвечает за отображение слоя представления, нужен ли еще слой представления Vue.js, если нет, то что делать?

• Как открыть жизненный цикл, как добиться обновления синхронизации данных?

Приведенные выше вопросы содержат основное содержание фреймворка mpvue, которое будет подробно объяснено ниже. Прежде всего, mpvue был создан для повышения эффективности, и он предоставляет возможность автоматически генерировать код апплета, код апплета построен на основе кода Vue.js, и нет необходимости разрабатывать два набора кодов одновременно. .

Отрисовка слоя представления Vue.js завершается методом рендеринга, а виртуальный DOM поддерживается в памяти. mpvue не нужно использовать Vue.js для завершения рендеринга слоя представления, поэтому мы изменили метод рендеринга, чтобы запретить рендеринг слоя представления. Читатели, знакомые с исходным кодом, знают, что среда выполнения Vue имеет реализации на нескольких платформах, помимо нашей общей веб-платформы, есть Weex. С этого момента мы добавили новую платформу mpvue.

Ассоциация жизненного цикла: Жизненный цикл и синхронизация данных — это душа фреймворка mpvue.Данные Vue.js и апплеты изолированы друг от друга, и каждый из них имеет свой механизм обновления. mpvue подключается к функциям обратного вызова жизненного цикла и события и реализует синхронизацию данных, когда Vue.js инициирует обновление данных. Апплет предоставляется пользователю через уровень представления и реагирует на взаимодействие с пользователем посредством событий.Vue.js поддерживает изменения данных и логику в фоновом режиме.

Видно, что обновление данных происходит из апплета и обрабатывается из Vue.js, а данные Vue.js изменяются и затем синхронизируются с апплетом. Чтобы добиться синхронизации данных, mpvue изменил реализацию среды выполнения Vue.js и добавил логику для обновления данных апплета в жизненном цикле Vue.js.

Механизмы агентства событий: данные взаимодействия пользователей для завершения обновления, срабатываемого механизмом прокси события. В Vue.js функция ответа события соответствует методу сборки, Vue.js автоматически поддерживает контекст. Однако в апплете нет аналогичного механизма, и поскольку среда выполнения Vue.js поддерживает виртуальный DOM в реальном времени, которые точно соответствуют апплету на просмотр слоя, мы думаем, что после того, как событие Trigger на небольших компонентах приложений просто найдет Соответствующий узел на виртуальном доме, запускающий соответствующее событие еще не завершено; с другой стороны, ответ Vue.js срабатывает, если обновление данных, функция обновления их жизненного цикла будет запущена автоматически, синхронизированные обновления на этом Функциональные данные апплета, синхронизация данных будет достигнута.

Как использовать мпвью?

Сама структура mpvue состоит из нескольких модулей npm. Модуль ввода уже обработал зависимости. Разработчику нужно только выполнить следующий код, чтобы завершить создание локального проекта.

# 安装 vue-cli$ npm install --global vue-cli# 根据模板项目创建本地项目，目前为内网地址$ vue init ‘bitbucket:xxx.meituan.  com：hfe/mpvue-quickstart’ --clone my- project# 安装依赖和启动自动构建$ cd my-project$ npm install$ npm run dev

После выполнения вышеуказанной команды целевой код апплета будет создан в подкаталоге dist текущего проекта.Используйте инструмент разработчика апплета, чтобы загрузить каталог dist, чтобы начать локальную отладку и предварительный просмотр. Пример проекта соответствует спецификации проекта шаблона Vue.js и создается с помощью инструмента командной строки Vue.js vue-cli. Организация кода соответствует официальному экземпляру Vue.js.Мы настроили среду выполнения Vue.js и загрузчик веб-пакетов для апплета, и эта часть зависимостей также была встроена в проект.

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

Рисунок 3: Эффект преобразования H5 и апплета

Преобразование апплета в H5: напрямую используйте спецификацию Vue.js для разработки апплета, сам код ничем не отличается от H5, а конкретные отличия кода будут сосредоточены в части API платформы. Кроме того, никаких явных изменений не требуется.Преобразование в основном разделено на следующие части:

• Замените фреймворк Vue.js платформы апплета на стандартный Vue.js

• Замените загрузчик vue-loader платформы апплета стандартным vue-loader

• Разница между адаптацией и модификацией апплета и базовым API H5

Преобразование H5 в апплет: H5 был разработан с помощью Vue.js, нам нужно сделать следующее:

• Замена стандартного Vue.js фреймворком Vue.js для платформы апплетов

• Замените стандартный загрузчик vue-loader на vue-loader платформы апплета.

• Разница между адаптацией и модификацией апплета и базовым API H5

В соответствии с возможностями платформы для разработки небольших приложений, у нас есть наибольшая степень поддержки функций синтаксиса Vue.js, но некоторые функции на данном этапе еще не реализованы.

Таблица 1: Функции синтаксиса, в настоящее время не поддерживаемые mpvue

Примечание о преобразовании проекта: цель платформы — связать апплет с методом разработки H5 через Vue.js, чтобы добиться максимального повторного использования кода. Однако из-за объективного существования различий платформ (в основном в механизме реализации и базовых возможностях API) мы не можем добиться 100% повторного использования кода, и нельзя избежать затрат на преобразование различий платформ. Для сценариев повторного использования кода разработчикам необходимо сосредоточиться на следующих вопросах и подготовиться к ним:

• Старайтесь использовать возможности синтаксиса, которых нет на платформе, не требующие затрат на конвертацию и адаптацию.

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

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

лучшие практики mpvue

В Таблице 2 мы сделали горизонтальное сравнение основных возможностей и характеристик трех сред разработки, апплета WeChat, mpvue и WePY, чтобы помочь вам понять направленность различных сред и определить технические решения на основе бизнес-сценариев и разработки. привычки. Мы обобщаем некоторые рекомендации о том, как лучше использовать mpvue для разработки апплетов.

• Используйте инструмент командной строки vue-cli для создания проектов и разработки с использованием спецификаций синтаксиса Vue 2.x.

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

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

• Разумное использование компонентной разработки небольших программ для повышения уровня повторного использования кода.

ТАБЛИЦА 2: СРАВНЕНИЕ ОСОБЕННОСТЕЙ ИСПОЛЬЗОВАНИЯ FRAMEWORK

Эпилог

mpvue framework был проверен на практике и в бизнес-проектах, которые в настоящее время находятся на рассмотрении широкого круга групп в США. mpvue от сообщества с открытым исходным кодом, пить из источника, мы также надеемся внести свой вклад в сообщество с открытым исходным кодом, для большинства разработчиков небольших приложений, чтобы предоставить набор технических решений. mpvue Намерение состоит в том, чтобы предоставить разработчикам Vue.js доступ к недорогой разработке небольших программ и добиться повторного использования недорогого кода миграции, наше будущее будет продолжать расширять существующие возможности для удовлетворения потребностей разработчиков, оптимизации взаимодействия с пользователем, улучшения окружающей среды экологическое строительство, помогающее большему количеству разработчиков.

Наконец, mpvue проводит вторичную разработку на основе исходного кода Vue.js и добавляет реализацию платформы апплета.Мы сохраняем возможность следить за обновлением версии Vue.js и искренне благодарим фреймворк Vue.js и апплет WeChat за промышленность удобный.

об авторе

Выполнено: Старший инженер по интерфейсу Meituan Dianping Wine and Travel Business Group, в настоящее время в основном занимается направлением мобильных терминалов и технологий апплетов, занимается инженерной разработкой и применением апплета на бизнес-уровне.

Предложения о работе

Научно-исследовательский центр винного и туристического бизнеса Meituan Dianping ищет инженеров среднего и старшего звена и технических экспертов Добро пожаловать, чтобы отправить свое резюме на huchengquan#meituan.com.

популярный

Открытый исходный код

Shield: модульная платформа для мобильных устройств, которая поддерживает самый разнообразный бизнес Meituan-Dianping, имеет открытый исходный код.

Решение для горячего обновления Android Надежный открытый исходный код, новый инструмент автоматического исправления

Walle, новое поколение инструментов для создания пакетов каналов Android с открытым исходным кодом.

Обзор Meituan

Техническая команда

http://tech.meituan.com

Нажмите и удерживайте QR-код, чтобы следовать за нами

Другие технические блоги:Блог о технологиях Meituan Dianping.