OTT开发总结

插件使用

npm install vue-awesome-mui

npm i vue-tv-focusable

聚焦插件

常用指令

this.$tv.requestFocus(Element,bool); // Element;   
  必填 bool非必填。默认为true指定移动到某个聚焦节点,获取节点Element可以用refs或者 e.target
​
 this.$tv.formAutofocus=false；// 不可以输入
控制选中的表单是否可以输入,默认为true
​
​
this.$tv.findFocusType = 0;
聚焦查找方式,1是就近查找,0是直线查找

@up @down @left @right @onFocus @onBlur @longPress @click
监控按键,其中click同事可对应pc端的点击事件
​
$tv.resetFocusClassName() 重置 focusClassName 
$tv.resetFindFocusType() 重置 findFocusType 
$tv.resetKEYS() 重置 KEYS
....
$tv.reset() 重置所有
​
初始配置
 // 初始化配置
   // 全局配置可在mian.js中，也可以放在APP.vue中
 const vm = new Vue();
 // 1.init初始化（init的所有配置项可以在最后面的表格中查看）
 vm.$tv.init({
   focusClassName: "on-focus", // 聚焦元素的className （默认focus）
     KEYS: {
     KEY_LEFT: [37, 21], 
     KEY_UP: [38, 19], 
     KEY_RIGHT: [39, 22], 
     KEY_DOWN: [40, 20]，
     KEY_ENTER: [40, 20]
     }, // 自定义键值
     longPressTime: 800, // 长按响应时间（单位：毫秒），默认500ms
     distanceToCenter: false // 是焦点始终在可是范围的中间部分， 默认false
 });
​
​
// 2.独立配置初始化
 vm.$tv.KEYS= {
     KEY_LEFT: [37, 21], 
     KEY_UP: [38, 19], 
     KEY_RIGHT: [39, 22], 
     KEY_DOWN: [40, 20]，
     KEY_ENTER: [40, 20]
   };  
   vm.$tv.longPressTime= 800; //延迟事件为800毫秒

技术难点、踩坑记录

1.监控安卓返回键

1、安装 npm install vue-awesome-mui

2、src>main.js应用

import Mui from "vue-awesome-mui";
Vue.use(Mui);

3、实现返回跳转,还在改善,有可能返回键关闭弹窗的逻辑,暂未与考虑

src>router>index.js

注意:返回键是安卓调试专有,在电脑端调试会报错,所以在电脑上调试时候需要把返回键监控注释掉

//导航守卫+监听返回键
router.beforeEach((to, from, next) => {  
var quit = false; //是否退出
  mui.back = function () {
    //按下物理返回键
    if (!quit) {
      // 如果是退出
      if (to.name == "Home" || to.name == "About") {
        // 如果是主页
        mui.toast("再按一次退出应用"); //两秒之内再按一次退出app
        quit = true;
        setTimeout(function () {
          quit = false;
       }, 2000);
     } else {
        //不是主页
        if (to.matched[0].instances.default.showmask) {
          to.matched[0].instances.default.showmask = false;
       } else {
          history.go(-1); // 返回上一页
       }
     }
   } else {
      plus.runtime.quit(); //退出app
   }
 };
  next();
});

2.监控上下左右、聚焦、确认等等,

安装npm i vue-tv-focusable

插件网站

https://slailcp.github.io/?type=vue-tv-focusable#%E7%9B%91%E5%90%AC%E8%BF%94%E5%9B%9E%E9%94%AE%E9%97%AE%E9%A2%98

https://blog.csdn.net/sllailcp/article/details/109044265

基础使用

 在main.js中添加

/*+++++++++添加下面两行+++++++++*/
import focusable from "vue-tv-focusable";
Vue.use(focusable);
/*+++++++++添加结束+++++++++*/

聚焦简介

设置聚焦盒子

<div v-focusable>可获取焦点的元素</div>
<div>不可获取焦点的元素</div>
//当盒子选中聚焦时候,会自动加上一个focus类的
<div v-focusable></div> →  <div v-focusable class="focus"></div>  ​

.focus默认格式,当然你也可以自己改

.focus {   
      transform: scale(1.1);
    border: 2px solid red;
    box-shadow: 0 0 20px red;
}

取消当前盒子的聚焦

   e.target.removeAttribute("focused"); //去除当前选中的节点
e.target.removeClass("focus"); ​

关于TV-app的分辨率问题

电视的分辨率是1280*720的话,电视浏览网页的分辨率则是960 * 540,目前我测试过两种智能电视都是这样的!!所以导致根本显示不全。

解決方法目前研出来两种,第一种是,让UI直接修改图片尺寸,自己按照960*540的方式布局

第二种进行屏幕缩放,挺方便的但是将来可能会遇到bug,

在App.vue中created步骤时候,执行缩放命令

  document.body.style.zoom = 0.75;//可以根据具体的电视屏幕来调节

在这之前可以进行机型判断,这样可以实现响应式布局的要求

为了确保安全,可以在index.html里加一个meta标签

  <!-- <meta content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> -->
 <!-- user-scalable=no" 禁止用户缩放 -->

关于通过聚焦判断图片的显示与隐藏

要是每次通过js判断该节点是否含有class标签focus来进行v-show的显示与隐藏会比较麻烦,目前建议通过css来进行节点的显示与影藏

    .focus {    transform: scale(1);
      border: 0px solid red;
      box-shadow: 0 0 0px red;
   }
​
    img {
     // position: absolute;
   }
​
    .box img:nth-child(1) {
      display: inline-block;
   }
​
    .box img:nth-child(2) {
      display: none;
   }
​
    .focus img:nth-child(1) {
      display: none !important;
     // display: none;
     // display: ;
   }
​
    .focus img:nth-child(2) {
      display: inline-block !important;
​
   }  
原创内容,非商业转载请申明出处,商业转载请联系作者