Чем лучше использовать uni-app для разработки небольших программ, чем разрабатывать небольшие программы напрямую?

uni-app

Нативная разработка небольших программ имеет много недостатков:

  1. Нативная разработка wxml имеет плохую поддержку Node, прекомпилятора и веб-пакета, что влияет на эффективность разработки и процесс построения проекта. Поэтому крупные компании будут использовать фреймворк для разработки
  2. Синтаксис, определенный WeChat, такой как wxml, wxs и wx:if, слишком приватизирован. Лучше серьезно изучить Vue и научиться использовать его во всем мире, а не только для апплета WeChat.
  3. В экосистеме vue слишком много периферийных инструментов, которые могут повысить эффективность разработки, таких как IDE, валидаторы и сторонние библиотеки. . . По сравнению с профессиональными редакторами, инструменты разработчика WeChat действительно непросты в использовании, и персонализированных настроек очень мало.

Как инженер-интерфейс, в дополнение к мини-программам WECHAT, нам также нужно разработать веб-сайты, другие мини-программы и даже приложения. Люди не любят переключать инструменты разработки взад и вперед и изменить способ, которым они думают о грамматике Отказ

uni-app, естественно, может решить эти проблемы, но у разработчиков часто возникают некоторые проблемы:

  1. Боюсь, что после использования uni-app некоторые функции в апплете WeChat не могут быть реализованы, при условии обновления uni-app
  2. Боюсь, что производительность не так хороша, как нативный WXML
  3. Боишься, что рамки незрелые, прыгай в яму
  4. Обеспокоен тем, что экология сообщества не идеальна

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

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

Наиболее часто задаваемый вопрос разработчиками: если апплет многократно обновляется и добавляется пакет API, ноuni-appФреймворк не обновляется вовремя, что делать?

На самом деле это недоразумение.uni-appНет ограничений на базовые вызовы API; на стороне апплетаuni-appПоддерживает прямое написание собственного кода WeChat.

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

Поэтому, если есть какие-то API (зависящие от платформы или новые API),uni-appЕще не упаковано, разработчики могут напрямуюuni-appНапишите собственный API WeChat, то есть различные API, начинающиеся с wx.

Например, в настоящее времяuni-appХотя компонент кроссплатформенной рекламы (рекламы) еще не инкапсулирован, разработчики по-прежнему могут использовать WeChat на стороне апплета.<ad>Компонент для отображения рекламы, пример кода выглядит следующим образом:

 <view>
    <view class="title">微信官方banner广告</view>
    <view style="min-height: 50px;">
        <!-- uni-app尚未封装，但可直接使用微信原生的ad组件-->
        <ad unit-id="adunit-01b7axxxbf53d74e"></ad>
    </view>
    <view class="title">微信官方视频广告</view>
    <view style="min-height: 50px;">
        <!-- uni-app尚未封装，但可直接使用微信原生的ad组件-->
        <ad unit-id="adunit-9f340xxx64533" ad-type="video" ad-theme="white"></ad>
    </view>
</view>

Эффект работы апплета следующий:

Включая сложные варианты использования, такие как пользовательские компоненты апплета WeChat, WXS и облачную разработку, он полностью поддерживается в uni-app.

Итак, вывод такой: используйтеuni-appРазработка фреймворка ничем не отличается от разработки нативного апплета с точки зрения функциональности, и ограничений не будет.

2. Опыт выступления

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

Это тоже беспокойство,uni-appЭто не приведет к загрузке производительности и даже автоматически оптимизирует многие ссылки.Во многих сценариях производительность лучше, чем нативная разработка WeChat.

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

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

использоватьuni-app, базовое автоматическое дифференциальное обновление данных, простота и высокая производительность.

Мы подробно объясняем, исходя из двух измерений теории оптимизации и измеренных данных.

2.1 Теория: схема оптимизации фреймворка

Чтобы улучшить производительность, апплет проделал большую работу на уровне архитектурного дизайна:

  • Слой логики и слой представления разделены, чтобы операции JS не блокировали отрисовку представления.
  • Определите теги компонентов (wxml) отдельно, чтобы уменьшить сложность DOM.
  • Уменьшенные стили (wxss) для улучшения производительности рендеринга
  • Нативизация сложных компонентов (видео/карта и т. д.) для устранения недостатка функциональности/опыта веб-компонентов

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

Вот краткое введение в официальное описание WeChat.setDataПринцип работы позади:

Уровень представления апплета в настоящее время использует WebView в качестве носителя рендеринга, а уровень логики использует независимый JavascriptCore в качестве рабочей среды. Архитектурно и WebView, и JavascriptCore являются независимыми модулями и не имеют каналов для прямого обмена данными. В настоящее время передача данных между уровнем представления и уровнем логики фактически реализована с помощью EvaluateJavascript, предоставляемого с обеих сторон.

