Альфа-релиз Taro 3.3: разработка апплетов с муравьиным дизайном?

внешний интерфейс Информация Taro
Альфа-релиз Taro 3.3: разработка апплетов с муравьиным дизайном?

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

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

Команда Taro думала о том, как максимально повторно использовать веб-экосистему в среде мини-программ, и до рождения Taro 3.0 эта идея стала возможной. Далее будут представлены идеи и проблемы реализации изоморфизма H5 на основе Taro 3.0, и мы попытались адаптироваться к трем основным фреймворкам мобильного пользовательского интерфейса.WEUI,Ant Design Mobile,VantUIэкспериментальные результаты.

Во-первых, реализация идеи

Taro 3.0 — это перекрестная среда повторного выполнения, которая обеспечивает совместимость с средами веб-разработки, такими как React и Vue, путем имитации спецификации браузера и API DOM.

Теперь, когда существуют API-интерфейсы BOM и DOM для среды браузера, разрыв между приложениями Taro и веб-приложениями заключается в разнице между компонентами апплета и тегами HTML.

Поддержка рендеринга тегов H5.

Поток данных рендеринга Taro3 выглядит следующим образом:

Внешний фреймворк -> Taro DOM -> данные апплета

Имеются различия в именах тегов, атрибутах и ​​событиях HTML-тегов и компонентов апплета, и интерфейсной платформе не нужно воспринимать эти различия.

Следовательно, нет необходимости изменять уровень адаптации интерфейсной платформы и слой Taro DOM.Taro DOM сериализуется в данные апплетаЭтот шаг делается для отображения.

1. Сопоставление имен тегов

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

// Taro DOM 的序列化数据
{
  nn: 'img'
}
// 映射结果
{
  nn: 'image'
}

Полные правила сопоставления имен тегов см.:Приложение I RFC

2. Сопоставление атрибутов

Если атрибуты тегов HTML соответствуют атрибутам соответствующих компонентов апплета, они сопоставляются, например:

// Taro DOM 的序列化数据
{
  nn: 'a',
  href: 'xxx'
  target: '_blank'
}
// 映射结果
{
  nn: 'navigator',
  url: 'xxx',
  openType: 'navigate'
}

Полные правила сопоставления имен атрибутов см. в следующих разделах:RFC Приложение II

3. Картирование событий

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

HTML-события события компонента апплета
click tap

Полные правила сопоставления событий см. в следующих разделах:RFC Приложение III

стиль

1. Селектор тегов

Как упоминалось выше, мы сопоставим теги HTML с компонентами апплета, но селекторы тегов CSS, используемые в приложениях H5, будут недействительными.

Итак, Таро использует имя класса для имитации:

  1. Добавьте имена классов ко всем тегам H5:h5-${tagName}.
// 源代码
<div />
// 渲染结果
<view class="h5-div" />
  1. Используйте плагин postcss для обработки селекторов имен тегов:
// 标签名选择器
div {}
// 经 postcss 插件处理后变为类名选择器
.h5-div {}

2. Стиль браузера по умолчанию

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

  • @tarojs/taro/html.css: встроенные стили W3C HTML4. Только стиль тега HTML4, небольшой размер, высокая совместимость могут адаптироваться к большинству ситуаций.
  • @tarojs/taro/html5.css: Chrome(Blink) встроенные стили HTML5. Встроенные стили богаты, включая большинство тегов HTML5, которые имеют большой размер и могут не поддерживать все контейнеры апплетов.

ограничение

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

1. Получить размер элемента

В H5 мы можем вызвать DOM API для синхронного получения размеров элемента:

// h5
const el = document.getElementById('#inner')
const res = el.getBoundingClientRect()
console.log(res)

Но в апплете API для получения размера элемента является асинхронным:

// 小程序
const query = Taro.createSelectorQuery()
query.select('#inner')
  .boundingClientRect()
  .exec(res => {
    console.log(res)
  })

Поэтому он несовместим с компонентами, которые используют синхронный API DOM для получения размеров элементов.

