Разработка небольших программ: использовать собственный или дополнительный фреймворк (wepy/mpvue/uni-app/taro)?

uni-app

поскольку2017-1-9С момента появления мини-программ WeChat, после более чем двух лет последовательных обновлений, были запущены миллионы мини-программ, которые стали четвертой основной технологией разработки после Web, iOS и Android.

Напротив, развитие и экология апплета также находятся на подъеме, развиваясь на основе оригинальной нативной разработки WeChat.wepy,mpvue,taro,uni-appДругие фреймворки появлялись один за другим, эволюционируя от подсечно-огневого земледелия к современному развитию, а экология становилась все более изобилующей.

При наличии большего выбора возникает вопрос: для разработки небольших программ следует ли нам использовать собственные или трехсторонние фреймворки?

Прежде всего, слоты нативной разработки WeChat в основном сосредоточены следующим образом:

  1. Нативная разработка имеет плохую поддержку Node, прекомпилятора и веб-пакета, что влияет на эффективность разработки и процесс построения проекта.
  2. WeChat определяет невзрачную грамматику, лучше изучить vue и серьезно реагировать, и научиться быть универсальным, а не только для апплета WeChat.
  3. В экосистеме vue/react слишком много периферийных инструментов, которые могут повысить эффективность разработки, таких как IDE, валидаторы и сторонние библиотеки. . .
  4. WeChat IDE действительно не так проста в использовании по сравнению с профессиональными редакторами.

При этом у разработчиков всегда возникают различные опасения по поводу трехстороннего фреймворка:

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

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

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

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

Другими словами: если оценка должна быть реальной, усилия должны быть приложены глубоко!

uni-appКоманде потребовалось 2 недели, чтобы завершить этот отчет, и они настояли на ежеквартальном обновлении этого отчета об оценке. Текущее время обновления — май 2019 года.

Эта статья из面向用户、面向开发者Два основных измерения и семь основных деталей для оригинального и основного WeChat.wepy,mpvue,taro,uni-appСреда разработки сравнивается по горизонтали, чтобы предоставить разработчикам справочную идею при выборе структуры апплета. Основываясь на общедоступных данных и реальных тестовых данных, которые можно собрать на официальном сайте каждого фреймворка, в этой статье мы надеемся объективно и справедливо оценить статус, преимущества и недостатки каждого фреймворка. Однако из-за интересов мнения об этой статье, вероятно, будут предвзятыми, и вы можете взглянуть на нее критически.Если вы обнаружите какое-либо искажение в оценке в этой статье, вы можете сообщить об этом здесь.issuse.

面向用户、面向开发者размеры, в том числе:

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

1. Пользователь

1.1 Реализация функции

Основная цель разработки программного обеспечения — предоставить пользователям полные замкнутые бизнес-функции.

В веб-разработке, если использование фреймворков, таких как vue и react, не позволяет разработчикам использовать все API, предоставляемые браузером, такие фреймворки определенно незрелые. То же самое относится и к разработке апплетов: никакая среда разработки не может ограничивать базовые вызовы API.

Нижний уровень различных бизнес-функций опирается на компоненты и интерфейсы, предоставляемые WeChat (компоненты и спецификации API, представленные на официальном веб-сайте WeChat, то есть нативный API WeChat), а трехсторонняя структура представляет собой вторичную инкапсуляцию на основе нативного WeChat. Вопрос: Мини-программы постоянно итеративно обновляются. Что делать, если бизнес зависит от последней версии API мини-программы, но трехсторонняя структура не инкапсулирована?

На самом деле, как и vue и react для веб-разработки, браузер имеет новый API, который не требует обновления vue и react. Все фреймворки в этом обзоре не будут ограничивать разработчиков в вызове базовых возможностей. Причины подробно описаны здесь:

  • wepy: нет вторичной инкапсуляции API апплета, API по-прежнему использует собственный WeChat, фреймворк не имеет ничего общего с тем, добавляет ли апплет WeChat API или нет
  • mpvue: без ограничений поддерживает все нативные компоненты и API-интерфейсы WeChat. При этом фреймворк инкапсулирует собственный кросс-энд API, который используется аналогичным образомmpvue.request()
  • Таро: поддерживает все нативные компоненты и API-интерфейсы WeChat без ограничений. При этом фреймворк инкапсулирует собственный кросс-энд API, который используется аналогичным образомTaro.request(),служба поддержкиКод Таро, смешанный с кодом апплета, вы можете вызвать новый API апплета, который не был инкапсулирован фреймворком, путем смешивания
  • uni-app: без ограничений поддерживает все нативные компоненты и API-интерфейсы WeChat. С точки зрения кросс-энда, даже если вы все еще используете нативные компоненты и API WeChat, вы можете напрямую скомпилировать их в приложение, H5, Alipay Baidu Toutiao и другие небольшие программы. Однако для четкого управления рекомендуется использовать однопакетный API, аналогичныйuni.request(). Также поддерживаетУсловная компиляция, вы можете свободно вызывать новые API и компоненты каждой платформы в блоке кода условной компиляции.

