Резюме веб-разработки ТВ-приставок, чтобы не наступать на ямы

внешний интерфейс JavaScript CSS jQuery SCSS

1. Краткий обзор веб-разработки телевизионной приставки

Для веб-разработки браузера Liantong, встроенного в операционную систему UUTVOS кабельной приставки Oriental, обобщим некоторые проблемы и навыки, возникшие при разработке. Браузер основан на кастрированной версии Firefox, поэтому в разработке есть какие-то необъяснимые ямки. Я пытался использовать Vue для разработки веб-проекта телевизионной приставки, и опыт оказался плохим: первое время загрузки долгое, и страница зависает. В связи с ходом проекта не было попыток ленивой загрузки компонентов и обработки ленивой загрузки маршрутизации, что может сократить время первой загрузки. Для разработки рекомендуется использовать JQuery.

1.1 Уведомление о карьере

1.2 Резюме разработки

1.2.1 Достаточно одного WebStrom ☞↑

Наш фон уже готов, а код напрямую копируется на сервер, а проект можно в любой момент просмотреть на приставке.

  • Tools>Deployment на панели инструментов WebStorm можно подключить к удаленному серверу конфигурации.Каждый раз, когда вы нажимаете CTRL + S, файл проекта будет автоматически загружен.Рекомендуется трещина в стене!
  • Настроив WebStrom, вы можете отслеживать и компилировать файлы Sass.Автоматическая компиляция CTRL + S очень удобна.
  • Если вам нравится VSCode, ничего страшного, может в VSCode есть эти функциональные плагины, я не стал заморачиваться.
  • Если в WS используется Sass или Less, скомпилированный файл CSS не будет автоматически загружаться на сервер при каждом сохранении, и его необходимо загружать вручную в WS.

1.2.2 Используйте любимую технологию ☞↑

  • Официальная документация по веб-разработке приставок рекомендует нативную разработку на JS, в настоящее время JQ более удобен в использовании, да и недостатков в производительности пока нет.
  • Лесс и Сасс оба влюблены. Сила переменных велика. Даже если изображение ресурса представляет собой машину с разрешением 1080p, я использую ее для компоновки на машине с разрешением 720p. Используя переменные Sass и функции расчета, очень легко управлять значениями атрибутов в CSS.
  • При рендеринге списка используется art-template, механизм шаблонов от Tencent, и начать работу легко, обратившись к его документации.официальная документация.

1.2.3 Отображение HTML-элементов с меньшим контролем JS ☞↑

Производительность браузера приставки очень низкая, если вы хотите еще и проигрывать видео, то место для проигрывания JS весьма ограничено.

  • Под панелью вкладок есть 6 опций. Структура HTML в опциях в основном такая же. Если вы планируете повторно использовать HTML-код той же структуры с JS, остановитесь быстро и честно копируйте и вставляйте HTML-код. Иначе при переключении Табов случайные лаги отвратительны.
  • аналогичный$(id).css({"backgroundImage":"url('...')"})а также$(id).attr({"src":"./*.jpg"})Такого рода операции по управлению уровнем отображения пользовательского интерфейса в JS следует избегать, и ее следует выполнять непосредственно в HTML, насколько это возможно, и эта операция может быть принята самое большее:$(id).addClass(). Браузер приставки такой наглый. (Это то, что я пробовал, а суть разницы в операционных показателях JQ еще предстоит изучить.)
  • Размер кнопок в веб-приставке, как правило, очень большой. Не используйте фоновое изображение кнопки в JS. Если воспроизведение видео вызывает большие потери производительности, вы будете ошеломлены картой пользовательского интерфейса в Интернете в это время. .

1.2.4 "Фокусное событие" используется некоторое время ☞↑

  • Обязательно избегайте использования «событий фокуса» для запуска связанных операций. События фокуса — это системные события с высокой частотой. Когда Интернет работает на телеприставке, события фокуса, как правило, не находятся под абсолютным контролем разработчиков. Также следует избегать события «потеря фокуса».
  • «Событие фокусировки» и «события кнопок вверх, вниз, влево и вправо» имеют определенную связь, «событие фокусировки» используется неправильно, и возникает много проблем.
  • События кнопки «вверх», «вниз», «влево» и «вправо» обычно могут заменить события фокуса.
  • a:focus {}Этот селектор CSS можно использовать с уверенностью.

1.2.5 Универсальный setTimeout()☞↑

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

  • Некоторые операции независимо от того, как они написаныне бегать, или не может получить значение (null), особенно в сценариях загрузки страницы и перехода между родительскими и дочерними страницами. добавить этоsetTimeout(function(), ms)Готово, попробуй Бейлинга, большинству людей я ему не говорю ^_^.
$(document).keydown(function () {
    if (event.which  === 4097) {
        var distance = $("#list").scrollTop();
        sessionStorage.removeItem("listScrollTopVal");
        sessionStorage.setItem("listScrollTopVal", JSON.stringify(distance));
        // 按下确定键后，把获得焦点的元素的 id 保存到 sessionStorage中，
        // 这个时候就要在外边加一个延时函数，甚至可以将时间设置成 0ms 也行。
        setTimeout(function () {
            sessionStorage.removeItem("listFocusItemId");
            sessionStorage.setItem("listFocusItemId",JSON.stringify(document.activeElement.id));
        }, 100);
    }
});

1.2.6 Абсолютное позиционированиеposition:absolte;экономить время и энергию ☞↑

  • Видимая область установленного ящика фиксирована, а абсолютное позиционирование является самой экономией времени и экономия труда.
  • Родительский элемент с элементами абсолютного позиционирования должен бытьposition:relativeПозиционирование, это обязательно!
  • Несколько элементов блочного уровня располагаются на одной линии, рассмотрите возможность использованияdisplay:inline-block;, чем при использованииflaot:...Плавающая планировка.

1.2.7overflow:scroll;не могу прокрутить вверх ☞↑

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

  • На ПК установите элементы, которые необходимо прокручивать:overflow：scroll;Появится полоса прокрутки, позволяющая прокручивать. А вот на ТВ-приставке есть проблема прокрутки вниз, но не прокрутки вверх.
  • Решение. Оберните элемент, который нужно прокручивать.<a href="#"></a>.и должен установить display:block. ;
<div class="content">
    <a href="#/" style="display:block;outline:none;">
      <div class="content-html">需要滚动的内容</div>
    </a>
  </div>

1.2.8 Переключение воспроизведения видео, добавление защиты от сотрясений имеет важное значение ☞↑

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

  • Anti-shake на самом деле является функцией задержки, которую можно представить как:Проведите картой, чтобы сесть в автобус, пока кто-то проводит картой, водитель не может вести машину. 
$("#nav--second").keydown(function(event){
    if(event.which === 39) {
        // 这里的EVAN是一个全局的命名空间，EVAN.timer是一个全局变量
        clearTimeout(EVAN.timer);
        EVAN.timer = setTimeout(function () 
        create(EVAN.homePageVideoUrlArr[2]);
        }, EVAN.gap);  // 时间1-2s左右比较合适。
    }
});
Категории