2. Различия API DOM

<canvas>,<video>,<audio>и другие теги могут быть вызваны непосредственно на стороне H5HTMLElementметод выше:

// h5
const el = document.getElementById('myVideo')
el.play()

Но в Таро для вызова нативного метода компонента нужно сначала создать соответствующийContext:

// 小程序
const ctx = Taro.createVideoContext('myVideo')
ctx.play()

3. Ограничения по стилю

Некоторые стили или селекторы CSS не поддерживаются в апплете, например:

  • подстановочный знак *
  • запросы средств массовой информации
  • Селектор атрибутов, если атрибут не является встроенным атрибутом соответствующего компонента апплета.

2. Как использовать

Обновите 3.3.0-альфа-версию

Сначала вам нужно установить инструменты CLI версии 3.3:

npm i -g @tarojs/cli@alpha

Затем зайдите в проект и поставьтеpackage.jsonВерсия связанных с таро зависимостей в файле изменена на^3.3.0-alpha.2, а затем переустановить зависимости (рекомендуется ставитьnode_modulesудаление папки).

Установить плагин изоморфизма

Для экономии места в проекте функция изоморфизма не является обязательной и предоставляется в виде плагина Taro.

Во-первых, разработчику необходимо установить плагин@tarojs/plugin-html:

npm i @tarojs/plugin-html

Затем настройте использование этого плагина:

// config/index.js
const config = {
  // ...
  plugins: [
    '@tarojs/plugin-html'
  ]
}

3. Пример проекта

Чтобы проверить наличие и влияние изоморфизма, мыWEUI, Библиотека компонентов ReactAntd Design Mobile, библиотека компонентов Vue2VantUIВсе компоненты протестированы.

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

WEUI

Адрес склада:taro-weui

WEUI — это библиотека стилей CSS, которая не зависит от фреймворка и обладает высокой совместимостью.Большинство компонентов можно использовать напрямую.

Antd Mobile Design

Адрес склада:taro-antd-mobile

Antd Mobile Design давно официально не поддерживается, и этот проект адаптации является экспериментальным.

Компоненты, которые могут быть непосредственно использованы, составляют около 80%.Основные проблемы:

  1. SVG широко используется в библиотеке компонентов и в настоящее время не поддерживается.
  2. Невозможно использовать некоторые компоненты, которым требуется синхронное получение размеров элементов.

VantUI

Адрес склада:taro-vant

Компоненты VantUI очень богаты, и компоненты, которые можно использовать напрямую, составляют около 70%. Некоторые разработчики будут использовать Vant Weapp в Taro, но Vant Weapp может работать только на апплете WeChat, поэтому прямая адаптация к VantUI является хорошим дополнением.

Основными проблемами, возникающими в процессе адаптации, являются:

  1. SVG ICON, встроенный в несколько компонентов, не может отображаться.
  2. Невозможно использовать некоторые компоненты, которым требуется синхронное получение размеров элементов.
  3. Vue <transition>Компоненты требуют дополнительной адаптации.

4. Инициатива совместного строительства

Схема изоморфизма все еще оптимизируется, и некоторые реализации еще не доработаны. Приглашаем всех разработчиков оставить сообщение на нашем форуме и высказать свое ценное мнение~:Изоморфная схема RFC.

Кроме того, многие из трех вышеупомянутых фреймворков веб-интерфейса в настоящее время являются несовместимыми компонентами, пока для среды апплета проводится небольшая работа по совместимости, их можно использовать. Экология фреймворка требует совместных усилий чиновника и сообщества для создания.Одна только команда Taro и рабочая сила из более чем 300 участников не могут поддерживать экологию всего сообщества. Мы надеемся, что эти три примера проектов совместимости могут сыграть свою роль в привлечении разработчиков к совместной разработке, улучшению вышеуказанных библиотек компонентов и даже постоянному внедрению дополнительных экологических библиотек на веб-сторону, чтобы упростить кросс-терминальную разработку. Жду вашего участия~

Категории