TVConsole在IPTV机顶盒端开发的应用

概述

IPTV机顶盒开发有很多的坑,爬不完的坑,当然其他开发也是一样……哈哈哈。今天我来说一下IPTV-B/S模式开发中调试的坑。如果你开发过机顶盒项目(以下都特指B/S模式)[没开发过的肯定也不会看这篇文章],那你肯定经历过这种时候……写完一堆代码,然后浏览器上初步看一遍,哇,完美!赶紧上传服务器,使用机顶盒跑一下,免得代码自动消失了,哈哈哈。一顿 cd ll cp rm -rf / 操作后,启动机顶盒,咦~黑屏,肯定是缓存原因,代码还未更新到,肯定不是我代码的错……等等再重启下,还是黑屏???what??难道真的代码出错???怎么办?断点调试下吧(这种方式心里想想就好了)机顶盒上根本打不开控制台好吧!!!此处建议尽早放弃,不过为了工作,毕竟工作使我快乐,还是不放弃吧……继续爬坑。打不开控制台,无法调试,那就console.log呗,多加一些,看看哪些打印了,哪些没打印呗,这不就一样能定位嘛!但……无法打开控制台!!!泪崩……怎么办,那就只能用最另一种宇宙最强的JS API document.getElementById 我打印到页面上总行吧,好吧,遇到比较正常的问题的话,用这种方式也就完美解决了!哎,送了口气……终于解决了!页面总算是打开了,但是……居然焦点不能移动……啊,要崩溃,坑定代码哪里又报错,机顶盒的浏览器真是小气啊,啥高级属性都不能用,又怎么办?

TVConsole

来了,来了,它来了。TVConsole是一个js组件,将其引入页面中,可以显示出一个面板,也就是一个简易的浏览器控制台,就像这样。


这看起来是不是很像一个东西?对,没错,就是VConsole腾讯开发的一款移动端的控制台调试器,最初是用于微信公众号、小程序开发这方便调试用,后来,当程序员都发现了这个东西后,You Know,好东西总是会被用于很多地方,也就普及了。我也就基于这套东西,再包装了一层,用于机顶盒。

为什么再封装?

其实不止是封装,我还修改了一点源代码,这也造成了源码的污染,不利于升级。未来准备采用插件开发,不污染源码,也可以随着主框架的升级而伴随升级。
回归主题,为什么要封装?因为机顶盒开发不同于其他移动端和PC,移动端和PC都可以很容易触发 touch click等事件,但是机顶盒不吃你这套,所有操作都是 遥控器,对,就是这东西!要想点击,那就得重新监听 document.onkeydown 事件,然后触发逻辑。所以咯,再封装了一层。

不讲代码,只讲使用

这里不讲代码,但是你可以在这里TVConsole https://gitee.com/underline/TVConsole
查看代码啊!已经上传码云。
使用:

  • 下载 dist/tvconsole.min.js
  • 引入到页面 <script src="path/to/tvconsole.min.js"></script>建议在head中引入
  • 初始化一个实例 var tvconsole = new TVConsole()
  • 此后可以触发 tvconsole.show() 显示界面
  • 更多方法,请看这里https://gitee.com/underline/TVConsole

进入界面后都是一些按键操作,按键后面板右上角会显示你的按键,目前支持的按键有(并持续更新):

  • 1: 显示Log面板
  • 11: 显示Log下的All面板,12: 显示Log下的Log面板,以此类推
  • 2: 显示System面板
  • 21 :显示System下的All面板,以此类推
  • #: 隐藏控制台面板
  • *:展开控制台打印的Object信息
  • **:收起控制台打印的Object信息

暂时完了……在开发的路上越走越远

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章