1. Зачем писать эту статью

В последнее время бизнес прямых трансляций электронной коммерции находится в самом разгаре. Многие команды перешли на поле прямых трансляций, чтобы попытаться захватить рынок.

Мне посчастливилось участвовать в бизнес-развитии программы Live Streaming Mini.В процессе итерации проекта я столкнулся со многими «необъяснимыми» проблемами.

Например, наиболее распространенный макет живой страницы состоит в том, что нижний слой — это видеоэкран, а верхний слой — это основные функции, такие как прокрутка, лайки, сумки для покупок, лотереи и список PK. После того, как проект был запущен, я получил несколько отзывов от пользователей, в которых говорилось, что можно увидеть только «чистую» версию экрана прямой трансляции, а все экраны пули, такие как анимация, товары, лотереи и т. д., не могут быть просмотрены. тебя не увидят!

Жуки появились неожиданно и застали врасплох. После кропотливых поисков автора (гугл, байду шаттл) я наконец нашел "виновника"——«Ножные компоненты». На самом деле, большая часть содержимого апплета оказывается вWebViewна, если поставитьWebViewВ качестве отдельного уровня эти «родные компоненты», которые поставляются с системой, расположены на другом более высоком уровне. Два уровня полностью независимы, поэтому просто использоватьz-indexУправляет относительной иерархией между «собственными компонентами» и несобственными компонентами. Как показано на левом изображении ниже, неродные компоненты расположены вWebViewслоя, а "родные компоненты" иcover-viewа такжеcover-imageна другом более высоком уровне. такlive-playerКомпонент покрывает другие бизнес-компоненты, поэтому некоторые пользователи могут видеть только «чистый режим».

Для решения этой проблемы,Необходимо рендерить "родной компонент" прямо вWebViewиерархически, как показано на рисунке справа, в это время«Собственный компонентный слой»больше не существует,«Родные компоненты»На данный момент он был непосредственно установлен наWebViewна узле. Как говорится, если рабочий хочет хорошо работать, он должен сначала наточить свои инструменты. Вы также должны хотеть знать"Визуализация того же слоя"Какие технологии за этим стоят. Только правильно поняв механизм «отрисовки одного слоя», можно использовать эту возможность более эффективно.

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

2. Значение и опасность «родных компонентов»

Чтобы понять механизм позади «рендеринга одного уровня», лучше узнать о «первичном компоненте», «», - это начинать с технической архитектуры апплета.

2.1 Техническая архитектура мини-программы

Вообще говоря,Существует три метода рендеринга интерфейса.:

• Рендеринг с использованием чистых нативных методов на стороне клиента.
• Рендеринг с использованием чистой веб-технологии.
• Технологии, которые сочетают в себе соответствующие характеристики собственных клиентских технологий и веб-технологий (далее совместно именуемыеГибридная технология) для рендеринга.

Поскольку хостом апплета является WeChat, поэтомуМенее вероятно, что апплеты будут писаться на чисто клиентских технологиях.. Если вы это сделаете, код мини-программы должен быть упакован вместе с кодом WeChat, и версия будет отправлена ​​​​вместе с WeChat.Этот метод и ритм разработки должны быть неправильными.

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

Наконец, апплетВнедрите гибридную технологию, такую ​​как WeChat JSSDK, то есть интерфейс в основном создается с помощью зрелых веб-технологий, дополненных большим количеством интерфейсов, обеспечивающих богатые собственные возможности на стороне клиента. В то же время каждая страница апплета отображается с помощью другого веб-представления, что может обеспечить лучший интерактивный опыт, быть ближе к собственному интерфейсу и избежать слишком тяжелых задач для одного веб-представления. Схема архитектуры апплета показана на следующем рисунке.

Уровень рендеринга и логический уровень апплета управляются двумя потоками:

• Использование интерфейса слоя рендерингаWebViewДля рендеринга в небольшой программе есть несколько интерфейсов, поэтому существует несколько слоев рендеринга.WebView.
• Логический уровень принимаетJSCoreработающая нитьJavaScriptсценарий.

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

