Поделитесь передовыми технологиями, использованными в проекте «Китайский Новый год Hand Tao»

Когда вы пили семена дыни со своей семьей, смотрели гала-концерт Весеннего фестиваля со своей семьей и участвовали в лотерейном взаимодействии с Хэнд Тао, между прочим, в Ханчжоу было более 200 программистов, которые все еще сражались на передовой. Год закончился, розыгрыши призов и розыгрыши красных конвертов. Пришло время вернуться к работе. На этот раз для меня большая честь иметь возможность участвовать в проекте «Китайский Новый год Hand Amoy» (освящение красного конверта и интерактивный проект «Праздник весны»).Хотя я участвовал только в части работы, я чувствовал, что некоторые вещи следует обобщить. и подготовлены к будущим проектам. Итак, просто подытожу некоторые передовые технологии, которые я использовал, участвуя в проекте.

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

новогодний проект

На самом деле, есть два китайских новогодних проекта, один из которых называется освящением красного конверта, а другой — интерактивный проект для гала-лотереи Весеннего фестиваля.

Две приведенные выше картинки — это визуальные изображения основного интерфейса открытия красного конверта и гала-концерта Весеннего фестиваля. Если вы участвовали в интерактивных мероприятиях Hand Daoist New Year, эти два интерфейса не должны быть вам слишком незнакомы.

После обсуждений с товарищами по команде, на этот раз оба проекта разрабатываются на основе Vue. Vue - это просто библиотека JavaScript. Основных причин для его выбора не так много, но чтобы команда могла использовать JavaScript в будущей разработке проекта. Энергия библиотеки имеет тенденцию быть унифицирована, так что она постепенно выпадает в осадок и накапливается в проекте. По этой причине то, что я в основном делал в нем, я добавил в этот каркас (то есть основу Vue-cli) следующие три части:

• ПостCSS-плагин
• vwСхема адаптации
• Адаптация iPhone X

ПостCSS-плагин

В интерактивном каркасе в настоящее время настроенные плагины PostCSS в основном включают:

• postcss-import
• postcss-url
• postcss-aspect-ratio-mini
• postcss-cssnext
• autoprefixer
• postcss-px-to-viewport
• postcss-write-svg
• cssnano
• postcss-viewport-units

Конфигурация плагина Postcss

проект Webpack.postcssrc.jsКонфигурация финального плагина PostCSS:

module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {}, 
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750,     
            viewportHeight: 1334,   
            unitPrecision: 3,       
            viewportUnit: 'vw',  
            selectorBlackList: ['.ignore', '.hairlines'], 
            minPixelValue: 1,   
            mediaQuery: false   
        }, 
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}

Функции этих плагинов PostCSS и способы их настройки подробно описаны на соответствующем GitHub. Вот краткое описание того, почему эти плагины PostCSS используются в нашем проекте:

postcss-importа такжеpostcss-urlЭти два в основном используются для работы с режимом обработки и работы импортированного файла и пути к ресурсу. Если ваш проект также использует Vue и настроенvue-loader, и настройте соответствующие параметры, он будет иметь аналогичную функцию.

autoprefixerВ основном используется для работы с приватным префиксом браузера, это уже плагин PostCSS, который все часто используют. Здесь необходимо упомянуть, что если ваш проект используетpostcss-nextа такжеcssnano,ТакautoprefixerПлагин может быть не введен, аpostcss-nextа такжеcssnanoВыберите один из двух, чтобы закрытьautoprefixer, так как оба плагина интегрируютсяautoprefixerОсобенности плагина.

postcss-cssnextНа самом деле этоcssnext. Этот плагин позволяет нам использовать будущие функции CSS, которые будут выполнять соответствующую обработку совместимости для этих функций. Его основные особенности включают в себя:

оcssnextОперативная документация для каждой функцииНажмите здесь, чтобы просмотреть.

cssnanoВ основном используется для сжатия и очистки кода CSS. В вебпакеcssnanoа такжеcss-loaderОн поставляется в комплекте, поэтому вам не нужно загружать его самостоятельно. Но вы также можете использоватьpostcss-loaderявное использованиеcssnano. оcssnanoПодробную документацию можноНажмите здесь, чтобы получить.