Примечание. Приведенный выше порядок отсортирован в соответствии с порядком рождения каждого фреймворка, то же самое показано ниже.

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

Разница, однако, заключается в опыте исполнения.

1.2 Опыт работы

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

Для объективного сравнения мы специально построили тестовую модель, детали таковы:

  • Контент для разработки: разработка сложного длинного списка, имитирующего домашнюю страницу апплета Weibo, поддержка всплывающего обновления, переворачивания страниц и т. д.

  • Интерфейс выглядит следующим образом:

  • Версия для разработчиков: всего было разработано 5 версий, включая нативную версию WeChat, версию wepy, версию mpvue, версию таро и версию uni-app.cliОн установлен по умолчанию.

  • Тестовый код с открытым исходным кодом (Адрес репозитория Github: https://github.com/dcloudio/test-framework),Советы. Если некоторые учащиеся считают, что код теста написан неправильно, отправьте PR илиIssus

  • Тестовые модели: Redmi 6 Pro, стабильная версия MIUI 10.2.2.0 (последняя версия), WeChat версии 7.0.3 (последняя версия)

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

Мы возьмем приведенный выше имитационный апплет Weibo в качестве примера, чтобы проверить два момента, которые склонны к проблемам с производительностью: загрузка длинного списка и ответ большого количества лайков компонентов.

1.2.1 Загрузка длинного списка

Список имитации Weibo — это список со многими компонентами, такой сложный список оказывает большее давление на производительность и очень подходит для тестирования производительности.

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

  • Время начала синхронизации: событие взаимодействия запускается до назначения кадра, например: начало функции загрузки подтягивания (onReachBottom)
  • Время окончания времени: рендеринг страницы завершен (начало функции обратного вызова WeChat setData)

Советы:setDataНачало функции обратного вызова можно считать моментом завершения рендеринга страницы, т.к. WeChatsetDataопределяется следующим образом (Спецификация WeChat):

Метод тестирования: начиная с пустого списка на странице, программа автоматически запускает подтягивающую загрузку, каждый раз добавляя 20 списков и записывая время, затрачиваемое за один раз; запуская N раз подтягивающей загрузки непрерывно при фиксированной интервалы, чтобы страница достигла 20 * N списков. Рассчитайте среднее время, затрачиваемое с момента запуска подтягивания до завершения рендеринга.

Результаты теста следующие:

Описание: Возьмем в качестве примера список из 400 микроблогов, начиная с пустого списка на странице, запуская подтягивающую загрузку каждую 1 секунду (добавляется 20 новых микроблогов), записывайте время, затрачиваемое на один раз, и останавливайтесь. после запуска 20 раз (страница достигает 400 Weibo), посчитайте среднее время этих 20 раз, и в результате получится, что WeChat является нативным в эти 20 раз.触发上拉 -> 渲染完成Среднее время — 876 миллисекунд, самое быстроеuni-appсоставляет 741 мс, самый медленныйmpvueсоставляет 4493 мс

При первом взгляде на эти данные вы можете растеряться, не волнуйтесь, ниже есть подробная инструкция.

Объяснение 1: Почему данные теста mpvue/wepy неполные?

mpvue,wepyВ начале своего рождения мини-программы WeChat не поддерживалипользовательский компонент, разработка компонента не может быть выполнена;mpvue,wepyДля решения этой проблемы пользователь написалVueкомпонент, скомпилированный какWXMLсерединашаблон, замаскированный для достижения возможностей разработки компонентов и улучшения возможности повторного использования кода, что является отличным техническим решением в технических условиях того времени.

Однако в этой схеме, когда страница сложная и много компонентов, количество DOM-узлов на странице будет сильно увеличено, даже превысив лимит количества DOM-узлов в WeChat. Мы измеряли на Redmi 6 Pro, когда компонентов страницы более 500,mpvue,wepyРеализованное имитационное приложение Weibo сообщит о следующем исключении и прекратит рендеринг.Поэтому, когда эти две тестовые среды имеют много компонентов, тестовые данные будут неполными. Это также означает, что эти 2 фреймворка нельзя использовать, когда компонентов страницы слишком много.

dom limit exceeded please check if there's any mistake you've made

Советы1:wepyОфициальный сайтCHANGELOG, упомянул, что в тестовой версии v1.7.2 добавлена ​​поддержка родных компонентов апплета.В реальном тесте много ям.Поскольку это бета-версия, официальная также заявила, что это не рекомендуется в вопросе, согласно официальная документация сайта, версия по умолчанию v1.7, нативные компоненты не поддерживаются

Советы2:wepyПочему в списке из 400 элементов производительность выше, чем у собственной платформы WeChat? Это связано с накладными расходами на управление пользовательскими компонентами и бизнес-сценариями (wepyСкомпилировано в шаблон, не требует накладных расходов на создание компонентов и управление), а затем, как и Weibo, когда задействована передача данных компонентов, раскрываются преимущества производительности нативной платформы WeChat. Подробности см. в тестовых данных ниже.

Примечание 2. Почему тестовые данные показывают, что производительность uni-app немного выше, чем у собственной платформы WeChat?

На самом деле, когда на странице 200 записей (200 компонентов),taroДанные о производительности также лучше, чем у родной платформы WeChat.

Нативная структура WeChat отнимает много времени в основном вsetDataПри вызове, если разработчик не проводит оптимизацию отдельно, каждый раз будет передаваться большой объем данных;uni-app,taroзвонятsetDataсделать это автоматически передdiffВычислить, каждый раз передавая только измененные данные.

Например, текущая страница содержит фрагменты данных 20. Когда срабатывает подтягивающая загрузка, вновь загружаются фрагменты данных 20. В это время, когда собственный фреймворк проходит следующий тест кода,setDataбудет передано 40 единиц данных

data: {
    listData: []
},
onReachBottom() { //上拉加载
    let listData = this.data.listData;
    listData.push(...Api.getNews());//新增数据
    this.setData({
        listData
    }) //全量数据,发送数据到视图层
}

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

data: {
    listData: []
},
onReachBottom() { //上拉加载
    // 通过长度获取下一次渲染的索引
    let index = this.data.listData.length;
    let newData = {}; //新变更数据
    Api.getNews().forEach((item) => {
        newData['listData[' + (index++) + ']'] = item //赋值,索引递增
    }) 
    this.setData(newData) //增量数据,发送数据到视图层
}

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

Из результатов тестирования видно, что после ручной оптимизации разработчиками нативный фреймворк WeChat может добиться лучшей производительности, ноuni-app,taroПо сравнению с нативным WeChat разрыв в производительности невелик.

Этот результат аналогичен веб-разработке, которая также включает нативную разработку js, vue и фреймворки для реагирования. Если не проводить специальную оптимизацию, производительность веб-страниц, написанных на нативном js, зачастую не так хороша, как у фреймворков vue и react.

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

Сложный длинный список загрузки следующей страницы вывод оценки:微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > wepy > mpvue

Советы: некоторые люди думают, что uni-app и mpvue — это одно и то же.В первые дни uni-app действительно использовал mpvue, но он был переработан из-за проблем с производительностью и поддержкой синтаксиса vue.

1.2.2 Скорость отклика подобных компонентов

Для компонента в длинном списке, такого как похожий компонент, могут ли состояния «не нравится» и «нравится» изменяться во времени при нажатии? является оценочной точкой этого теста.

Метод испытания:

  • Выберите микроблог и нажмите кнопку «Нравится», чтобы переключить статус «Нравится» (понравилось выделено, не понравилось серым),
  • Нравится кнопкаonclickФункция начинает считать в начале,setDataФункция обратного вызова запускает и заканчивает отсчет времени;

Проведите несколько тестов на Redmi 6 Pro и найдите среднее значение, результаты следующие:

Примечание. То есть, когда количество списков равно 400, требуется 111 миллисекунд, чтобы кнопка «Нравится» изменилась от щелчка до состояния приложения, изначально разработанного WeChat.

Описание данных результатов теста:

  • Причина, по которой тестовые данные wepy/mpvue неполны, та же, что и выше: когда компонентов много, страница перестает отображаться.
  • Фреймворк для разработки компонентов, основанный на пользовательских компонентах WeChat (uni-app/taro), производительность передачи данных компонента близка к родному фреймворку WeChat, намного выше, чем на основеtemplateПроизводительность фреймворка (wepy/mpvue) для разработки компонентов

Оценка производительности обновления данных компонента:微信原生开发,uni-app,taro > wepy > mpvue

Подводя итог, этот тест производительности провел 2 теста, загрузку длинного списка и обновление состояния компонента, синтезируя 2 эксперимента, выводы следующие:

微信原生开发手工优化,uni-app>微信原生开发未手工优化,taro > wepy > mpvue

2. Разработчик

Исходя из необходимости удовлетворения бизнес-потребностей пользователей, давайте поговорим о потребностях разработчиков и сравним их по следующим параметрам:

  • Плавная кривая обучения: простота и легкость в освоении, лучше всего повторно использовать существующий стек технологий, богатые учебные материалы
  • Опыт эффективной разработки: современный процесс front-end разработки, инженерная поддержка
  • Эффективная поддержка сообщества: если у вас возникнут проблемы, вы можете быстро обратиться за помощью
  • Активные итерации разработки: фреймворк активно обновляется и обновляется, и нет необходимости беспокоиться об остановке обновления.

2.1 Плавная кривая обучения

2.1.1 Поддержка синтаксиса DSL

Выбор DSL, с которым группа разработчиков знакома и с которым может быстро начать работу, является основным моментом выбора структуры команды.

Прежде всего, собственный синтаксис разработки WeChat, напримерReact, опять нравитсяVue, немного невзрачный.Для разработчиков это равносильно изучению нового набора грамматики, что значительно увеличивает стоимость обучения, что всеми подвергается критике.

Другие среды разработки в основном следуют синтаксису React и Vue (похожему на Vue), и их основная цель — повторно использовать существующие технологические стеки инженеров и снизить затраты на обучение. На этом этапе поддержка фреймворком грамматики исходного фреймворка (React/Vue) является важной мерой. стоимость слишком высока.

При фактической разработке обнаруживается, что каждая структура разработки не была полностью реализована.Vue,ReactВесь синтаксис в Интернете:

wepyСтиль разработки близок кVue.js,принадлежать类VueРеализация — это большой шаг вперед по сравнению с нативной разработкой WeChat, но по сравнению с полнойVueВ грамматике еще большой пробел, и ее правила нужно изучать отдельно в процессе разработки;

mpvue,uni-appкаркас, основанный наVue.jsядро, модифицируяVue.jsизruntimeа такжеcompiler, чтобы реализовать операцию на стороне апплета.mpvueПоддерживаемый синтаксис Vue немного меньше,uni-appВ основном поддерживается большинство синтаксисов vue, напримерfilter,сложныйJavaScriptвыражения и др.;

taroдляJSXПоддержка синтаксиса достигла идеального уровня, который поддерживается большинством из них.

Оценка поддержки синтаксиса DSL:taro,uni-app > mpvue > wepy> Нативный WeChat

2.1.2 Полнота учебных материалов

Полнота официальной документации, поиск проблем и демонстрационные образцы:

  • Собственный Wechat: обширная документация, точный поиск API, официальная демо-версия, поддержка запуска инструментов разработчика Wechat на официальном веб-сайте и предварительный просмотр эффекта запуска.смотрите подробности
  • WEPY: Документируйте только 2 страницы, без поиска, компонентного API и т. д. Документируйте непосредственно просмотр документа WeChat. Демонстрационного примера нет, многие конфигурации нужно угадывать.смотрите подробности
  • mpvue: Документов немного, но их концепции несложны.Документы, такие как API-интерфейсы компонентов, просматриваются непосредственно в документах WeChat, и сложность обучения невелика. Эффект поиска проблемы средний. Демонстрационный образец не предоставляется.смотрите подробности
  • Таро: Базовая документация завершена, ресурсов по конкретным проблемам немного, а эффект поиска проблемы средний.Демо-образец содержит только основные функции, и выпущена только часть WeChat.смотрите подробности
  • uni-app: Базовые документы и различные темы использования богаты содержанием, эффект поиска проблем хорош, демо-функция примера завершена, и она выпущена для 7-го конца онлайн.смотрите подробности

Преподавательские курсы:

Идеальная оценка данных обучения: WeChat Origin>uni-app > mpvue , taro > wepy

2.2 Современный опыт фронтенд-разработки

На уровне опыта разработки нативная разработка WeChat находится в явно невыгодном положении, основными пробелами являются:

  • Разработка фреймворка обеспечивает оптимизированную организацию кода (собственная разработка WeChat, страница состоит из 4 файлов, и при написании кода открывается слишком много вкладок).
  • Разработка фреймворка обеспечивает более мощные возможности компонентизации
  • Разработка фреймворка обеспечивает управление состоянием приложения (например, Vuex/Redux/Mobx и т. д.)
  • Разработка рамки может гибко поддерживать различные препроцессоры, такие как Sass
  • Разработка фреймворка обеспечивает полную поддержку синтаксиса ES Next.
  • Разработка фреймворка упрощает разработку пользовательских стратегий сборки

Поддерживаются другие среды разработки апплетов.cliрежим, который может быть разработан в основных интерфейсных инструментах, и в основном поставляется с библиотекой синтаксических подсказок d.ts.

из-заmpvue,uni-app,taroпрямая поддержкаvue,reactСинтаксис, цепочка вспомогательных инструментов IDE богата, раскрашивание, проверка и форматирование совершенны;wepyЧтобы быть слабее, есть некоторые плагины vscode, поддерживаемые третьими сторонами.

Хороший инструмент разработки, безусловно, может значительно улучшить процесс разработки.uni-app, его производственная компания также является производственной компанией HBuilder,DCloud.io. HBuilder — это четыре основных инструмента разработки переднего плана (сопоставимыеИндекс Байду), которыйuni-appБыло сделано много оптимизаций, поэтомуuni-appЭффективность разработки и простота использования находятся за пределами досягаемости других фреймворков.

Измерение опыта разработки, результаты сравнения:uni-app > taro,mpvue > wepy> Нативный WeChat

Здесь можно сделать вывод: если вам нужны инженерные возможности, просто забудьте о нативной разработке WeChat.

2.3 Эффективная поддержка сообщества

Обучение и развитие неизбежно столкнется с проблемами, очень важна официальная техническая поддержка и активность сообщества.

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

Комплексная оценка, этот оценочный вывод:微信原生 , uni-app > taro > mpvue > wepy

2.4 Активные итерации разработки

Разработчиков должен волновать один вопрос: долго ли поддерживается проект?

Эту проблему можно измерить и сравнить по таким показателям, как частота коммитов на github, журнал изменений продукта (changelog) и поисковый индекс Baidu.

github фиксирует частоту

Мы собрали апрель 2019 (время 4.1~4.30), а в master ветке каждого проекта на github указано количество дней фиксации, результаты такие:

Советы:

  • WeChat изначально имеет закрытый исходный код, и вы не можете видеть количество коммитов, но он поддерживает ритм обновления не реже одного раза в месяц.смотрите подробности
  • wepyВ ветке master нет фиксации, а в последней ветке 2.0.x есть только одна запись фиксации в апреле.

Из записи коммита,taro,uni-appнаходится в более активном состоянии обновления,wepy,mpvueОн относительно слаб и не поддерживается.

Журнал изменений продукта

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

Проверяем журнал обновлений (CHANGELOG) официальной ссылки каждого фреймворка отдельно, и вот адрес ссылки:

Путем сравнения журналов обновлений продукта, нативного WeChat,taro,uni-appТри часто обновляются, исправления ошибок и добавления новых функций находятся в относительно компактном состоянии;mpvue,wepyВерсии давно не было,wepyДаже официальная версия не выходит уже почти год, и разработчикам нужно быть осторожными в выборе моделей.

2.5 Мультиплексирование

С ростом популярности мини-программ WeChat Alipay, Baidu, ByteDance и другие компании также вошли в сферу мини-программ.Эти компании имеют более 100 миллионов активных пользователей в день и большое количество пользователей.Владельцы бизнеса надеются охватить каждого пользователя со своим бизнесом, независимо от того, в каком апплете находится пользователь.

Заявка передана программисту, что делать программисту? Правда ли, что каждая платформа везде перемещает кирпичи? В это время набор кодов и мультитерминальный релиз стали мечтой многих программистов, и появился кросстерминальный фреймворк небольших программ.

Реальность действительно так идеала? Может действительно понравиться официальный сайт рекламы, как каждая кросс-конечная структура для достижения развития один раз, опубликовать на всех платформе апплетов? И даже повторное использование кода платформы H5?

Мы говорим с фактами, по-прежнему используяИмитация приложения Weibo, опубликованные для каждой платформы по очереди, чтобы проверить совместимость каждой платформы на каждом конце, результаты следующие:

Описание результатов теста:

  • ⭕ означает поддержку и нормальную работу, ❌ означает не поддерживается, другие означают поддержку, но есть некоторые ошибки или проблемы с совместимостью

На этом простом примере мы видим, что вывод оценки кросс-эндовой поддержки:uni-app,taro > mpvue> 原生微信小程序,wepy

Однако только приведенный выше тест не является всеобъемлющим, а реальный бизнес намного сложнее, чем этот тестовый пример. Однако мы не можем разработать много сложных бизнесов для оценки, поэтому нам необходимо дополнить информацию по разным документам. Поскольку в документации каждой платформы описывается степень перекрестной поддержки различных компонентов и API. Мы просмотрели документы нескольких компаний и обнаружили, что каждая из них в основном брала апплет WeChat за основу, а затем реализовывала различные компоненты и API на другом конце:

  • taro: Конец H5 реализует большинство API микросообщений.
  • uni-app: Компоненты, API и конфигурации, большинство из которых были реализованы со всех сторон, а некоторые API имеют инструкции о том, что они не поддерживаются на некоторых сторонах. Как можно увидеть в Uni-App, является полным H5 End Emulator реализует набор WECHAT

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

  • taro: Предоставляет многоконечные файлы для оценки переменных среды js и унифицированный интерфейс, который может расширять многоконечность в компонентах, js и файлах и не поддерживает обработку подплатформы в других ссылках.
  • uni-app: Предоставляет модель условной компиляции.Все коды, включая компоненты, js, css, конфигурацию json, файлы и каталоги, поддерживают условную компиляцию и могут писать разный код на разных концах без ограничений.

Кросс-конечная структура также включает в себя кросс-конечную проблему пользовательского интерфейса.Результаты оценки следующие:

  • taro: Официально предоставленоtaro ui, поддерживает только апплет WeChat и конец H5, не поддерживает приложение,смотрите подробности
  • uni-app: Официально предоставленоuni ui, может работать со всех сторон; uni-app также имеет рынок плагинов, который содержит множество сторонних компонентов пользовательского интерфейса,смотрите подробности

Наконец, добавьте перекрестный случай:

  • mpvue: Терминальные случаи Wechat богаты, но других терминальных случаев замечено не было.
  • Таро: Есть много кейсов на WeChat, а также несколько кейсов на Baidu, Alipay и H5.
  • uni-app: Богатые мультитерминальные кейсы, официальные примеры были выпущены для 7 терминалов (включая сторону приложения)

На основании вышеизложенной информации окончательный вывод об оценке по этому пункту выглядит следующим образом:uni-app > taro > mpvue > 原生微信小程序,wepy

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

Эпилог

Что истинно и объективно, так это всегда эксперименты и данные, а не выводы. Разработчики с разными потребностями могут сделать собственные выводы на основе приведенных выше экспериментальных данных.

Но в качестве полного обзора мы также должны предоставить резюме, хотя оно может добавить к нашим субъективным ощущениям:

Если вы разрабатываете только мини-программы WeChat и не делаете мультиэнд, то используйтеuni-app,taroЭто лучший выбор. Они эквивалентны vue и react в веб-мире. С этими инструментами больше нет необходимости использовать нативную разработку wxml.

  • Если вы настаиваете на нативной разработке WeChat, вам нужно обратить внимание на ручное написание оптимизированного кода для управленияsetdata, и учтите, что его инженерные возможности очень слабы
  • Что, если выreactДепартамент, затем используйтеtaro
  • еслиvueДепартамент, затем используйтеuni-app,uni-appБольше преимуществ в производительности, окружающей среде и эффективности разработки

Если вы разрабатываете мультитерминал,uni-appа такжеtaroВы можете выбирать в соответствии со знакомым вам стеком технологий.uni-appМногоконечная зрелость выше.

Если читатели считают, что какая-либо оценка в этой статье искажена, сообщите об этом здесь.issuse.