Мини-приложение DevTools

Теперь, когда я рассмотрел мини-приложения как таковые , я хочу сосредоточиться на опыте разработчиков для различных платформ суперприложений. Разработка мини-приложений на всех платформах происходит в IDE, которые бесплатно предоставляются платформами суперприложений. Хотя их больше, я хочу сосредоточиться на четырех самых популярных и пятом для Quick App для сравнения.

IDE для мини-приложений

Как и суперприложения, большинство IDE доступны только на китайском языке. На самом деле вам следует убедиться, что вы устанавливаете китайскую версию, а не доступную иногда английскую (или зарубежную) версию, поскольку она может быть неактуальной. Если вы разработчик macOS, имейте в виду, что не все IDE подписаны, а это означает, что macOS отказывается запускать установщик. Вы можете на свой страх и риск обойти это, как описано в справке Apple .

Начальные проекты мини-приложений

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

Ход разработки

После запуска IDE и загрузки или создания (демо) мини-приложения первым шагом всегда является вход в систему. Обычно вам просто нужно отсканировать QR-код с помощью суперприложения (в котором вы уже вошли в систему), созданного IDE. Очень редко приходится вводить пароль. Как только вы войдете в систему, IDE узнает вашу личность и позволит вам приступить к программированию, отладке, тестированию и отправке приложения на проверку. Ниже вы можете увидеть скриншоты пяти IDE, упомянутых в абзаце выше.

Окно приложения WeChat DevTools, показывающее симулятор, редактор кода и отладчик.
WeChat DevTools с симулятором, редактором кода и отладчиком.
Окно приложения Alipay DevTools, показывающее редактор кода, симулятор и отладчик.
Alipay DevTools с редактором кода, симулятором и отладчиком.
Окно приложения Baidu DevTools, показывающее симулятор, редактор кода и отладчик.
Baidu DevTools с симулятором, редактором кода и отладчиком.
Окно приложения ByteDance DevTools, показывающее симулятор, редактор кода и отладчик.
ByteDance DevTools с симулятором, редактором кода и отладчиком.
Окно приложения Quick App DevTools, показывающее редактор кода, симулятор и отладчик.
Quick App DevTools с редактором кода, симулятором и отладчиком.

Как видите, фундаментальные компоненты всех IDE очень похожи. У вас всегда есть редактор кода, основанный на Monaco Editor , том же проекте, который также используется в VS Code . Во всех IDE есть отладчик, основанный на интерфейсе Chrome DevTools с некоторыми модификациями, подробнее о них позже (см. Отладчик ). Сами IDE реализованы либо как NW.js , либо как приложения Electron , симуляторы в IDE реализованы как тег NW.js <webview> или тег Electron <webview> , которые, в свою очередь, основаны на Chromium <webview> ярлык . Если вас интересуют внутренние компоненты IDE, зачастую вы можете просто проверить их с помощью Chrome DevTools, нажав сочетание клавиш Control + Alt + I (или Command + Option + I на Mac).

Chrome DevTools используется для проверки инструментов разработчика Baidu, отображая тег веб-просмотра симулятора на панели «Элементы» Chrome DevTools.
Проверка Baidu DevTools с помощью Chrome DevTools показывает, что симулятор реализован как тег Electron <webview> .

Тестирование и отладка симулятора и реального устройства

Симулятор можно сравнить с тем, что вы, возможно, знаете из режима устройства Chrome DevTools. Вы можете моделировать различные устройства Android и iOS, изменять масштаб и ориентацию устройства, а также моделировать различные состояния сети, нехватку памяти, событие чтения штрих-кода, неожиданное завершение работы и темный режим.

Хотя встроенного симулятора достаточно, чтобы получить общее представление о том, как ведет себя приложение, тестирование на устройстве, как и в случае с обычными веб-приложениями, незаменимо. Чтобы протестировать мини-приложение, находящееся в разработке, достаточно отсканировать QR-код. Например, в ByteDance DevTools сканирование QR-кода, динамически сгенерированного IDE, на реальном устройстве приводит к созданию облачной версии мини-приложения, которую затем можно немедленно протестировать на устройстве. В ByteDance это работает так: URL-адрес QR-кода ( пример ) перенаправляет на размещенную страницу ( пример ), которая содержит ссылки со специальными схемами URI, например, snssdk1128:// , для предварительного просмотра мини-приложения на различные суперприложения ByteDance, такие как Douyin или Toutiao (вот пример ). Другие поставщики суперприложений не используют промежуточную страницу, а открывают предварительный просмотр напрямую.

