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 的时候,随机的卡顿很恶心。
    clipboard.png
  • 类似 $(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左右比较合适。
    }
});
Logo

前往低代码交流专区

更多推荐