Первоначальная цель этого дизайна состоит в том, чтобыУправление и безопасность, апплет WeChat не позволяет разработчикам использовать открытые интерфейсы, предоставляемые некоторыми браузерами, такие как переход по страницам, манипулирование DOM и динамическое выполнение скриптов. Отделить слой логики от слоя представления,Существует только обмен данными между уровнем представления и логическим уровнем, что может помешать разработчикам управлять интерфейсом по своему желанию и лучше обеспечить безопасность пользовательских данных..

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

Рабочая среда	логический уровень	визуализировать слой
Android	V8	Кастомное ядро ​​Chromium
IOS	JavaScriptCore	WKWebView
Инструменты разработчика мини-программ	NWJS	Chrome WebView

Вид апплета находится вWebViewПри рендеринге естественно необходимо использовать способ построения представления.HTMLязык. ноHTMLСуществует много языковых тегов, что увеличивает стоимость понимания и может использоваться напрямую.HTMLязык, которым разработчики могут воспользоваться<a>Этикетка реализует переход на другие веб-страницы в Интернете, а также может быть анимированной.JAVAScript, вышеупомянутые созданы для решения вопросов контроля и безопасностидвухпоточная модельЭто становится украшением.

Таким образом, апплет проектирует набор фреймворков компонентов——Exparser. На основе этого фреймворка встроен набор компонентов, покрывающих основные функции апплета, чтобы разработчики могли быстро построить любой интерфейс. Он также предоставляет возможность настраивать компоненты, и разработчики могут самостоятельно расширять дополнительные компоненты для повторного использования кода. Стоит отметить, чтоНекоторые из более сложных компонентов встроенных компонентов изначально отображаются клиентом., чтобы обеспечить лучшую производительность, это главный герой этой статьи -«Родные компоненты».

2.2 «Родные компоненты» — палка о двух концах

Среди встроенных компонентов есть специальные компоненты, они не полностью находятся под системой рендеринга Exparser, но нативно участвуют в рендеринге компонентов клиентом, такие компоненты называются""Родные компоненты"", который также является применением гибридной технологии Mini Program. например в небольшой программеcamera,video,live-player,canvas,map,animation-view,textarea,input,cover-view,cover-imageЭто "родные компоненты".

<video src="{{pullUrl}}"></video>

В приведенном выше коде показан компонент видео. Когда слой рендеринга запустится, эта строка кода пройдет следующие этапы:

1. Компонент создан, в том числе свойства компонента будут сопровождаться назначением.
2. Компоненты вставляются в DOM-дерево, ядро ​​браузера сразу вычисляет макет, в это время можно прочитать положение компонента (координата X, Y), а ширина высокая.
3. Компонент информирует клиента о том, что клиент вставляет нативную область по ширине и высоте в той же позиции, а затем клиент рендерит интерфейс в этой области.
4. Когда положение или ширина и высота изменяются, компонент уведомляет клиента о необходимости внесения соответствующих корректировок.

Видно, что "родной компонент" находится вWebViewЗадача рендеринга этого слоя очень проста: нужно только отобразить элемент-заполнитель, а затем клиент размещает слой нативного интерфейса поверх этого элемента-заполнителя. следовательно,Уровень «собственного компонента» будет выше, чем у всех обычных компонентов, визуализируемых в слое WebView..

Есть три основных преимущества внедрения «родных компонентов»:

1. Расширьте возможности Интернета. такие как компоненты поля вводаinput, textareaИметь возможность лучше управлять клавиатурой.
2. Лучший опыт, а также сокращение работы рендеринга WebView. такие как компоненты картыmapДля таких более сложных компонентов работа по рендерингу не занимаетWebViewНить, для более эффективной обработки родного клиента.
3. Обход setData, передачи данных и процесса повторного рендеринга для повышения производительности рендеринга.. такие как компоненты холстаcanvasВы можете рисовать напрямую с помощью богатого набора интерфейсов рисования.

Однако подарок судьбы уже отмечен тайной ценой. "Родные компоненты" не идеальны. Поскольку «родной компонент» отделен отwebviewВне процесса рендеринга, поэтому существуют следующие ограничения при использовании:

