Добавить Автора
Фреймворк MPX (github.com/didi/mpx) — это расширенная структура, запущенная Didi Chuxing, которая ориентирована на разработку небольших программ. В этой статье обсуждаются преимущества и преимущества MPX с точки зрения использования. Если содержание слишком длинное, каждый раздел раздела преимуществ имеет простое резюме из одного предложения, которое можно быстро прочитать. Если вы хотите узнать больше деталей дизайна, вы можете прочитатьпредыдущая запись - Выпущен MPX2.0.
задний план
Сегодня, с ростом популярности небольших программ, все больше и больше разработчиков нуждаются в разработке небольших программ. Разработка нативных апплетов сопряжена со многими неудобствами, и разработчикам приходится делать выбор среди множества небольших программных фреймворков.
Итак, сегодня мы предоставим вам небольшой программный фреймворк Amway: MPX.
Преимущество
Причина, по которой разработчикам рекомендуется использовать инфраструктуру MPX для разработки небольших программ, заключается в том, что инфраструктура MPX имеет некоторые преимущества, которых нет у других платформ.
Основанный на собственном апплете, MPX сделал множество улучшений возможностей, обеспечив меньшее количество ям, обеспечивая ответ данных, улучшение шаблонов, оптимизацию производительности, кросс-платформенную разработку и другие возможности для улучшения пользовательского опыта и эффективности разработки.
Далее мы последовательно опишем шесть пунктов: нативная совместимость -> поддержка сторонних компонентов -> создание по запросу -> кроссплатформенная компиляция -> расширение возможностей -> уникальные преимущества в производительности.
изначально совместимый
MPX полностью совместим с родным, и ям мало. Прогрессивный доступ прост.
По стилю синтаксиса видно, что популярные на рынке фреймворки апплетов в основном основаны на веб-фреймворках (taro/nanachi-react, uniapp/megalo/mpvue-vue) или наборе новых (хамелеон)/полу-новых ( вепы) ) стандарт.
Используя эти фреймворки, код, который вы пишете, не является кодом апплета. Скорее реагировать/vue или другой набор кода. И этот код исходного кода в код апплета, необходимо пройти всестороннее преобразование, это преобразование может привести к некоторым неизвестным проблемам, в результате чего некоторые ямы.
В то же время сам апплет со временем будет постепенно дорабатываться, добавлять больше функциональных возможностей и предоставлять лучшие компоненты и методы. И некоторые рамки могут быть ограничены энергией или ритмом структуры, нет возможности продолжить работу в первый раз, или даже структура постепенно игнорируется и не может быть использована.
И то, что выбирает MPX,Полностью принять родной.
Давайте посмотрим, как выглядит типичный компонент MPX.
На первый взгляд, кажется, ничем не отличается от Vue, поэтому есть дополнительный блок JSON, а метка апплета написана в шаблоне.
Поскольку эта часть полностью соответствует родной грамматике апплета WeChat, мы не будем делать никаких преобразований, поэтому вы пишете то, что пишете. (Если используется функция улучшения MPX, некоторые необходимые преобразования все равно будут выполнены. В будущем мы также опубликуем статью, подробно объясняющую, как реализовано улучшение MPX. Условно говоря, наше преобразование относительно легкое, прозрачное, и понятно)
Когда у WeChat появляются новые возможности, новые ярлыки и новые крючки жизненного цикла, небольшие программы, написанные с использованием платформы MPX, нужно использовать только напрямую.
Таким образом, используя структуру MPX, вы можете легко использоватьОтношения пользовательских компонентовЧтобы получить связь между компонентами, используйтеwxsчтобы лучше построить страницу.
MPX поддерживает практически каждую характеристику родных, в файле .mpx, шаблон Частичная запись шаблона синтаксиса нативных апплетов, скрипты, частичные напишите синтаксис сценариза нативный апплет, JSON PATTIAL Написать информацию о конфигурации нативный апплет. С MPX вы действительно маленькие в программе развития.
В настоящее время многие разработчики нативных апплетов могут захотеть попробовать фреймворк.Для старых проектов доступ к фреймворку определенно проще всего сделать с помощью MPX. Сарафанное радио бесполезно, мы сделали демонстрацию, чтобы показать вам образец: в нашем проекте GitHub есть папка с примерами, которая содержитПример прогрессивного доступа к MPX для нативных проектов.
Библиотека сторонних компонентов
MPX обеспечивает полную поддержку сторонних библиотек компонентов.
Выше упоминалось, что MPX чрезвычайно совместим с родным, о чем вы можете подумать? Да, это идеальная поддержка сторонних библиотек компонентов.
Мы все знаем о важности поддержки сторонних библиотек компонентов, поэтому возможность поддерживать большинство фреймворков. Но поддержка и идеальная поддержка есть различия. Это простое наблюдение, поддержка таро / mpvue / uniapp для сторонних библиотек компонентов осуществляется в виде копии, то есть небольшая и микроканальная программа ведет себя как оригинал.
Так как же MPX поддерживает сторонние библиотеки компонентов?Вот демонстрация: также в папке с примерами на нашем GitHub,MPX использует пример библиотеки сторонних компонентов, основной код показан на следующем рисунке:
На первый взгляд вроде ничего особенного? Я не использовал другие фреймворки для внедрения сторонних компонентов, я просто искал другие фреймворки и, похоже, не предоставил соответствующих демонстраций, друзья, которые их использовали, могут сравнить их сами.
Чтобы использовать стороннюю библиотеку компонентов в MPX, вам нужно только установить ее с помощью npm, как веб-проект, и вам не нужно копировать файлы***. Затем напишите имя пакета прямо в json, и вы найдете его в разделе node_modules. В сочетании с псевдонимом веб-пакета это может быть проще и семантичнее.
Но это еще не конец~
Внимательные друзья обнаружат, что в этом примере кода есть как компоненты vant, так и компоненты iview.Согласно спецификации WeChat, эти библиотеки компонентов будут указывать свою собственную директорию для создания файла сборки через поле miniprogram, и инструмент разработчика будет использовать эту директорию. полностью в окончательный код выпуска, у нас есть две огромные библиотеки компонентов, занимающие ценное место.
Конечно, мы надеемся использовать как можно больше ссылок, а не импортировать их все сразу, да, поэтому MPX предоставляет возможность цитировать по запросу в следующей главе.Цитирование по запросуВдаваться в подробности.
Кроме того, в настоящее время очень мало библиотек компонентов, которые пересекают платформу апплета.Если я использую вант, что мне делать, если в Alipay и QQ нет ванта? Возможно, по этой причине другие фреймворки не рекомендуют использовать сторонние библиотеки.В MPX мы помогаем вам переносить библиотеки компонентов других людей.Подробности см. в следующей главе.Платформа программы Cross Mini
Цитирование по запросу
Благодаря анализу и собранию зависимости WebPack при использовании сторонних компонентов или разделения и разрабатывающих крупномасштабных проектов MPX могут гарантировать, что встроенный код является использованием для использования кода.
Компиляция самого родного апплета состоит в том, чтобы пройти весь JS в папке проекта и упаковать его в пакет AMD, то есть все файлы в папке проекта, независимо от того, используются они или нет, будут занимать размер пакета и загрузить.
При этом поддержка npm нативного апплета WeChat основана на репликации папок.В стороннем пакете папка для копирования указывается декларацией поля miniprogram.Независимо от того, является ли ресурс (template/js/style/image) используется или не используется, все ресурсы будут скопированы в папку проекта.
И мы предоставляем плагин @mpxjs/webpack-plugin.С помощью экосистемы webpack анализ части json файла .mpx или собственного файла json добавит зависимости в качестве новой записи для добавления подкомпиляции. На основе сбора зависимостей, а не обхода файлов.
Преимущества: если вам нравятся кнопки vant, поле ввода iview и макет wux, вы можете попробовать MPX, который позволяет вам использовать несколько фреймворков пользовательского интерфейса одновременно, не беспокоясь о размере окна. заявление.
Аналогично, лицо крупномасштабного проекта, мы можем разделить на разные разделы, сделанные после завершения пакета NPM различными командами, во введении в основной проект, конкретное содержание документа можно увидетьУлучшение JSON — пакетыодин период.
Подробности сбора зависимостей можно найти в документацииСкомпилировать и построитьодин период.
Платформа программы Cross Mini
Кросс-платформенный подход MPX позволяет использовать сторонние библиотеки компонентов на платформе апплета, обеспечивая при этом достаточные и полные возможности условной компиляции.
В ERA MPX 1.0 MPX Framework сосредоточена на улучшении опыта разработки WECHAT-апплетов, хотя он также предоставляет версию Alipay, но код полностью написан.
С увеличением количества суперприложений обеспечивается небольшая программная мощность, существует как минимум пять видов апплетной системы (микроканал, серия Alipay, серия Baidu, серия заголовков, QQ), если для каждой платформы требуется код обслуживания, количество инженеров явно недостаточно, поэтому возможность кроссплатформенности апплета также является главной характеристикой MPX 2.0.
Наш подход — кроссплатформенная конверсия. Небольшие программы, синтаксис в основном такой же конфигурации, разница в хуках обеспечивает плавный запуск в MPX.
Кроме того, самое большое отличие в этом — этикетка и инструкция на шаблоне. Итак, мы реализуем набор конвертируемых полок и пишем правило конвертации для завершения переноса апплетов WeChat в Alipay, Baidu и заголовки.
С помощью этого режима преобразования очень удобно для пользователей понять, как мы преобразуем программу в небольшой микро-канал Alipay, Baidu и другой маленькой платформы программы. И если у пользователя есть потребности, вы можете либо заполнить небольшую программу правила преобразования для других платформ, ее можно сделать в небольшой программе, написанной для кода Applet на основе стандартов, и дополнительно преобразовано в другие возможности платформы.
В сочетании с поддержкой нативных апплетов, о которых мы говорили, мы можем выбить что-то другое, например, упомянутая выше библиотека сторонних компонентов пересекает платформу апплетов.
Да, мы можем помочь вам запустить библиотеку компонентов пользовательского интерфейса, написанную для WeChat, на Alipay и Baidu, а также объединить платформу апплета с библиотекой компонентов.
Тогда должна быть такая проблема, какой бы крутой ни была нативная поддержка MPX, некоторые базовые возможности доступны только на платформе WeChat, но не на других платформах.Можно ли сделать преобразование MPX из ничего?
Конечно нет На самом деле, эта проблема является проблемой для всех кросс-энд фреймворков, поэтому основная проблема кросс-энда заключается в том, как поступать с дифференцированной частью.
MPX предоставляет множество возможностей условной компиляции, которые можно создавать по-разному в зависимости от размера файла, размера блока кода или размера кода.
Кроме того, возможность дифференцированного построения MPX также полностью основана на веб-пакете, поэтому, если в упомянутой выше сторонней библиотеке компонентов действительно есть место, которое нельзя преобразовать, например, компонент выбора ванта использует встроенные wxs для написания небольшого метода с именем isSimple. в шаблоне Called, но метод записи этого метода не поддерживается в сценарии фильтра апплета Baidu (фильтр можно понимать как wxs апплета Baidu), поскольку фильтр Baidu требует, чтобы метод упаковки объекта был экспортирован.
Лучшим решением, конечно, поможет им решить эту проблему, но время может быть медленным, поэтому в MPX, вы можете использовать возможности псевдонимами WebPack:
При попытке собрать апплет Baidu он сначала ищет pick/index.swan.wxml, а затем создает псевдоним для файла в src.Вы можете самостоятельно изменить часть с некоторыми незначительными проблемами в стороннем пакете.
Дополнительные сведения о кросс-платформенной условной компиляции см.Ознакомьтесь с нашей официальной документацией — Кроссплатформенная условная компиляция
повышение способности
Благодаря ответу на данные и предварительной обработке во время компиляции он обеспечивает вычисление/наблюдение, полную привязку типов стилей, двустороннюю привязку данных, динамические компоненты и т. д., чтобы облегчить разработчикам разработку небольших программ.
Улучшение способностей должно быть основной и самой важной возможностью, предоставляемой фреймворком, и MPX действительно приложила много усилий, предоставив множество полезных улучшений способностей, но ограниченное пространством здесь, только краткое введение, подробности все ещеОзнакомьтесь с нашей документациейхорошо.
Поскольку другие фреймворки часто основаны на React/Vue, они будут давать список возможностей, которые не поддерживаются. Когда пользователи пишут его, они привыкли к нему, и они могут реагировать только после его использования. Это не поддерживается. MPX — это родной синтаксис апплета, и когда мне становится неудобно его писать, я вдруг вспоминаю, что у MPX есть такая возможность.
Перечислите расширенные возможности MPX:
- Улучшения в шаблонах
- привязка имени класса стиля
- Встроенное событие массы участие
- динамические компоненты
- двусторонняя привязка
- Узел получить ссылку
- Улучшения в JS
- ответ данных
- Оптимизация setData
- ES6+
- улучшения стиля
- Поддержка предварительной обработки
- преобразование рпкс
- Улучшения в JSON
- packages
- Субподрядная оптимизация ресурсов
Наиболее заметной возможностью MPX является ответ данных, который выводит вычисляемые/отслеживаемые данные, а также двустороннее связывание данных. Эта возможность похожа на Vue, за исключением того, что в MPX это возможность ответа на данные, предоставляемая mobx.
Для того же ответа данных мы сделали некоторые различные оптимизации.
Преимущество в производительности
Доступные данные абстрагируются путем синтаксического анализа шаблона, чтобы гарантировать, что скорость отклика данных обеспечивается без снижения производительности.
Фреймворки, такие как mpvue/wepy/megalo, также предоставляют возможности ответа на данные, но ответ данных имеет большую проблему в области небольших программ.В руководстве по разработке WeChat четко упоминается, что следует уделять внимание частоте вызовов setData и размеру объем данных.
Самый простой метод ответа на данные — установка данных при изменении данных, что сильно снижает производительность апплета.
И MPX абстрагирует соответствующую функцию рендеринга, анализируя шаблон, и выполняет функцию рендеринга, чтобы найти данные, которые действительно необходимо отправить, прежде чем вызывать setData для отправки данных.
Эффект показан на рисунке:
Панель аудита инструментов разработчика апплета может помочь пользователю проанализировать возможную необходимость оптимизации точки. Как упоминалось ранее, в красной части кадра, в частности в третьем красном поле MPX, не передавать данные на неиспользуемый шаблон для рендеринга слоя, сделанного значительно оптимизированным.
Пока функция рендеринга не выполняется (в консоли появится предупреждение, а логика нижней строки выполнит полный набор данных, чтобы гарантировать, что программа все еще может нормально работать), апплету, разработанному с помощью MPX, никогда не придется беспокоиться о отправка данных, которые не используются шаблоном.
Хотя это всего лишь небольшой пример TODO MVC, эта оптимизация не имеет ничего общего с масштабом приложения, и в то же время вы можете попробовать другие небольшие демонстрации для сравнения.
Подробности этой оптимизации можно увидеть вПредыдущая статьяРабочий механизм MPX — ответ данных и оптимизация производительности
Суммировать
По сравнению со многими фреймворками, представленными в настоящее время на рынке, MPX надеется полностью охватить нативные апплеты, основанные на нативных апплетах, улучшить их на основе нативных апплетов и добиться максимального расширения возможностей за счет минимального числа преобразований. опыт разработки, убедитесь, что не слишком много ям из-за проблем с конверсией или фреймворком.
Целевыми пользователями фреймворка MPX являются разработчики с высокими требованиями к качеству апплета.Если вы являетесь разработчиком нативного апплета или устали решать проблемы, вызванные некоторыми фреймворками преобразования, основанными на синтаксисе DSL веб-фреймворка, вам добро пожаловать, чтобы попробовать кадр MPX.