Гон Ченг, Common ID: Gcaufy, автор WePY, фреймворка с открытым исходным кодом для небольших программ, который любит технологии и открытый исходный код. Он присоединился к Tencent в 2015 году и отвечает за развитие бизнеса Tencent, связанного с перезарядкой мобильных телефонов. Он присоединился к WeChat Pay в 2018 году и отвечает за разработку бизнес-мини-программ WeChat Pay для продавцов.
введение
Несмотря на то, что эта тема неоднократно обсуждалась в других источниках, в ней по-прежнему много нового. Потому что многое делается или хочет быть сделано. Этот обмен в основном делится на следующие части:
Введение в WePY
Пользователи WePY
Показанные выше пользователи WePY — это не все данные. Поскольку пользователи WePY не могут активно сообщать о том, что они используют WePY, я перечисляю только известные мне компании, которые используют WePY, а данные относительно ограничены.
Насколько я знаю, есть небольшая программа, которая недавно взорвала круг друзей — Tencent Vaccine, которая использует WePY во внешнем интерфейсе и проект Tencent с открытым исходным кодом TARS в бэкэнде. Также внутри WeChat Pay есть большое количество небольших программ, использующих фреймворк WePY.
Запись чата, размещенная справа, представляет собой отзывы пользователей, которые я собрал в группе обмена WePY.Судя по содержанию отзывов, есть много слов благодарности, указывающих на то, что инфраструктура WePY действительно может помочь разработчикам повысить эффективность их разработки. Эй, я не публиковал отрицательный отзыв на WePY, потому что беспокоился, что одной страницы PPT недостаточно для публикации 👀.
Данные WePY
Сейчас у проекта WePY более 13 900 звезд на Github. По сравнению с другими интерфейсными фреймворками количество звезд, таких как Vue и React, может достигать 10 Вт+, но все они являются международными проектами. Проект WePY считается отечественным проектом из-за апплета WeChat, и иметь более 13 000 звезд — это неплохо. Количество звездочек не обязательно означает, что фреймворк WePY хорош, но может показать, что у небольшой программы большой трафик, а разработка небольших программ тоже очень перспективна. Разработчикам нужны такие фреймворки, как WePY. Вот почему существуют очень хорошие фреймворки, такие как Taro, mpvue и так далее.
В настоящее время насчитывается более 1300 выпусков. Это означает, что я просыпаюсь каждый день с более чем 10 списками дел, с которыми нужно справиться. Кроме того, в компании есть и другие дела, которыми нужно заниматься каждый день, а это большая голова.
В настоящее время существует более 320 запросов на включение. По сравнению с другими проектами с открытым исходным кодом, это довольно хорошее количество PR, и я очень благодарен разработчикам, которые внесли свой вклад в WePY.
Пользователей более 4000 человек. Источником этих данных является созданная мной группа обмена WePY, в которой сейчас более 4000 человек.
Что такое WePY
Сравните веб-приложения с апплетами. Веб-приложение и мини-программа похожи по функциям: когда веб-приложение разрабатывается, оно может использовать Vue.js в качестве основной библиотеки и упаковывать его с помощью Webpack. В апплете WeChat вы можете просто понимать WePY как комбинацию Vue.js + Webpack в веб-приложении.
Особенности WePY
Что именно WePY помогает разработчикам делать в процессе разработки? Каковы характеристики WePY?
- Скаффолдинг: он предоставляет каркас, эквивалентный vue-cli, который генерирует простой демонстрационный проект с помощью одной строки команды. Пользователи могут разрабатывать на основе этой демонстрации, избавляясь от утомительной настройки перед запуском проекта.
- Компиляция и упаковка. В родной разработке небольших программ отсутствуют многие возможности, такие как LESS и SASS. Многие пользователи сталкиваются с этой проблемой, выполняя простую компиляцию Gulp. WePY поставляется с возможностью компиляции и упаковки.Если вы хотите использовать LESS, SASS, NPM и т. д., вы можете напрямую использовать инструменты упаковки WePY для вывода кода, который может запускаться апплетом.
- Основная библиотека: основная библиотека похожа на Vue, React и т. д. Базовая библиотека WePY содержит несколько простых API-оболочек, помогающих в некоторых вещах.
- Возможности и оптимизация: В плане разработки WePY предоставляет некоторый синтаксический сахар, с помощью которого можно легко и удобно реализовать некоторые сложные функции. Что касается производительности, то есть некоторые проблемы с производительностью самого апплета, WePY сглаживает проблемы с производительностью, и разработчикам не нужно заботиться о производительной части.
- Повторное использование и расширение: с точки зрения повторного использования собственные апплеты используют ресурсы npm для загрузки соответствующих ресурсов и помещения их в каталог кода.Используя WePY, вы можете напрямую устанавливать пакеты npm и использовать их. С точки зрения расширения, в процессе компиляции вы можете по желанию добавлять и расширять методы компиляции, такие как LESS, SASS, плагины компиляции и т. д.
- Мультитерминал: используя WePY, вы можете запустить фрагмент кода на апплете, H5 и т. д.
Планирование WePY
В августе 2016 года я участвовал во внутреннем тестировании небольшой программы, а в октябре начал работать над перекодировкой. В ходе непрерывной итерации я обнаружил, что еще многое предстоит сделать. Например, связанная работа может быть абстрагирована и предоставлена другим разработчикам. Итак, в ноябре я провел рефакторинг кода, отказался от части компиляции Gulp, переписал ее и выпустил версию 1.1 на Github.
После открытого исходного кода на этот проект обратили внимание многие люди, что указывает на то, что многие люди все еще сталкивались с соответствующими проблемами. Поэтому я сделал более конкретные оптимизации, снова провел рефакторинг на версии 1.1, абстрагировал процесс компиляции и предложил две концепции компилятора и плагина, что удобно для расширения пользователями.
Версия 1.4 была выпущена в январе 2017 года и содержит больше оптимизаций всего процесса разработки и опыта разработчиков при использовании платформы, включая оптимизацию производительности.
Версия 1.6 начала учитывать проблему мультитерминала: набор кода для небольшой программы повторно используется на нескольких терминалах.
Примерно в ноябре 2017 года Mini Programs запустила нативные компоненты. Сам WePY призван решить проблему маленьких программных компонентов, после выхода нативных компонентов сценарии использования WePY уже не так сильны, как раньше, поэтому я начал думать, что WePY нужна полностью рефакторинговая версия.
Версия с рефакторингом была запущена в феврале 2018 года. Эта версия в основном предназначена для решения проблем, связанных с собственными компонентами апплета, и это совершенно новая версия с рефакторингом. Но по разным причинам эта версия официально не оглашалась. Следите за обновлениями!
Принцип реализации WePY
Далее я расскажу о техническом принципе реализации WePY.
Проблемы WePY решены
- Разработка на основе компонентов: до появления собственных компонентов мини-программ не существовало хорошего режима разработки на основе компонентов для мини-программ. Например, я сам реализовал набор диалогов, и другим, возможно, придется скопировать мой код, когда они захотят их использовать. После реализации компонентизации мне просто нужно дать ему этот компонент.
- Ресурсы npm: с момента разработки Интернета в библиотеке npm есть огромные ресурсы. Но нативные апплеты не имеют возможности использовать ресурсы npm, WePY предоставляет эту функцию.
- Фронтенд-инжиниринг: часть пакетной сборки, упомянутая ранее
- оптимизация производительности
- Дружественный опыт разработки: оптимизация опыта
- Кроссплатформенная поддержка: многотерминальная часть
В общем, проблемы, которые решает WePY, — это болевые точки, возникающие при разработке.
Архитектура WePY
Выше приведены две основные части, которые я написал: CLI и Core. Core компилируется через интерфейс командной строки для генерации кода, работающего на стороне апплета. Часть CLI далее делится на wepy и wepy-web, которые отвечают за компиляцию wepy и компиляцию wepy-web соответственно. Он разделен на две части: компилятор и подключаемый модуль.Компилятор включает текущий основной препроцессор, аналогичный загрузчику Webpack. Плагины — это то, что нужно делать после компиляции, аналогично плагинам Webpack. Основная часть делится на основную библиотеку wepy, основную библиотеку апплета и основную библиотеку wepy-web. Основная библиотека Wepy-web имеет больше компонентов wepy и API wepy, чем апплет. Некоторые встроенные компоненты самого апплета, такие как всплывающие компоненты, необходимо упаковать и поместить в компоненты wepy, если они хотят работать на нескольких терминалах. Собственный API апплета должен быть инкапсулирован API wepy.
Сама сеть также разделена на множество типов платформ, таких как браузер, WeChat h5, QQ h5, которые необходимо адаптировать отдельно, поэтому поверх wepy-web находится слой адаптации.
Помимо всего ядра, есть некоторые компоненты, инкапсулированные пользователем, такие как отчетность и асинхронность. Есть также некоторые функциональные компоненты, такие как пользовательские всплывающие окна, тосты, загрузчики изображений и т. д.
В WePY мой код будет выводить код, работающий на стороне апплета, на основе вывода Core через CLI.
Процесс компиляции WePY
Выше приведен весь процесс компиляции WePY.
многосторонняя реализация
При реализации мультитерминала возникают следующие проблемы:
-
режим разработки
Модель развития мини-программы уникальна и отличается от существующей модели развития. К счастью, при использовании WePY для разработки WePY использует синтаксис разработки, подобный Vue, который очень близок к режиму разработки Vue, поэтому проблему режима разработки очень легко решить с помощью WePY.
-
Ярлыки и стили
Апплет отличается от метки H5, но он может непосредственно выполнять некоторые простые преобразования. Например
<view>Перевести в<div>. В стиле апплет имеет единицу измерения rpx.В случае 750 px /2 напрямую преобразует rpx в px. -
Синтаксис шаблона
Апплет имеет собственный синтаксис шаблона, такой как
<wx-if>И т. д., простые преобразования могут быть выполнены при разборе. -
модульный
Апплет можно использовать изначально
require, но не H5. К счастью, есть много инструментов, которые стоит изучить, например, webpack, browserify. -
Встроенные компоненты и встроенные API
Сам WePY использует синтаксис, подобный Vue.Если его нужно преобразовать в Vue и запустить на веб-стороне, встроенные компоненты напрямую записываются в форме Vue, а компонент Vue непосредственно вводится при использовании. Встроенный API использует JSSDK, предоставленный WePY, для имитации API, предоставляемого WeChat, H5 и т. д.
Следовательно, многотерминальная реализация вполне осуществима. Некоторые из наших проектов полностью используют WePY для мультитерминальной реализации.
экология
Слева показаны некоторые библиотеки пользовательского интерфейса, которые можно найти на Github. Вы можете напрямую использовать эти библиотеки пользовательского интерфейса для вторичной разработки при разработке с помощью WePY. Справа — ресурсы разработки, собранные онлайн, включая компоненты разработки, сторонние модули и т. д. На Github есть более 900 страниц результатов поиска по ключевым словам WePY. Судя по отзывам пользователей, одна из причин, по которой пользователи выбирают WePY, заключается в том, что WePY существует давно и экология относительно завершена.
Планирование WePY
существующая проблема
Основная проблема WePY заключается в том, что
-
Компиляция статического компонента
Проект WePY был сделан в спешке, и на запуск онлайн ушло около месяца. Сначала это было просто для решения проблемы компонентизации. Поэтому он принимает схему компиляции статических компонентов.При компиляции компонентов он напрямую заменяет компоненты, которые я написал статически, внедряет написанные мной компоненты в страницу и делает некоторые вещи, связанные с изоляцией. Это приводит к серьезным ошибкам в динамическом повторе. Это конструктивный недостаток, который необходимо срочно устранить.
-
разбор
При синтаксическом анализе xml используется проблемная библиотека, которая часто вызывает ошибки при синтаксическом анализе xml. Дизайн синтаксического анализа js изначально не рассматривал синтаксический анализ синтаксических деревьев, а анализировал с помощью регулярных выражений. Поскольку в настоящее время задействованы только синтаксический анализ и внедрение синтаксиса, реализация относительно проста, поэтому синтаксическое дерево AST не рассматривается для синтаксического анализа, что приводит к ошибкам при синтаксическом анализе некоторых кодов, которые пользователи пишут не в соответствии со спецификацией.
-
Vue Грамматика класс
Судя по отзывам пользователя, люди предпочитают использовать синтаксис Vue, а не Vue-подобный синтаксис. Есть еще некоторые различия между двумя.
-
Оптимизация производительности привязки данных
Во время привязки данных были выполнены некоторые оптимизации и обработка. Но эти оптимизации и обработка выполняются через грязные данные, помогая пользователям уменьшить количество setDate s. Но, глядя на это позже, все еще есть место для оптимизации.
-
механизм обработки ошибок
В настоящее время обработка ошибок WePY относительно проста, и не существует общего механизма обработки ошибок. Трудно отследить и локализовать ошибки, о которых сообщают пользователи при использовании и компиляции. Позже я надеюсь, что смогу найти файл ошибки и код, когда будет сообщено об ошибке.
-
покрытие тестовым случаем
Библиотека Wepy Core в настоящее время является только тестом охвата. CLI Часть комплекса не выполнила охват теста. Это привело к текущим проблемам наиболее актуальны и CLI. В следующей версии будет полностью покрыта тестовыми случаями.
компилировать
На картинке выше показано сравнение части компиляции версии 2.0. Слева компиляция 1.0, справа то, что делает 2.0. Как упоминалось ранее, компиляция версии 1.0 заключается в помещении файла .wpy в интерфейс командной строки для компиляции. Сам CLI включает в себя компиляторы и плагины. В 2.0 компиляция файлов изменена на компиляцию записей.От записи App зависимости автоматически разрешаются через CLI.В CLI есть только плагины, и все основные функции будут реализованы через плагины. В дополнение к файлу апплета, окончательный сгенерированный файл поставщика (файл поставщика означает, что все пакеты npm будут упакованы в этот файл), файлы ресурсов и файлы модулей, на которые ссылаются сами по себе.
плагин
Основная часть компиляции — это компиляция подключаемого модуля, выполняемая с помощью Webpack. Понятие плагина относится к рисунку, который я сделал выше: доска закреплена, на доске есть фиксированное количество крючков, и на каждый крючок можно повесить разные вещи. Неясно, что ставит каждый крючок, но каждый крючок может выполнять разные функции. Мне нужно только указать процесс компиляции и реализовать весь процесс компиляции, написав разное содержимое в хук. Таким образом, весь процесс компиляции выглядит следующим образом: инициализация конфигурации ➡️ компиляция ядра ➡️ выходной файл.
Плагин может обеспечить более высокую расширяемость и возможность повторного использования. Все основные функции зависят от плагинов. Когда пользователи считают, что определенная функция им не подходит, они могут самостоятельно написать плагин для замены основной функции. Пользователи могут изменять любую часть компиляции.
привязка данных v1
v1 привязка данных: глубокая копия данных для резервного копирования данных во время инициализации. Каждый процесс имеет предустановленное действие применения, например событие щелчка. Событие щелчка изменяет данные, а затем входит в процесс применения. В процессе применения выполняется глубокое сравнение для получения грязных данных, и грязные данные, наконец, поступают в установитьдату.
Справа относительно простая и понятная картинка: Сяомин модифицирует файл B, чтобы получить B+, а учитель сравнивает B+ с B, чтобы получить измененные данные. Это синхронный процесс. Когда Сяомин просит Сяохуна изменить файл C, если учителя больше нет, Сяохун должен попросить учителя сравнить файл C. То есть вручную вызвать процесс применения.
привязка данных v2
2.0 использует механизм привязки данных Vue. Наблюдатель рендеринга создается при инициализации, а наблюдатели добавляются при инициализации каждых данных. При изменении данных запишите измененный ключ-путь и добавьте его в очередь, все действия по изменению будут запускать Watcher. Очередь будет очищена в течение времени nextTick, а setDate будет выполнен в Render Watcher. Ссылка setDate выполняет setDate в соответствии с записанным ключевым путем.
По сравнению с историей Сяомина и его учителя: Сяомин возьмет на себя инициативу записи измененного контента и инициирует уведомление при изменении файлов.Метод работы Сяохуна такой же, как у Сяомина. Когда учитель получает уведомление, в соответствии с записями об изменениях Xiaoming и Xiaohong выполняется обработка setDate для измененного контента.
Этот метод оптимизации не требует ручного вызова приложения и не должен заботиться об асинхронном процессе.
качественный
Вторая версия будет использоваться сначала во внутренних проектах, и не будет проблем после внутренней практики перед открытым исходным кодом. Кроме того, покрытие тестовых случаев версии 2.0 должно быть полностью покрыто.
Обмен опытом с открытым исходным кодом
Технические характеристики
Как обеспечить качество проектов с открытым исходным кодом?
Во-первых, это спецификация документа. Раздел Readme должен кратко объяснить, что может сделать проект, и простой пример того, как начать проект. Ридми должен быть кратким, каждый может сразу увидеть, что он хочет.
Второй - КИ. Поставьте соответствующий статус в Readme, чтобы разработчики могли с большим спокойствием пользоваться проектом.
Третье — лицензия.
Есть также документация для участников, спецификации кода, спецификации Git и т. д.
Mocha и Istanbul использовались для тестирования, TravisCI для интеграции и npm и lerna для развертывания.
Продвижение и эксплуатация
Что касается продвижения и работы, мы в основном полагаемся на себя в публикации статей и размещении внешних ссылок. Кроме того, я размещал собственные статьи на официальном аккаунте и в группе WeChat. Группа WeChat сделала робота и поместила его в групповой код.
Мониторинг документов также осуществляется.После того, как официальный документ изменен, я могу сразу узнать, что было изменено в официальном документе. Помимо отчетов по мониторингу, я каждый день буду отправлять в свой WeChat информацию о том, сколько звезд и сколько проблем у проекта сегодня.
пост-техническое обслуживание
Пост-техническое обслуживание — это в основном документация, выпуск, PR и новое плановое обслуживание. На картинке справа серая часть — это проблема, которую я не пометил. Закрытая проблема ниже — это проблема, которую я обрабатывал в соответствующий момент времени.Если она не закрыта, это означает, что проблема все еще обрабатывается.
В настоящее время Wepy 2.0 в настоящее время находится на бета-этапе, конец октября будет выпущена бета-версия.