1. Уровень "родных компонентов" - высший, другие компоненты на странице вне зависимости от настроекz-indexКак ни крути, а на "родных компонентах" не покроется. «Собственный компонент», вставленный позже, может перезаписать предыдущий «собственный компонент».
2. Некоторые стили CSS нельзя применить к «родным компонентам». Например, CSS-анимация не может быть установлена ​​для «собственных компонентов», а «собственные компоненты» не могут быть определены какposition: fixed, нельзя использовать в родительском узлеoverflow: hiddenобрезать область отображения «родного компонента».
3. «Родные компоненты» нельзя использовать вscroll-view,swiper,picker-view,movable-viewПотому что, если разработчик вставляет «собственный компонент» в качестве своего дочернего узла в прокручиваемую область DOM, поскольку «собственный компонент» непосредственно вставляется на уровень вне веб-представления, он не связан с DOM, поэтому он не будет следовать движение не будет резаться.
4. "Родные компоненты" вAndroid, шрифт отображается какromшрифт темы, аwebviewНе будет использоваться без отдельной модификацииromШрифт темы.

2.3 Частичное решение ограничения «родных компонентов»

До введения в апплете «рендеринга одного слоя» уровень «собственных компонентов» всегда был самым высоким и не подвергался влияниюz-indexконтроль собственности, не может сочетаться сview,imageи другие встроенные компоненты перезаписывают друг друга,cover-viewа такжеcover-imageВнешний вид компонентовВ некоторой степени проблема покрытия снимается, но это похоже на написаниеcssКогда я написал кучу!important, не является элегантным решением.

cover-viewа такжеcover-imageКомпоненты также имеют следующие ограничения:

1. Не могу перезаписатьtextarea,input«Родные компоненты».
2. Поддерживаются только основные стили позиционирования, макета и текста. Не поддерживает установку одностороннегоborder,background-image,shadow,overflow: visibleЖдать.
3. cover-viewслужба поддержкиoverflow: scrollДинамическое обновлениеoverflow.
4. cover-viewа такжеcover-imageизaria-roleЕго можно установить только как кнопку, которую можно щелкнуть и прочитать вслух в режиме чтения с экрана; когда она пуста, она может быть сфокусирована, но не кликабельна.
5. cover-viewа такжеcover-imageЕсли дочерний узел переполняет родительский узел, он подвержен ошибкам компоновки.
6. служба поддержкиcss transitionАнимация, свойство перехода поддерживает толькоtransform (translateX, translateY)а такжеopacity.
7. вложение пользовательских компонентовcover-view, слот пользовательского компонента и его родительский узел в настоящее время не поддерживают отображение и скрытие через wx:if , в противном случае это вызоветcover-viewНе показывай.

С развитием экологии апплетов сценарии использования «родных компонентов» разработчиками продолжают расширяться, и эти проблемы «родных компонентов» становятся все более и более очевидными. Чтобы полностью решить различные ограничения, налагаемые «родными компонентами», , официальный WeChat "Native Components" был реорганизован и представлен"Визуализация того же слоя".

3 «Визуализация одного и того же слоя»

Чтобы решить иерархическую проблему «родных компонентов», максимально сохранивNA组件(имея в виду преимущества «родных компонентов»), команды клиента апплета, внешнего интерфейса и ядра браузера совместно разработали наборрешение: Так как элементы управления этой схемы не нарисованы вNAпатч слой, но рисовать наWebViewНа отображаемой странице с другимиHTMLЭлементы управления находятся на том же уровне, т.н."Визуализация того же слоя". После поддержки «рендеринга одного слоя» «собственные компоненты» и другие «компоненты H5» (имеющие в виду веб-компоненты, написанные на языке HTML5) могут быть наложены по желанию, и ограничение уровня больше не будет существовать.

Вы также должны хотеть знать"Визуализация того же слоя"Какие технологии за этим стоят. только по-настоящему понять"Визуализация того же слоя"Механизм, стоящий за этим, может более эффективно использовать эту способность. На самом деле, "рендеринг того же слоя" апплета находится вiOSа такжеAndroidРеализация под платформу отличается, поэтому следующее разделено на две части, чтобы представить схему реализации двух платформ.

