Опыт разработчика
Теперь, когда я рассмотрел мини-приложения как таковые , я хочу сосредоточиться на опыте разработчиков на различных платформах для суперприложений. Разработка мини-приложений на всех платформах осуществляется в IDE, которые предоставляются бесплатно платформами для суперприложений. Хотя их больше, я хочу сосредоточиться на четырех самых популярных, а для сравнения — на Quick App, пятом варианте.
IDE для мини-приложений
Как и суперприложения, большинство IDE доступны только на китайском языке. Вам следует убедиться, что вы устанавливаете именно китайскую версию, а не иногда доступную английскую (или зарубежную) версию, поскольку она может быть устаревшей. Если вы разработчик macOS, имейте в виду, что не все IDE подписаны, а это значит, что macOS откажется запускать установщик. Вы можете обойти это ограничение на свой страх и риск , как описано в справке Apple .
- Инструменты разработчика WeChat
- Инструменты разработчика Alipay
- Baidu DevTools
- ByteDance DevTools
- Быстрые инструменты разработки приложений
Стартовые проекты мини-приложений
Чтобы быстро приступить к разработке мини-приложений, все поставщики суперприложений предлагают демонстрационные приложения, которые можно сразу же загрузить и протестировать, а иногда они также интегрированы в мастера создания новых проектов различных IDE.
- Демонстрация WeChat
- Демонстрация Alipay
- демо-версия Байду
- Демонстрация ByteDance
- Быстрая демонстрация приложения
Процесс разработки
После запуска IDE и загрузки или создания (демо) мини-приложения первым шагом всегда является вход в систему. Обычно достаточно отсканировать QR-код с помощью суперприложения (в котором вы уже авторизованы), сгенерированного IDE. Очень редко требуется вводить пароль. После входа в систему IDE распознает вашу личность и позволяет начать программирование, отладку, тестирование и отправку приложения на проверку. Ниже вы можете увидеть скриншоты пяти IDE, упомянутых в предыдущем абзаце.
Как видите, основные компоненты всех IDE очень похожи. У вас всегда есть редактор кода, основанный на Monaco Editor , том же проекте, который используется и в VS Code . Во всех IDE есть отладчик, основанный на интерфейсе Chrome DevTools с некоторыми модификациями, о которых мы поговорим позже (см. Отладчик ). Сами IDE реализованы либо как приложения NW.js , либо как приложения Electron , симуляторы в IDE реализованы в виде тега <webview> в NW.js или тега <webview> в Electron , которые, в свою очередь, основаны на теге <webview> в Chromium . Если вас интересует внутреннее устройство IDE, вы часто можете просто изучить его с помощью Chrome DevTools, используя сочетание клавиш Control + Alt + I (или Command + Option + I на Mac).
<webview> из библиотеки Electron. Тестирование и отладка на симуляторах и реальных устройствах.
Симулятор сравним с тем, что вы, возможно, знаете из режима устройства в Chrome DevTools. Вы можете имитировать различные устройства Android и iOS, изменять масштаб и ориентацию устройства, а также имитировать различные состояния сети, нехватку памяти, событие считывания штрих-кода, неожиданное завершение работы и темный режим.
Хотя встроенного симулятора достаточно, чтобы получить приблизительное представление о поведении приложения, тестирование на устройстве, как и в случае с обычными веб-приложениями, незаменимо. Тестирование разрабатываемого мини-приложения осуществляется простым сканированием QR-кода. Например, в ByteDance DevTools сканирование QR-кода, динамически генерируемого IDE, с помощью реального устройства приводит к облачной версии мини-приложения, которую затем можно немедленно протестировать на устройстве. В ByteDance это работает следующим образом: URL-адрес, лежащий в основе QR-кода ( пример ), перенаправляет на размещенную страницу ( пример ), содержащую ссылки со специальными схемами URI, такими как, например, snssdk1128:// , для предварительного просмотра мини-приложения в различных суперприложениях ByteDance, таких как Douyin или Toutiao (вот пример ). Другие поставщики суперприложений не используют промежуточную страницу, а открывают предварительный просмотр напрямую.
Ещё более привлекательной особенностью является облачная предварительная удалённая отладка. После сканирования специального QR-кода, сгенерированного IDE, мини-приложение открывается на физическом устройстве, а на компьютере запускается окно инструментов разработчика Chrome для удалённой отладки.
Отладчик
Отладка элементов
Процесс отладки мини-приложений хорошо знаком всем, кто когда-либо работал с Chrome DevTools. Однако есть несколько важных отличий, которые делают этот рабочий процесс адаптированным для мини-приложений. Вместо панели Elements в Chrome DevTools, в IDE для мини-приложений используется настраиваемая панель, адаптированная под конкретный диалект HTML. Например, в случае WeChat панель называется Wxml , что означает WeiXin Markup Language (язык разметки WeiXin). В Baidu DevTools она называется Swan Element . В ByteDance DevTools она называется Bxml . В Alipay она называется AXML , а в Quick App панель просто обозначается как UX . Я подробнее расскажу об этих языках разметки позже .
<image> с помощью инструментов разработчика WeChat. Дополнительные элементы под капотом
Проверка WebView на реальном устройстве с помощью about://inspect/#devices показывает, что WeChat DevTools намеренно скрывал правду. Там, где WeChat DevTools показывал <image> , на самом деле я вижу пользовательский элемент <wx-image> с единственным дочерним элементом <div> . Интересно отметить, что этот пользовательский элемент не использует Shadow DOM . Подробнее об этих компонентах позже .
<image> с помощью инструментов разработчика WeChat показывает, что на самом деле это пользовательский элемент <wx-image> .Отладка CSS
Ещё одно отличие — новая единица измерения длины rpx для адаптивных пикселей в различных диалектах CSS (подробнее об этой единице позже ). WeChat DevTools использует независимые от устройства единицы измерения длины CSS, что делает разработку для разных размеров устройств более интуитивно понятной.
200rpx 0 ), с помощью инструментов разработчика WeChat.Аудит эффективности
Производительность является приоритетом для мини-приложений, поэтому неудивительно, что WeChat DevTools и некоторые другие инструменты разработки имеют встроенный инструмент аудита, вдохновленный Lighthouse. Аудит фокусируется на следующих областях: общее состояние, производительность, пользовательский опыт и лучшие практики. Внешний вид IDE можно настроить. На скриншоте ниже я временно скрыл редактор кода, чтобы освободить больше места на экране для инструмента аудита.
имитация API
Вместо того чтобы требовать от разработчика создания отдельного сервиса, имитация ответов API является неотъемлемой частью инструментов разработчика WeChat. С помощью простого в использовании интерфейса разработчик может настроить конечные точки API и необходимые имитационные ответы.
Благодарности
Данная статья была рецензирована Джо Медли , Кейси Баскесом , Милицей Михайловией , Аланом Кентом и Китом Гу.