Чтобы упростить разработку, WeChat будетevaluateJavascriptВызов инкапсулируется какsetDataМетод JS реализует передачу данных между уровнем представления и уровнем логики.Схема потока данных выглядит следующим образом:

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

К счастью,uni-appОптимизация есть на обоих фронтах.

2.1.1 Уменьшить данные доставки SetData

a,b,c,d), теперь добавьте 4 новых элемента списка в конец списка (e,f,g,h), мы пишем код в нативном режиме WeChat и режиме uni-app соответственно.

Собственный код мини-программы:

page({
    data:{
        list:['a','b','c','d']
    },
    change:function(){
        let newData = ['e','f','g','h'];
        this.data.list.push(...newData);
        this.setData({
            list:this.data.list
        })
    }
})

Как и выше, собственный код WeChat,changeКогда метод выполнится, онlistсерединаa,b,c,d,e,f,g,hПройдено 8 пунктов спискаsetDataВсе передано.

код универсального приложения:

export default{
    data(){
        return {
            list:['a','b','c','d']
        }
    },
    methods:{
        change:function(){
            let newData = ['e','f','g','h'];
            this.list.push(...newData)
        }
    }
}

как указано вышеuni-appкод,changeКогда метод выполняется, толькоlistсерединаe,f,g,h4 новых элемента списка перенесены в прошлое и реализованыsetDataПредельное упрощение объема передачи.

uni-appРисование библиотеки JSON Diff westore, вызовsetDataПрежде исторические данные будут сравниваться, а измененные дифференциальные данные будут рассчитаны точно и эффективно, а затем вызваныsetDataТолько изменения в передаче данных, таким образом достигая setData, минимизируют объем передачи данных, существенно увеличивая производительность связи.

Советы: возможно, некоторые учащиеся не заинтересованы в переносе данных изa,b,c,d,e,f,g,h8 элементов списка, оптимизированных дляe,f,g,h4 элемента списка, я так не думаю, но напоминаем вам не недооценивать этот механизм, выше это всего лишь демонстрационный пример.

  • В реальном сценарии списка каждый элемент списка может содержать различную информацию, такую ​​как миниатюра, заголовок, сводка, время и т. д., и данные каждого элемента списка будут больше (при условии, что 1 КБ);
  • Предполагая, что текущая страница имеет 20 элементов списка, после подтягивания 4 раза подряд страница становится 100 записей; если страница снова подтягивается, ситуация будет другой, когда страница становится 120 записей
  • Приведенный выше собственный метод WeChat переносит все 120 данных записи (120 КБ) в прошлое.
  • Вышеупомянутый режим единого приложения будет передавать только 20 новых добавленных записей (101 ~ 120) данных записи (20 КБ), а объем данных составляет 1/6 от исходного метода!
  • Чем больше данных элемента списка страниц, тем больше разница.Когда на странице 200 записей, объем данных, передаваемых uni-app, станет 1/10 от исходного объема передачи данных WeChat!

2.1.2 Уменьшить частоту вызовов setData

Предположим, нам нужно изменить значения нескольких переменных, мы пишем код в двух режимах: WeChat native и uni-app.

Собственный код мини-программы:

change:function(){
    this.setData({a:1});
    this.setData({b:2});
    this.setData({c:3});
    this.setData({d:4});
}

Четыре вызова, как указано вышеsetData, это приведет к 4 логическим уровням, обмен данными уровня просмотра

код универсального приложения:

change:function(){
    this.a = 1;
    this.b = 2;
    this.c = 3;
    this.d = 4;
}

как указано вышеuni-appкод, который в конечном итоге будет объединен в{"a":1,"b":2,"c":3,"d":4}часть данных, затем вызывается только один разsetDataЗавершите все передачи данных, резко сокративsetDataчастота звонков.

uni-appПричина этого преимущества заключается в том, что универсальное приложение глубоко настраивается на основе среды выполнения Vue и использует механизм Vue nextTick.

2.2 Измерено: данные сравнения производительности

С помощью приведенного выше теоретического анализа мы затем проводим измерения реальной машины и используем данные для сравнения.

Тестовая модель выглядит следующим образом:

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

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

  • Версия для разработчиков: используйте нативное приложение WeChat и универсальное приложение для разработки двух наборов кодов соответственно.cliОн установлен по умолчанию.

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

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

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

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

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

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

поле Типы Необходимый описывать
data Object да Данные, которые будут изменены на этот раз
callback Function нет Обновление пользовательского интерфейса, вызванное setDataВизуализированофункция обратного вызова после

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

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

количество списков Нативный WeChat uni-app
200 770 641
400 876 741
600 1111 910
800 1406 1113
1000 1690 1321

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

Эти данные могут противоречить интуитивным предположениям многих людей: производительность уни-приложения даже лучше, чем у оригинального WeChat!

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