3.1 Принцип «рендеринга одного слоя» на стороне iOS

3.1.1 Объяснение профессиональных терминов

WKWebView: ДаiOS 8Компонент браузера, предоставленный позже, используется на стороне iOS.WKWebViewрендерить,WKWebViewВнутренне используетсямногоуровневый подходрендерить.WKWebViewбудуWebKitгенерируется ядромCompositing Layer(композитный слой) визуализировать в один на iOSWKCompositingView(тип "родного компонента").

Compositing Layer: NA синтетический слой, сердцевина обычно состоит из множестваwebviewотображает узел DOM внутриCompositing Layer, поэтому между слоем композиции и узлом DOMОтсутствует взаимно однозначная связь отображения.

WKChildScrollView: Этакий "родной компонент". При установке свойства CSS узла DOM наoverflow: scroll(Младшие версии должны быть установлены одновременно-webkit-overflow-scrolling: touch)Позже,WKWebViewсоздастWKChildScrollView, с узлом DOMСуществует отношение отображения, который является роднымUIScrollViewподкласс , то естьWebViewПрокрутка на самом деле осуществляется настоящим встроенным компонентом прокрутки.WKWebViewЭто сделано для того, чтобы iOSWebViewПрокрутка более плавная. несмотря на то чтоWKChildScrollViewТоже "родной компонент", ноWebKitядро имеетУправляет иерархическими отношениями между ним и другими узлами DOM, поэтому вы можете напрямую использовать WXSS для управления иерархией, не беспокоясь о окклюзии..

3.1.2 Анализ принципов рендеринга

«Визуализация того же слоя» на стороне апплета iOS также основана наWKChildScrollViewРеализовано, "родной компонент" будет прикрепляться сразу после присоединенияМонтируем в заранее созданныйWKChildScrollViewпод контейнером, общий процесс выглядит следующим образом:

1. В интерфейсе апплета создайте узел DOM в веб-просмотре и установите для его свойства CSS значениеoverflow: hiddenа также-webkit-overflow-scrolling: touch, генерируетcontainerId, и поместите этоWKChildScrollViewИнформация о местоположении сообщается клиенту.
2. Внешний интерфейс уведомляет клиента о рекурсивном поиске, чтобы найти натив, соответствующий узлу DOM.WKChildScrollViewкомпоненты;
3. Смонтируйте «родной компонент» к этомуWKChildScrollViewна узле как его дочерний вид;
4. Ядро WebKit уже обрабатываетWKChildScrollViewИерархическая связь с соответствующим узлом DOM.

С помощью описанного выше процесса «собственный компонент» апплета вставляется вWKChildScrollView, которое является собственным сопоставлением узла DOM, созданного на шаге 1.WKChildScrollViewузел. На этом этапе изменение атрибута стиля этого узла DOM также будет применено к «родному компоненту». Поэтому «родные компоненты» «рендеринга одного слоя» ничем не отличаются от обычных компонентов H5.

3.2 Принцип «рендеринга одного слоя» на стороне Android

3.2.1 Профессиональный глоссарий

chromium: Мини-программы используются на Androidchromiumтак какWebViewСлой рендеринга, в отличие от iOS, на стороне AndroidWebViewдаВизуализация в одиночкубез создания чего-то вроде iOS на стороне клиентаCompositing View(Композиционный слой), сделанный веб-просмотр является полным представлением.

WebPlugin: Chromium поддерживает механизм WebPlugin, WebPlugin - это плагин в механизме ядра браузера, в основном используется дляРазобрать и описать<embed />Этикетка. Например, предварительный просмотр pdf в браузере Chrome, основанный на<embed />теги реализованы.

3.2.2 Процесс рендеринга ядра

Процесс рендеринга ядра можно разделить на следующие четыре шага. как показано ниже:

1. Разбор. Когда ядро ​​получаетHTMLданные, построитDOM Tree, а стили вычисляются для каждого узла.
2. верстка. траверсDOM Tree, построитьLayout Tree.DOM Treeа такжеLayout TreeМежду узлами нет однозначного соответствия.Layout Treeначальство.
3. рисовать. Чтобы повысить эффективность рисования,Layout TreeУзлы делятся на разные слои (Layer) по определенным правилам, и эти слои также образуют древовидную структуру, называемуюLayer Tree. Процесс рисования состоит в том, чтобы пройтиLayout Tree, который рисует содержимое каждого узла на слое, на котором он находится. В режиме жесткого отрисовки графического процессора серверная часть хранилища слоев представляет собой текстуру в графическом процессоре.Texture.
4. синтез. Модуль синтеза (уровень CC) ядра отвечает за синтез слоев вместе в определенном порядке и передачу их системе.FrameBuffer, и, наконец, вывод на экран.

3.2.3 Анализ принципов рендеринга

Из процесса рендеринга ядра видно, что для достижения «родных компонентов» и «рендеринга одного и того же слоя» необходимо использовать «собственные компоненты» в качестве основы.Layerвставить вLayer Treeсередина. Если вы можете отрендерить «родные компоненты» для предоставленного ядраTextureвыше, может быть достигнута цель «рендеринга одного и того же слоя». «Тот же рендеринг слоя» на стороне Android основан на<embed />Тег реализован в сочетании с расширением ядра хрома, общий процесс выглядит следующим образом:

<embed id="web-plugin" type="plugin/video" width="750" height="600" />

1. Создайте сторону WebViewembedузел DOM и укажите тип компонента;
2. Ядро хрома создаст экземпляр WebPlugin и сгенерируетRenderLayer;
3. Клиент Android инициализирует соответствующий «собственный компонент»;
4. Клиент Android рисует изображение «собственного компонента» в RenderLayer, созданном на шаге 2.SurfaceTextureначальство;
5. После завершения рисования ядро ​​получаетSurfaceTextureУведомление об обновлении содержимого, сообщающее ядру хрома об отображенииRenderLayer;
6. хром делаетembedузла и на экране.
7. Когда узел «рендеринга того же слоя» получает событие, он перенаправляет событие в модуль собственного компонента для обработки. Если собственный компонент не использует событие, ядро ​​снова выдаст это событие.

Это позволяет отображать «родной компонент» в WebVIEW, что эквивалентно добавлению внешнего плагина в WebVIEW.

Этот способ можно использовать дляmap,video,canvas,cameraДождитесь рендеринга "родных компонентов", дляinputа такжеtextarea, принятое решение заключается в прямом расширении компонентов хрома для поддержки некоторых возможностей, которых нет у самого WebView.

По сравнению с реализацией на стороне iOS, на стороне Android"Визуализация того же слоя"Действительно добавьте представление «собственного компонента» в процесс рендеринга WebView иembedУзел — это настоящий узел DOM, и теоретически к этому узлу могут быть применены произвольные атрибуты WXSS. Сторона Android относительно более тщательная «рендеринг того же слоя», но соответствующая стоимость реконструкции будет выше.

3.3 Небольшие дефекты «рендеринга одного слоя»

«Родные компоненты»"Визуализация того же слоя"Способность может дать сбой при определенных обстоятельствах.С одной стороны, вам нужно уделить немного внимания во время разработки.С другой стороны, сбой «отрисовки того же слоя» вызоветbindrendererrorсобытие, которое можно использовать для внесения изменений в пользовательский интерфейс в соответствии с обратным вызовом, когда это необходимоfallback.

• Для Android, если на устройстве пользователя нет собственной разработки WeChatchromiumядро, вы не сможете переключиться на"Визуализация того же слоя", который будет запущен на этапе инициализации компонентаbindrendererror.
• Ситуация на стороне iOS немного сложнее: если узел имеет изменение WXSS, когда базовая библиотека создает узел того же слоя, это вызоветРеорганизация ядра WebKit, тот же слой может выйти из строя в это время. Это потому, что установка-webkit-overflow-scrollingБлок атрибута div (контейнер) будет генерировать блок div (внутренний div) для рендеринга на более низком уровне, а производительность генерируется на устройствах iOS.UIScrollViewБудет дочерний вид, которыйWKCompositingView, если вы измените высоту внутреннего div, это может вызвать повторную визуализацию, что может привести к бессознательному удалению компонента «собственный компонент».Решение: вам следует стараться избегать частого изменения атрибутов WXSS узлов на «родных компонентах», особенно во избежание изменения атрибутов узла.positionАтрибуты. Если вам нужно преобразовать "родные компоненты", настоятельно рекомендуется использоватьtransformвместо изменения узлаpositionАтрибуты.