ByteDance DevTools показывает QR-код, который пользователь может отсканировать с помощью приложения Douyin, чтобы увидеть текущее мини-приложение на своем устройстве.
ByteDance DevTools показывает QR-код, который пользователь может сканировать с помощью приложения Douyin для немедленного тестирования на устройстве.
Промежуточная целевая страница для предварительного просмотра мини-приложения ByteDance в различных суперприложениях компании, открываемая в обычном настольном браузере для обратного проектирования процесса.
Промежуточная целевая страница ByteDance для предварительного просмотра мини-приложения (открывается в браузере настольного компьютера, чтобы показать процесс).

Еще более интересной функцией является удаленная отладка предварительного просмотра в облаке. После простого сканирования специального QR-кода, также сгенерированного IDE, мини-приложение открывается на физическом устройстве, а на компьютере запускается окно Chrome DevTools для удаленной отладки.

Мобильный телефон с мини-приложением, части пользовательского интерфейса которого выделены отладчиком ByteDance DevTools, работающим на ноутбуке и проверяющим его.
Беспроводная удаленная отладка мини-приложения на реальном устройстве с помощью ByteDance DevTools.

Отладчик

Отладка элементов

Опыт отладки мини-приложений хорошо знаком всем, кто когда-либо работал с Chrome DevTools. Однако есть некоторые важные различия, которые делают рабочий процесс адаптированным для мини-приложений. Вместо панели «Элементы » Chrome DevTools IDE мини-приложений имеют настраиваемую панель, адаптированную к их конкретному диалекту HTML. Например, в случае с WeChat панель называется Wxml , что означает WeiXin Markup Language. В Baidu DevTools он называется Swan Element . ByteDance DevTools называет это Bxml . Alipay называет ее AXML , а Quick App называет панель просто UX . Я углублюсь в эти языки разметки позже .

Проверка изображения с помощью панели Wxml WeChat DevTools. Это показывает, что используемый тег является тегом изображения.
Проверка элемента <image> с помощью WeChat DevTools.

Кастомные элементы под капотом

Проверка WebView на реальном устройстве через about://inspect/#devices показывает, что WeChat DevTools намеренно скрывал правду. Там, где WeChat DevTools показывает <image> , на самом деле я смотрю на пользовательский элемент под названием <wx-image> с <div> в качестве единственного дочернего элемента. Интересно отметить, что этот пользовательский элемент не использует Shadow DOM . Подробнее об этих компонентах позже .

Проверка мини-приложения WeChat, работающего на реальном устройстве, с помощью Chrome DevTools. Там, где WeChat DevTools сообщил, что я просматриваю тег image, Chrome DevTools показывает, что на самом деле я имею дело с пользовательским элементом wx-image.
Проверка элемента <image> с помощью WeChat DevTools показывает, что на самом деле это пользовательский элемент <wx-image> .

CSS-отладка

Еще одним отличием является новая единица измерения длины rpx для адаптивного пикселя в различных диалектах CSS (подробнее об этой единице позже ). WeChat DevTools использует независимые от устройства единицы длины CSS, чтобы сделать разработку для устройств разных размеров более интуитивно понятной.

Проверка представления с указанным верхним и нижним отступом «200rpx» в WeChat DevTools.
Проверка заполнения, указанного в адаптивных пикселях ( 200rpx 0 ) представления с помощью WeChat DevTools.

Аудит производительности

Производительность находится в центре внимания мини-приложений, поэтому неудивительно, что WeChat DevTools и некоторые другие DevTools имеют встроенный инструмент аудита, основанный на Lighthouse. Основными областями аудита являются общий объем, производительность, опыт и передовая практика. Вид IDE можно настроить. На снимке экрана ниже я временно скрыл редактор кода, чтобы освободить место на экране для инструмента аудита.

Запуск аудита производительности с помощью встроенного инструмента аудита. Оценки включают «Общий результат», «Производительность», «Опыт» и «Лучшая практика» по 100 из 100 баллов каждый.
Встроенный инструмент аудита в WeChat DevTools, показывающий общий объем, производительность, опыт и передовой опыт.

насмешка над API

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

Настройка макета ответа для конечной точки API в WeChat DevTools.
Интегрированная функция имитации ответов API WeChat DevTools.

Благодарности

Рецензии на эту статью написали Джо Медли , Кейси Баскис , Милица Михайлия , Алан Кент и Кейт Гу.