Примечание: из-заcssnanoизpresetКонфигурация используетadvanced, поэтому вам нужно установитьnpm install cssnano-preset-advanced --save-dev. Кроме тогоcssnextа такжеcssnanoкак естьautoprefixerплагин, так что вcssnanoгенерал-лейтенантautoprefixerУстановить какfalse.

postcss-write-svgПлагины в основном используются для работы с мобильными терминалами.1pxрешение. Этот плагин в основном используетborder-imageа такжеbackgroundСделайте это с векторной графикой, нарисованной SVG1pxсвязанная обработка. В дальнейшем специальный раздел будет посвящен введениюpostcss-write-svgИли как лучше использовать SVG для работы с мобильными устройствами1px.

postcss-aspect-ratio-miniВ основном используется для работы с соотношением сторон контейнера элемента. Используется во многих местах в проектеimg,objectилиvideo, то этот плагин поможет нам лучше справиться с масштабированием соотношения сторон. В реальном использовании он имеет структуру по умолчанию:

<div aspectratio>
    <div aspectratio-content></div>
</div>

В реальном использовании вы можете поместить пользовательские свойстваaspectratioа такжеaspectratio-contentЗамените его соответствующим именем класса, например:

<div class="aspectratio">
    <div class="aspectratio-content"></div>
</div>

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

[aspectratio] {
    position: relative;
}
[aspectratio]::before {
    content: '';
    display: block;
    width: 1px;
    margin-left: -1px;
    height: 0;
}

[aspectratio-content] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

Если мы хотим сделать188:246(188ширина контейнера,246высота контейнера), просто используйте его так:

[w-188-246] {
    aspect-ratio: '188:246';
}

Одна вещь требует особого внимания:aspect-ratioСвойства не могут быть записаны вместе с другими свойствами, иначе скомпилированные свойства останутся позади.aspect-ratioзначение,Например:

<div aspectratio w-188-246 class="color"></div>

CSS перед компиляцией выглядит следующим образом:

[w-188-246] {
    width: 188px;
    background-color: red;
    aspect-ratio: '188:246';
}

После компиляции:

[w-188-246]:before {
    padding-top: 130.85106382978725%;
}

В основном потому, что соответствующая обработка выполняется в плагине, не каждый вызовaspect-ratio, код стиля по умолчанию, указанный ранее, генерируется так, чтобы код был менее избыточным. Поэтому при его использовании необходимоwidthа такжеbackground-colorОтдельно напишите:

[w-188-246] {
    width: 188px;
    background-color: red;
}
[w-188-246] {
    aspect-ratio: '188:246';
}

На данный момент скомпилированный CSS нормальный:

[w-188-246] {
    width: 25.067vw;
    background-color: red;
}
[w-188-246]:before {
    padding-top: 130.85106382978725%;
}

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

В настоящее время внедрение плагина PostCSS является лишь переходным этапом, в будущем мы сможем использовать его непосредственно в CSS.aspect-ratioсвойство для реализации соотношения сторон. Конечно, если вы правыcssnextЕсли вы с ним знакомы, то можете добавить к нему такой PR, нативный CSSaspect-ratioатрибут добавлен кcssnextфункции, так что пока вы используетеpostcss-nextВы можете игнорировать этот плагин.

остаткиpostcss-px-to-viewportа такжеpostcss-viewport-unitsДва плагина PostCSS в основном используются дляvwСхема адаптации является важным плагином PostCSS в этом проекте. в,postcss-px-to-viewportПлагины в основном используются дляpxПреобразовать единицу вvw,vh,vminилиvmaxТакой оконный блок, такжеvwОдин из основных плагинов схемы адаптации.

В конфигурации необходимо настроить несколько ключевых параметров:

"postcss-px-to-viewport": {
    viewportWidth: 750,      // 视窗的宽度，对应的是我们设计稿的宽度，一般是750
    viewportHeight: 1334,    // 视窗的高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
    unitPrecision: 3,        // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
    viewportUnit: 'vw',      // 指定需要转换成的视窗单位，建议使用vw
    selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
    minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
    mediaQuery: false       // 允许在媒体查询中转换`px`
}

В настоящее время выпущен проект визуального дизайна, и мы все используем750pxширина, то100vw = 750px,Прямо сейчас1vw = 7.5px. Тогда мы можем в соответствии с расчетной схемойpxЗначение напрямую преобразуется в соответствующийvwстоимость. В самом процессе кодирования нет необходимости производить какие-либо вычисления, просто пропишите это в кодеpx,Например:

.test {
    border: .5px solid black;
    border-bottom-width: 4px;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}
[w-188-246] {
    width: 188px;
}

Скомпилированный CSS:

.test {
    border: .5px solid #000;
    border-bottom-width: .533vw;
    font-size: 1.867vw;
    line-height: 2.667vw;
    position: relative;
}
[w-188-246] {
    width: 25.067vw;
}

в нежеланииpxПеревести вvw, сначала в соответствующем элементе (html), чтобы добавить имя класса, указанное в конфигурацииignoreилиhairlines(hairlinesОбычно используется для настройкиborder-width:0.5pxэлемент):

<div class="box haspx"></div>

При написании CSS:

.ignore {
    margin: 10px;
    background-color: red;
}
.box {
    width: 180px;
    height: 300px;
}

Скомпилированный CSS:

.box {
    width: 24vw;
    height: 40vw;
}
.ignore {
    margin: 10px; /*.box元素中带有.ignore，在这个类名写的`px`不会被转换*/
    background-color: red;
}

выше решеноpxприбытьvwконверсионный расчет.

потому что браузерvwОн также имеет определенную совместимость, и есть определенные проблемы в версиях ниже Android 4.4 и ниже iOS8. чтобыvw,vh,vminа такжеvmaxЭтиviewportУстройство можно использовать лучше. Его совместимое решение заключается в использованииviewportПолифилл:Viewport Units Buggyfill.

При использовании Viewport Units Buggyfill вам необходимо вручную использоватьviewportДобавьте в стиль юнита соответствующий Хак-код, например:

.box {
    top: 2vw;
    left: 1vw;

    content: 'viewport-units-buggyfill;top: 2vw;left: 1vw;';
}

Если бы все так делали, это было бы катастрофой. К счастью, можно использоватьpostcss-viewport-units. В основном это добавление свойств в CSScontentсвойства, сviewport-units-buggyfillбиблиотека, чтобы датьvw,vh,vminа такжеvmaxВыполните соответствующую операцию.

Еще одна яма, используйтеpostcss-viewport-unitsбуду иметьcontentАтрибутированные элементы имеют определенное влияние, например, использование псевдоэлементов в вашем проекте.::before,::afterили псевдокласс:before,:afterТакие как. Тогда используйте этот плагин, он автоматически заменит ваш оригинальныйcontentсодержания, во избежание этого явления необходимоcontentдобавить в конце свойства значение!important.

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

vw схема адаптации

vwСхема адаптации в основном используется для решения проблемы макета мобильной терминала. Фактически, в руке Tao, даже до сих пор, гибкая схема макета все еще используется для адаптации к различным клеммам на мобильном терминале. После двойного 11 в 2015 году я написал статью "Использование Flexible для реализации терминальной адаптации страниц H5 Taobaoв блоге, делясь этим решением с отраслью, и решение быстро повторно используется и модифицируется в отрасли (принцип тот же).

Подходящее решение для Flexible было очень мощным в то время, великий бог, который придумал это решение, заставил меня поклоняться долгое время. Конечно, вещи полярны и он очень силен, но и у него есть свои слабости, особенно вvwКогда он получит больше поддержки, я чувствую, что Гибкий следует отказаться от его исторического использования (это мой собственный YY). Итак, в начале 17-го я начал говорить оvwПри использовании мобильных терминалов, после периода обсуждений и попыток, я написал "Поговорим об адаптации мобильных страниц" статья.