4 Пересмотр ям "родных комплектующих"

Если вы внимательно прочитали предыдущие главы, вы должны иметь более глубокое представление о «родных компонентах», и некоторые из проблем, с которыми вы сталкивались ранее при практической разработке, будут легко решены. Далее рассмотрим ямы "родных комплектующих".

4.1 <textarea>компонентplaceholderПроблема с проникновением?

• Похожие вопросы:

1. На телефонах Android содержимое, введенное компонентом textarea, отображается над фиксированным позиционированием?
2. Когда содержимое страницы превышает один экран, текстовое поле используется в окне подтверждения, а текстовое поле перемещается вверх и вызывает исключение, которое нельзя заполнить?

• описание проблемы: Как показано на рисунке, когда страница пролистывается вверх<textarea>компонентplaceholderбудет проникать.
• основная причина:<textarea>Компонент является «родным компонентом», и его уровень является самым высоким, независимо от того, какие другие компоненты на странице установлены.z-indexКак ни крути, а на "родных компонентах" не прикроется.

• другие проблемы:Предотвратит ли textarea смахивание в режиме прокрутки?
• основная причина:«Родные компоненты» нельзя использовать вscroll-view,swiper,picker-view,movable-viewПотому что, если разработчик вставляет «собственный компонент» в качестве своего дочернего узла в прокручиваемую область DOM, поскольку «собственный компонент» непосредственно вставляется на уровень вне веб-представления, он не связан с DOM, поэтому он не будет следовать движение. не будет резаться.

Есть три основных решения:

1. использоватьcover-viewПереопределение собственного компонента<textarea>компоненты. собирается проникнутьviewа такжеbuttonиспользоватьcover-viewзаменять.
2. Судя по перелистыванию страницы<textarea>Показать и скрыть компоненты. использоватьonPageScrollфункция для получения расстояния прокрутки страницы, когда расстояние прокрутки равно<textarea>компонентtopПри вычитании расстояния коробки, закрепленной на вершине, пусть<textarea>компоненты скрыты или помещены<textarea>компонентplaceholderУстановка его пустым также может решить проблему проникновения.
3. использоватьviewМоделирование этикетки<textarea>компоненты, чтобы избежать<textarea>компонентplaceholderПроблема проникновения. использоватьviewМоделирование этикетки<textarea>компонент, при нажатииviewПри вкладке скрытьviewОтображение этикетки<textarea>компоненты и использоватьfocusатрибут пусть<textarea>Компонентный фокус. Давая<textarea>набор компонентовbindinputспособ отображения введенного текста вviewвнутри этикетки. пройти черезbindblurсудить<textarea>Компонент теряет фокус, скрывается<textarea>компоненты и пустьviewМетки отображаются.

4,2 дюймаscroll-viewиспользуется вinput,inputПри прокрутке страницы, когда появляется клавиатура, содержимое поля ввода будет смещено?

• Похожие вопросы:

1. scroll-view прокручивает страницу, когда появляется клавиатура ввода, страница прокручивается вверх, а содержимое поля ввода смещается. Как с этим бороться?
2. Scroll-view + input несоответствие класса ввода и полосы прокрутки появляются на входе?
3. Будет ли введенное содержимое и текст-заполнитель ввода в режиме прокрутки неуместны?

описание проблемы: как показано на рисунке, в более длинной форме страница может нуждаться в скольжении, например, при использованииscroll-viewтег, в который вставлятьinputкомпонент, который может привести к смещению входного контента вверх и неуместно.

