电视机顶盒web开发总结，避免踩坑

AragornK
6,245 阅读3分钟

1.电视机顶盒web开发总结

针对东方有线机顶盒UUTVOS操作系统中内置的联彤浏览器web开发，总结一些自己在开发中遇到的问题和技巧。浏览器是基于Firefox的阉割版，所以开发中有一些莫名其妙的坑。已经尝试过使用Vue开发机顶盒web项目，体验较差：首次加载时间长、页面卡顿。由于项目进度推进，当时没有尝试组件懒加载和路由懒加载处理，这样做或许可以减少首次加载时间。推荐使用 JQuery 进行开发。

1.1采坑预告

1.2开发总结

1.2.1一个WebStrom就够了 ☞↑

我们的后台是现成的，直接把代码拷贝到服务器上，在机顶盒上就可以随时预览到项目。

  • WebStrom 的工具栏中的 Tools>Deployment 可以连接到配置远程服务器上，每次 CTRL + S 会自动上传项目文件,好用的不要不要的。墙裂推荐！
  • 通过配置 WebStrom，可以监听编译 Sass 文件，CTRL + S 自动编译就是这么方便。
  • 喜欢 VSCode 的话，未尝不可，或许 VSCode 里也有这些功能插件，我没去折腾罢了。
  • 如果在 WS 中使用了 Sass 或者 Less ，每次保存的时候，被编译后的 CSS 文件是不会自动上传到服务器上的，需要在 WS 里手动上传。

1.2.2用自己喜欢的技术 ☞↑

  • 机顶盒web开发官方文档推荐用原生 JS 开发，目前来看的话，JQ 用起来方便一些，暂时没有性能缺陷。
  • Less、Sass 两个都大爱。变量的威力大大的，就算资源图片是1080p机器的图，我拿来布局到720p的机器上，利用 Sass 的变量和计算特性，非常容易控制CSS中的属性值。
  • 做列表渲染的时候用到了 art-template，腾讯出的一个模板引擎，参考它的文档，还是很容易上手的。官方文档。

1.2.3少用JS控制呈现 HTML 元素 ☞↑

机顶盒浏览器的性能非常低，如果还要做视频播放的话，JS 可发挥的空间相当有限。

  • 一个 Tab 栏下有6个选项，选项里面 HTML 结构基本都是相同的，如果你打算用 JS 复用相同结构的 HTML 代码的话，赶紧停下，老老实实的 copy 和 paste HTML代码吧。不然切换 Tab 的时候，随机的卡顿很恶心。
  • 类似 $(id).css({"backgroundImage":"url('...')"}) 和 $(id).attr({"src":"./*.jpg"}) 这样的在 JS 里面控制 UI 显示层面的操作要避免，尽量直接在 HTML 中完成，最多能接受这个操作： $(id).addClass()。机顶盒浏览器就是这么傲娇。（这是我试出来的，至于JQ操作性能方面的差异本质还是需要研究的。）
  • 机顶盒web中按钮的尺寸一般都很大，按钮背景图这些东西，就不要在 JS 中去操作，如果播放视频引起了性能高损耗，这个时候web中的UI卡的你一愣一愣的。

1.2.4“焦点事件”使用一时爽 ☞↑

  • 一定要避免使用"焦点事件"触发相关操作，焦点事件是高频率的系统事件，web在机顶盒运行时，焦点事件一般不受开发人员的绝对控制。“失去焦点”事件同样要避免使用。
  • “焦点事件”与“上下左右按键事件”具有一定的耦合性，“焦点事件”使用不当，问题百出。
  • 上下左右按键事件，一般都可以替换焦点事件。
  • a:focus {} 这个CSS选择器可以放心的使用。

1.2.5万能的 setTimeout() ☞↑

机顶盒内置的浏览器很恶心啊，阉割版的就算了，一些逻辑上的东西跟PC上也不同。

  • 一些操作无论怎么写都不运行，或者拿不到值（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;不能往上滚动 ☞↑

电视机的可视区域固定，整个页面是不滚动的，业务场景中，页面中的局部需要滚动：列表页、详情页。

  • 在PC上，给需要滚动的元素设置：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切换视频播放，加防抖必不可少 ☞↑

机顶盒浏览器的性能本来就很差，在同一个页面的 Tab 上切换多个视频播放，按键过快的情况下，UI上焦点连续切换过去很多个元素了，视频的播放地址才挨个往过去切换，这个时候很容易造成卡顿或者浏览器崩溃。加上放抖动，有效解决用户快速切换播放引起的卡顿。

  • 防抖其实就是一个延时函数，可以想象成：刷卡上公交车，只要有人刷卡，司机就不能开车。
$("#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左右比较合适。
    }
});
avatar
文章
阅读
粉丝

友情链接：