использоватьvwВидно, что тестовый пример поддерживается многими устройствами:

Если вы видите много, у вас могут возникнуть подозрения, а что тогда будет с теми, кто этого не поддерживает? В частности, босс сказал мне, что мы будем использовать этот китайский новогодний проект.vwСделаем адаптивную верстку. На самом деле, я очень рад этой новости, ведь технические решения, которые я изучил, проверены более крупными проектами. Мое сердце прекрасно, но я также чувствую небольшое давление, и я боюсь, что новые мотыльки будут выброшены. Я боюсь об этом думать (^_^).

Как мы все знаем, браузерыvwОн также имеет определенную совместимость, и есть определенные проблемы в версиях ниже Android 4.4 и ниже iOS8. чтобыvw,vh,vminа такжеvmaxЭтиviewportУстройство можно использовать лучше. необходимо учитыватьviewportУстройство выполняет соответствующую обработку в неподдерживаемых браузерах (или устройствах).

Для того, чтобы сделать проект более безопасным, принято решение новогоднего проектаvwПри выкладывании плана я снова провел техническую проверку, на этот раз на основе Vue-cli скаффолдинга Vue, ведь в нашем проекте тоже есть Vue. В этом дополнении к скаффолдингу я настраиваю плагин PostCSS, описанный выше, особенноpostcss-px-to-viewportа такжеpostcss-viewport-unitsдва плагина PostCSS иViewport Units Buggyfillпозвольте мне решить это идеальноvwПроблемы совместимости. И сделать так, чтобы разработчик не знал. Им не нужно думать о том, как быть с совместимостью, им просто нужно следовать эскизу проекта.

Конечно, после завершения проверки этого технического решения остаются некоторые ямки, благо, их можно исправлять один за другим, как бороться со старыми монстрами. Весь процесс здесь не описан.Если вам интересно, то можете прочитать "Как использовать vw в проекте Vue для мобильной адаптации" статья. Далее краткое введениеvwРабота с совместимой схемой.

vw-совместимое решение

Мобильное использованиеvwмакет, его совместимая схема заключается в использованииviewportПолифилл:Viewport Units Buggyfill. использоватьviewport-units-buggyfillВ основном делится на следующие этапы:

Импорт файлов JavaScript

в вашем HTML-файле, напримерindex.htmlсередина</head>или</body>Импортируйте следующий файл JavaScript:

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

Метод вызова viewport-units-buggyfill

Также вызовите в файле HTMLviewport-units-buggyfillметод, например:

<script>
window.onload = function () {
    window.viewportUnitsBuggyfill.init({
        hacks: window.viewportUnitsBuggyfillHacks
    });
}
</script>

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

Гибкие проекты плавно переходят наvw

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

первый шаг

Включите Гибкий проектflexible.jsа такжеflexible.cssУдалить и использовать следующиеvwСовместимые скрипты для:

<script src="//g.alicdn.com/fdilab/lib3rd/viewport-units-buggyfill/0.6.2/??viewport-units-buggyfill.hacks.min.js,viewport-units-buggyfill.min.js"></script>

второй шаг

существует<head>добавить тегиmetaЭтикетка:

<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">

Чтобы быть совместимым с адаптацией iPhone X, вmetaдобавлено на ярлыкviewport-fit="cover"обработка параметров. Для этого вы можете прочитать "Выемка iPhone X и CSS"а также"Веб-дизайн для iPhone X".

третий шаг

Добавьте конфигурацию вышеупомянутого плагина PostCSS, конечно, вы можете просто добавить обработкуpxПеременаvwа такжеvwСотрудничатьViewport Units BuggyfillДва плагина PostCSS:postcss-px-to-viewportа такжеpostcss-viewport-units.

У конфигурации плагина PostCSS есть сильная сторона: независимо от того, какой скаффолдинг вы используете, его конфигурация очень гибкая и поддерживает популярные инструменты настройки, такие как Webpack, gulp и т. д. Так что вам не нужно беспокоиться о плохой конфигурации. Потому что при использовании Flexible вам также нужноpx2remКонфигурация плагина PostCSS.