основная причина:Компонент ввода ведет себя как «родной компонент», когда он сфокусирован., если разработчик вставляет «собственный компонент» в качестве своего дочернего узла в прокручиваемую область DOM, поскольку «собственный компонент» непосредственно вставляется на уровень вне веб-представления и не имеет отношения к DOM, он не будет следовать за движением и не будет вырезано.

Решение:Необходимо установить государственный контрольscroll-viewДопускать ли скольжение, когдаInputПри получении фокуса свайп запрещен, приInputСвайп разрешен, когда он не в фокусе.

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

• wxml

<scroll-view scroll-y="{{isScroll}}" scroll-into-view="{{intoView}}" style="height: 100vh;">
    <input  type="digit"  bindfocus="bindfocus" bindblur="closeblur"  />
</scroll-view>

• js

// 获取焦点事件
bindfocus(e){
    this.setData({
      isScroll:false
    })
},
// 失去焦点事件
closeblur(e) {
    this.setData({
      isScroll:true
    })
}

базовая библиотека2.10.4рост,inputкомпонент добавленalways-embedсвойство, если оно истинно, может заставитьinputВ том же состоянии слоя фокус по умолчаниюinputПереключится на другое состояние слоя (эффективно только в iOS).

Поэтому есть второе решение этой проблемы:

• wxml

<scroll-view scroll-y="{{isScroll}}" scroll-into-view="{{intoView}}" style="height: 100vh;">
    <input type="digit"  bindfocus="bindfocus" bindblur="closeblur"  always-embed = true />
</scroll-view>

4.3 live-playerПроблема сбоя компонента "рендеринг того же слоя"?

Согласно текущей фоновой статистике, следующие модели вызовут сбой «рендеринга одного и того же слоя»:

• HONOR: HLK-AL00, HLK-AL10, JSN-AL00a, HRY-AL00a
• HUAWEI: ELE-AL00, JNY-AL10, TAS-AN00
• VIVO: vivoX9s, V1813BA
• OPPO: CPH1721, A59m, PBBM00, R11, R11s, R9 Plusm A, R9s Plus
• xiaomi: Редми 7, Ми 8 Лайт
• iphone: iphone 6

По версии следствия, причин отказа может быть три.

• Версия WeChat и версия базовой библиотеки слишком малы для поддержки «отрисовки одного слоя»;
• Устройство пользователя не разработано WeChatchromiumядро;
• Пользователь щелкнул ссылку, которая принудительно переключается на ядро ​​X5., эту проблему можно устранить, щелкнув следующую ссылку в приложении WeChat:Web.QQ.com/?set_app бюстгальтер…, появится всплывающее окно «Открыть веб-страницу, которая будет использовать: WV_KIND_NONE», перезапустите приложение WeChat, чтобы переключиться обратноchromiumЯдро.

К счастью, сбой «рендеринга того же слоя» вызоветbindrendererrorсобытие, вы можете сделать резервный пользовательский интерфейс в соответствии с этим обратным вызовом, когда это необходимо. Просто переведите его, вы можете использоватьcover-view,cover-imageКомпоненты, реконструируйте набор компонентов живой комнаты (шквал прокрутки, лайки, сумки с покупками, лотереи, список ПК и т. д.) в качестве запасного варианта пользовательского интерфейса в случае сбоя «рендеринга того же слоя». Однако функции комнаты прямого эфира сложны и разнообразны, а стоимость трансформации очень высока.cover-view,cover-imageИспользование компонентов «ограничено» (подробности см. в 2.3) Трудно восстановить на 100% прежний дизайн пользовательского интерфейса. Как выбрать, должен пройти несколько оценок.

4.4 canvasКак насчет «рендеринга одного слоя» компонентов?

дляcanvasО проблеме компонента "наступить на яму" автор писал ранее две статьи, и повторять их здесь не буду.

• Практическое руководство по мини-программе Canvas - научит вас, как легко избегать ям
• Мини-программа Live-разбор принципа реализации Crazy Like Canvas Animation

5 Резюме

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

Наконец, добро пожаловать в обсуждение, ставьте лайк и переходите ｡◕‿◕｡～