Используя нативный фреймворк 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 (до оптимизации) Собственный фреймворк WeChat (после оптимизации) uni-app
200 770 572 641
400 876 688 741
600 1111 855 910
800 1406 1055 1113
1000 1690 1260 1321

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

Однако нативная разработка требует, чтобы разработчики были знакомы с механизмом связи небольших программ, сознательно писали коды и упрощали данные; uni-app автоматически обрабатывает их, что, естественно, не вызывает беспокойства.

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

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

Через теоретический анализ и измерение данных оптимизации производительности в этой главе мы можем выводить такой вывод:

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

3. Экология сообщества

3.1 Периферийные колеса

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

Апплет WeChat все еще имеет окружающую среду, в то время как экология нескольких других апплетных платформ не установлена.

uni-appОкружающая экология очень богата, а на рынке плагинов около 800. Подробнее см.ext.dcloud.net.cn.

первыйuni-appСовместимость с экологией небольших программ позволяет напрямую вводить и использовать различные пользовательские компоненты. на основе,uni-appРынок плагинов, есть более важные компоненты, одновременное использование многоквартирных и превосходных характеристик.

Это делаетuni-appЭкосистема стала самой богатой экосистемой разработки апплетов.

Такие как синтаксический анализ форматированного текста, диаграммы и другие компоненты,uni-appПроизводительность подключаемых модулей превышает производительность компонентов апплета WeChat, таких как wxparse и wx-echart.

Если разработчикам нужны многофункциональные и высокопроизводительные компоненты, они должны использоватьuni-app, вместо разработки собственного апплета.

3.2 Активные группы и форумы QQ/WeChat

uni-appОфициально существует 70 коммуникационных групп разработчиков QQ/WeChat (в основном 2000 человек, почти 100 000 разработчиков) и более трехсторонних групп.

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

uni-appТрехстороннее обучение активно, Tencent Classroom официально выпустила курсы для uni-app, а на различных обучающих веб-сайтах повсюду можно увидеть бесплатные или платные обучающие видеоуроки по uni-app.

4. Порог обучения и опыт развития

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

uni-appЭто более удобно для разработчиков, короче говоря, это синтаксис vue + API апплета.

следуетVue.jsСпецификация синтаксиса, компоненты и API для подражания微信小程序命名, они относятся к общему стеку технологий, и их изучение обязательно для фронтенда,uni-appСуществует не так много дополнительных затрат на обучение.

Разработчики, имеющие некоторый опыт разработки апплетов Vue.js и WeChat, могут быстро приступить к работе.uni-app.

Учащимся, которые не изучили vue, не нужно осваивать весь vue, им нужно только понять базовый синтаксис vue, привязку данных, рендеринг списка, компоненты и т. д. другие, такие как маршрутизация, загрузчик, cli, node.js и webpack не нужно изучать.

Поскольку инструмент HBuilderX связан сuni-appБестерминальная разработка, визуальное создание проектов, визуальная установка компонентов и расширенных компиляторов, т.е.uni-appПорог обучения ниже, чем у vue.js для веб-разработки.

На уровне опыта разработки по сравнению с нативной разработкой WeChatuni-appСуществует большой разрыв, в основном отраженный в:

  • Более мощные возможности разработки компонентов: разработка компонентов Vue намного лучше, чем опыт разработки пользовательских компонентов небольших программ.
  • Управление состоянием приложения: uni-app поддерживает vuex
  • Используйте препроцессоры CSS, такие как Sass
  • Полная поддержка синтаксиса ES Next
  • индивидуальная стратегия сборки

Размер средства разработки, разрыв еще больше:

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

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

5. Будущая масштабируемость

Хотя текущий продукт требуется только для выпуска апплета WeChat, если однажды босс и иностранный монах закончили пить кофе и повернулись и попросили покрыть различные платформы апплета, такие как Ali, Baidu, ByteDance и т. д. Что что должны делать программисты в это время?

Правда ли, что каждая платформа везде перемещает кирпичи?

В настоящее время,uni-apКросс-энд функция станет артефактом самопомощи программиста, основанным наuni-appРазработанные мини-программы можно одновременно публиковать в нескольких мини-программах, даже на платформах App и H5, без модификации. Это не сон, а реальность. Вы можете сканировать следующие 8 QR-кодов по очереди, чтобы испытать наиболее полный кроссплатформенный эффект! .

6. Заключение

uni-app WeChat
Функция такой же такой же
представление Общая сцена лучше Необходимо самостоятельно написать сложный код для повышения производительности
Экология сообщества Богатые, более высокопроизводительные компоненты богатый
опыт разработки Чистый опыт vue, эффективный и унифицированный; сильные инженерные способности Грамматическая приватизация; слабые инженерные возможности
Возможность работы с несколькими терминалами В то же время он поддерживает H5, несколько мини-программ и кроссплатформенные приложения. Может использоваться только для апплета WeChat

Вывод: разрабатывайте только мини-программы WeChat, а также используйтеuni-app

Категории