- Кросс-энд тщательный, прямое распространение, нет необходимости во вторичной разработке;
- Повысьте производительность с помощью стратегий оптимизации, направленных на встряхивание дерева, таких как минимизация встроенных компонентов.
Это должно быть то место, где uni-app более дружелюбен к другим фреймворкам апплетов на платформе H5.
задний план
С ростом популярности мини-программ WeChat и непрерывным развитием мини-программ Baidu и Toutiao потребность в кросс-энд разработке становится все более и более актуальной, и в отрасли появился ряд кросс-энд фреймворков, но поддержка кросс-энда для платформы H5 не очень тщательная. :
-
VueАпплетный фреймворк стека технологий: в целом слабая поддержка платформы H5 - часть
ReactНебольшая программная структура стека технологий: хотя она поддерживает генерацию кода, который может быть запущен на стороне H5, может быть запущен только код, и все еще существует определенный разрыв между целью прямого выпуска и запуска. проекта.
Принимая во внимание объективные потребности и текущую ситуацию, фронтенд-команда DCloud откликнулась на призыв разработчиков к тщательному кросс-энду, и после непрерывных усилий,uni-appВерсия 1.2 поддерживает распространение на платформе H5 и полностью имитирует жизненный цикл небольших программ, обработку событий, спецификации компонентов и т. д. и действительно достигает цели «один набор кода, многотерминальное распространение».
Эта статья в основном делится, мы реализуемuni-appКогда он был выпущен для платформы H5, какую работу вы проделали с точки зрения реализации движка, сглаживания различий и оптимизации производительности.
Полный движок апплета моделирования
uni-appКритериями разработки дизайна являются:Синтаксис Vue.js + API-интерфейс апплета + условная компиляция для расширения возможностей персонализации платформы. в:
-
Vue.jsСинтаксис находится на стороне апплета WeChat,uni-appОн реализован с помощью расширения компилятора + среды выполнения и поддерживается по умолчанию на стороне H5; - API апплета фактически включает три части: фреймворк + компонент (UI) + интерфейс (API), эти три части являются встроенной поддержкой апплета WeChat, и
uni-appДля публикации на платформе H5 требуется полная симуляция среды выполнения апплета.
Ниже приведена простая среда выполнения апплета, ядром которой является адаптивная система привязки данных.
Чтобы реализовать полный переход между двумя концами апплета и H5,uni-appУровень логики и уровень представления апплета полностью моделируются на платформе H5.uni-appНа платформе H5 более совершенны следующие моменты.
конфигурация страницы
Панели навигации и вкладки в апплете генерируются с помощью файлов конфигурации и отображаются собственными компонентами после настройки.uni-appЭти конфигурации также совместимы с платформой H5, но их версия будет понижена черезdivЭлемент управления смоделирован и реализован, поэтому разработчикам не нужно отдельно добавлять панели навигации или вкладки для платформы H5.
Жизненный цикл
uni-appНа платформе H5 реализован полный жизненный цикл апплета, заполнившего множество ям. Возьмите каштан, который прыгает между страницами подробностей:
Детали A открывает Детали B. В обычном веб-решении SPA данные деталей B будут получены на странице деталей A, и будут активированы только детали страницы A.updatedЖизненный цикл, не срабатываетonHide; но в апплете будет открыто новое веб-представление, и детали B будут загружены, а детали A будут запущены в это время.onHideЖизненный цикл также вызовет детали BonShowЖизненный цикл;uni-appПолностью смоделирован жизненный цикл апплета, при переключении страниц деталей между собой срабатываетonHide,onShowОжидание жизненного цикла; эта реализация обеспечивает совместимость обоих концов, и в то же время, когда детали Б возвращают детали А, детали А закэшированы, и нет необходимости снова загружать сеть, и она также будет иметь более высокую производительность.
| метод | эффект |
|---|---|
| onLoad | следить за загрузкой страницы |
| onShow | Отображение страницы монитора |
| onReady | Контролировать завершение первоначального рендеринга страницы |
| onHide | Скрытие страницы монитора |
| onUnload | Отслеживание выгрузки страницы |
обработка событий
uni-appДля более полной поддержки обработчиков событий страницы новая кисть вытягивания, вытягивание дна и другие общие функции могут быть мультиплексированы на платформе H5, нет необходимости во вторичной разработке.
| метод | эффект |
|---|---|
| onPullDownRefresh | Обработчики событий, связанных со страницей, — прослушивание раскрывающихся действий пользователя. |
| onReachBottom | |
| onPageScroll | Обработчик события триггера прокрутки страницы |
| onTabItemTap | Когда текущая вкладка срабатывает при нажатии на вкладку |
Спецификация компонентов
uni-appКомпонентная реализация платформы H5 имеет две характеристики:
- Большее количество совместимых компонентов: напр.
navigatorПлатформа H5 и другие компоненты в обычном прыжке - Свойства компонентов, вложенный агрегат достичь ближе
Сгладить различия двигателей
окклюзия фиксированного элемента
Апплет WeChat представляет собой гибридный механизм рендеринга нативный + веб. Например, панель навигации и панель вкладок апплета являются нативными компонентами, но платформа H5 представляет собой чисто веб-рендеринг, а панель навигации и вкладка реализованы в Интернете. , что может вызвать проблему взаимного перекрытия между фиксированным элементом страницы и положением панели/вкладки навигации, как показано в следующем коде для фиксированного позиционирования:
.fixed{
position: fixed;
z-index: 9999;
bottom: 0px;//底部距离为0
background-color:peru;
}
Эффект отличается на разных платформах, как показано на следующем рисунке:
uni-appпредставленcss变量Чтобы решить такие проблемы, при компиляции на разные платформы дайтеcss变量Установите соответствующее значение.
| CSS-переменные | описывать | Апплеты | H5 |
|---|---|---|---|
| --window-top | Расстояние области контента от верха | 0 | Высота панели навигации, если панель навигации есть, иначе 0 |
| --window-bottom | Расстояние области контента от дна | 0 | Если есть TabBar, это высота TabBar, иначе 0 |
имеютcss变量, если разработчикам нужно иметь дело с элементами с фиксированным позиционированием, им нужно всего лишь написать следующее:
.fixed{
bottom:var(--window-bottom)
}
css-область
uni-appРазработка соответствует спецификации Vue Single File Component (SFC).При компиляции в апплет WeChat будет сгенерирован соответствующий файл wxml, а окончательная среда выполнения будет отображаться с помощью веб-просмотра, платформа iOS будет отображаться с помощью WKWebView и платформа Android будет обрабатываться движком XWeb на базе ядра Mobile Chrome 53. ;uni-appразница в.vueфайл подкачки (скомпилированный.wxmlФайл), апплет будет отображаться к концу разного веб-просмотра, так.vueОбласть css в файле подкачки естественно изолирована, и разработчикам не нужно<style>добавлено на ярлыкscopedАтрибуты. Но платформа H5 — это набор фреймворков SPA, нет.scopedОн станет глобальным стилем, затрагивающим другие страницы.uni-appИнтеллектуальная обработка была выполнена на платформе H5 и автоматически добавленаscoped.
Платформа оптимизации производительности
Производительность всегда была в центре внимания веб-приложений.uni-appКогда он был выпущен для платформы H5, было также сделано много оптимизаций производительности.
Встроенные компоненты упаковываются по запросу (Tree-Shaking)
uni-appЕсть 8 категорий и десятки встроенных компонентов, но в реальной разработке разработчики будут использовать только некоторые из них, например, многие приложения не будут их использовать.map,canvasи другие компоненты, если упаковываются,uni-appЕсли упаковать всю библиотеку классов компонентов, это приведет к огромной трате ресурсов и задержке скорости рендеринга домашней страницы.
uni-appПри выпуске на платформу H5 применяется стратегия оптимизации дерева (Tree-Shaking), чтобы «вытряхнуть» неиспользуемые компоненты в проекте разработчика из всего фреймворка, чтобы гарантировать, что скомпилированные файлы JS будут сведены к минимуму. Конкретно,uni-appПри компиляции на платформу H5 он делится на два этапа: прекомпиляция и перекомпиляция.Этап прекомпиляции проходит этапvue-template-compilerпроанализированоAST, сопоставьте список компонентов, используемых в сгенерированном проекте, а затем на основеWebpackПлагин компилирует используемые компоненты для создания минимальногоuni-appфайл кадра.
мы начинаем сuni-appДва шаблона проекта с открытым исходным кодом дляшаблон входа,Посмотрите на шаблон изображенияНапример, протестируйте размер кадра компонента до и после Tree-Shaking, эффект приятный, данные следующие:
| проект | До оптимизации | Оптимизация после встряхивания |
|---|---|---|
| шаблон входа | 148k | 64k |
| Посмотрите на шаблон изображения | 148k | 53k |
Компоненты маршрутизации загружаются по запросу (Lazy-Loading).
При упаковке для создания приложения SPA пакет Javascript может стать очень большим и повлиять на загрузку страницы. Хотя разработчик основан наVueизАсинхронные компонентыа такжеWebpackизcode-splitting функция, которая может реализовать ленивую загрузку компонентов маршрутизации, но разработчикам необходимо настроить.vueисходный код иWebpackКонфигурация, есть определенный порог обучения, и более сложная.
uni-appНа платформе H5 реализована автоматическая загрузка компонентов маршрутизации по запросу, и разработчикам не нужно корректировать метод разработки компонентов, а нужно только заботиться о бизнес-реализации.
Другие аспекты
uni-appЧтобы улучшить производительность, во многих деталях есть специальные конструкции. Например, распространенные фреймворки SPA обычно используютdivпрокрутка области,uni-appЧтобы улучшить пользовательский опыт, мы используемbodyПрокрутка, которая заполняет множество пробелов, например, разные страницыbackground-color, если использоватьdivrolling, определение стиля можно сделать на этапе компиляции, но на основеbodyПрокрутка, вам нужно динамически установить, когда страница идет вперед и назадbodyфоновый цвет.
github
uni-appВсе соответствующие коды на платформе H5 находятся в открытом доступе.uni-app, Добро пожаловать в звездную поддержку.