четвертый шаг

Перекомпилируйте свой код и проверьте скомпилированную страницу в браузере. Зачем ты это делаешь? В основном потому, чтоpostcss-px-to-viewportа такжеpostcss-viewport-unitsОба плагина будут::before(:before),::after(:after),imgсерединаcontentделай покрытие. Если в вашем проекте используетсяcontentЭлементы атрибутов требуют некоторой очистки. В настоящее время для этой части нет лучшего способа. Я также консультировался с авторами этих двух плагинов, и их отзывы не нашли лучшего решения. Они могут иметь дело только с человеческой плотью или не использовать ее для маскировки.::beforeа также::afterТакие вещи, вместо этого добавьте дополнительные теги элементов. Если вы попытаетесь найти лучшее решение, поделитесь им с нами.

Адаптация iPhone X

Поскольку Apple выпустила устройство iPhone X, для студентов, изучающих фронтенд-разработку, неизбежно адаптироваться к нему. Кроме того, обработка этой части адаптации является относительно громоздкой. Я также с самого начала искал способы обойти некоторые обычные проблемы адаптации. Эта часть контента находится в процессе сортировки и будет предоставлена ​​вам, когда она станет зрелой. Ниже приведен простой список того, как справиться с адаптацией iPhone X.

Apple предоставляет специальную поддержку атрибутов для адаптации страниц H5 на iPhone X, включая метатеги.viewportдобавить значение атрибутаviewport-fitи присоединитьсяconstant(safe-area-inset-*)а такжеenv(safe-area-inset-*), эти атрибуты относятся ко всем моделям iPhone выше iOS11 (не только к iPhone X), поэтому используйте версию iOS как разницу для анализа страницы H5 в полноэкранном режиме:

• Для систем ниже iOS11.0: страницы H5 не распознаютсяmetaпод этикеткойviewport-fitа такжеconstant(safe-area-inset-*)／env(safe-area-inset-*)Атрибуты.
• Для систем iOS11.0-iOS11.1: если установленоviewport-fit="cover", страница H5 будет закрывать безопасную область страницы для полноэкранного отображения, но это приведет к тому, что элементы страницы будут заблокированы «челкой» и нижним индикатором «Домой», поэтому Apple предоставляет настройки в CSS.constant(safe-area-inset-*)расстояние, чтобы избежать проблем с окклюзией. Так же не добавляется страницаviewport-fit="cover"По умолчаниюviewport-fit="contain/auto", то есть страница, которую мы видим, не может покрыть безопасную зону, в это времяconstant(safe-area-inset-*)Значения0. Итак, в метатегеviewpointКитай и Канадаviewport-fit="cover"Под iOS10 и iOS11constant(safe-area-inset-*)Ценности ведут себя иначе.
• Для систем iOS11.2 и выше:constant()изменился наenv(). Кроме того, в iOS11.2 добавлена ​​функция CSS:min()а такжеmax(). Например:padding-left: max(12px, env(safe-area-inset-left));. существуетenv(safe-area-inset-left)Значение также может измениться соответствующим образом при изменении веб-просмотра, примите12pxа такжеenv(safe-area-inset-left)большее значение .

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

Персонализированный стиль для iPhone X с помощью медиа-запросов:

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    /* iPhone X 独有样式写在这里*/
}

Суммировать

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

пустыня

По прозвищу «Да Мо», основатель W3CPlus, в настоящее время работает в Hand Tao. У него очень глубокое понимание и богатый практический опыт работы с интерфейсными языками сценариев, такими как HTML5, CSS3 и Sass, особенно с упором на исследования CSS3.Он является первой группой людей, изучающих и использующих технологию CSS3 в Китай. Китайский проповедник CSS3, Sass и Drupal. Опубликовано в 2014 г.Графический CSS3: основная технология и практические примеры".

Если вам необходимо перепечатать, пожалуйста, укажите источник:Woohoo. Я 3 от Prussia.com/CSS/Taobao-…