OTT开发总结 2.0版本 发布于 2022-05-07 352 次阅读 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毫秒 //3.聚焦滑动效果 //滚动时间,默认200 // this.$tv.smoothTime = 300; this.$tv.smoothTime = 0;//设置为0的话就是不要动画 //动画流畅度smoothTime(数值越小动画越流畅, //但是越耗性能)默认是20, //当smoothTime设置为40时,spacingTime=20和spacingTime=1的效果是不一样的 this.$tv.spacingTime = 40; //4.限制滚动区域(图一) //一般在弹窗或者横向移动图(如:选集)的时候可以用到,一般都是三个属性连用 //只有upbox里面的内容可以聚焦 this.$tv.limitingEl = document.querySelector(".upbox"); //限制页面的滚动的盒子 this.$tv.scrollEl = this.$tv.getElementByPath( '//div[@class = "upbox"]' ); //强制聚焦到某个内容(当前弹窗中的可聚焦内容) this.$tv.requestFocus(this.$refs.update); }, 600); //值得注意的是,当聚焦弹窗关闭之后,或者需要切换页面的时候,需要重置limitingEl和scrollEl,否则将会出现无法聚焦和无法滚动等bug //重制 this.$tv.resetScrollEl(); this.$tv.limitingEl = null;//或者 this.$tv.resetLimitingEl(); ( 图1 ) //5、滚动到边界自动移动的距离(图2)这里在做横向滚动框(如选集)和做横向页面(如搜索页)的时候会用到this.$tv.offsetDistance = 50 // 到达边缘的时候距离边缘50像素this.$tv.offsetDistance = 250 // 到达边缘的时候距离边缘250像素//修改后记得在失焦或者离开页面的时候重置,默认是50this.$tv.resetOffsetDistance(); (图2) (图2) init所有可配置项 初始化配置init init(…) name 描述 默认值 是否必须 focusableClassName 可聚焦的classname,(设置了focusable的时候不需要设置此项) 空字符串 no focusClassName 指定焦点元素类名。默认为“焦点” “focus” focus no initDis 差值 20 no findFocusType 移动类型,1:就近查找 0:直线 查找 1 no KEYS 上下左右的键值 { KEY_LEFT: [37, 21], KEY_UP: [38, 19], KEY_RIGHT: [39, 22], KEY_DOWN: [40, 20], KEY_ENTER:[13, 23] } no offsetDistance 边缘距离 50 no longPressTime 长按响应时间 500 no distanceToCenter 焦点是否在滚动区域保持剧中显示 false no limitingEl 整个界面,只有limitingEl内的焦点可以聚焦 null no formAutofocus 表单控件是否可以输入或者编辑 true 技术难点、踩坑记录 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 比较详细的插件使用地址 https://slailcp.github.io/?type=vue-tv-focusable 基础使用 在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"); 3.关于TV-app的分辨率问题 电视的分辨率是1280720的话,电视浏览网页的分辨率则是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" 禁止用户缩放 --> 4.关于通过聚焦判断图片的显示与隐藏 要是每次通过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; } 5.关于H5播放器的封装制作 详情请看文档http://www.croft.vip/544-2/ 6.关于当贝支付 准备工作 和安卓SDK一样,去后台创建一个应用,拿到 dbkey 和 appidkey URL跳转 url地址: https://pay.dangbei.com/openapi/createOrder.php 参数: 参数名 类型 说明 order string 接入方生成的订单号 pid string 接入方的商品id,同一个商品使用同一个id pname string 商品名称 pdesc string 商品描述 appidkey string 支付后台拿到的appidkey return_url string 支付成功想要跳回的页面,需要urlencode,自动续费签约不会跳转;关闭交易或者支付失败也会跳转到这个页面,注意取err_msg参数判断状态,ok:支付成功;cancel:取消交易;fail:支付失败 is_contract string 是否是自动自费,默认0为普通扣款,1为自动续费,会跳转到微信签约页面。 total_fee string 商品价格,格式为 :1.02 extra string 附加参数 usernick string 用户昵称,用于展示自动续费签约展示昵称 t string 当前时间戳 channel string 渠道 vername string 应用的版本号 sdkversion string sdk的版本号 sign string 鉴权参数,见下方 将上述参数拼接成url,并跳转到该链接。 sign签名方法。 1. 将 入参的order,pid,appidkey,total_fee,t 这5个参数按照下方结构排列,其余入参不参与签名,如: str = order={orderno}&pid={pid}&appidkey={appidkey}&total_fee={total_fee}&t={time} 2. 将当贝支付后台拿到的dbkey 直接拼接在上方str后面,,如 str = order={orderno}&pid={pid}&appidkey={appidkey}&total_fee={total_fee}&t={time}{dbkey} 3. 将上方的字符串进行md5加密,结果统一小写 sign= md5(order={orderno}&pid={pid}&appidkey={appidkey}&total_fee={total_fee}&t={time}{dbkey}) MD5加密方法 这里要用到前端MD5加密,js-MD5,地址https://blog.csdn.net/qq_40542728/article/details/95205530 (1)安装 npm install js-md5 (2)main.js中引入 import md5 from 'js-md5';Vue.prototype.$md5 = md5; (3)使用 this.$md5("加密内容") 7.关于顶部栏目聚焦难点 产品对顶部聚焦有很多个要求,如下 1、通过返回的type值来判断顶部的栏目标签是否生成 2、标签分为两个状态,选中和非选中 3、当标签失焦的时候,如果路由没变标签的状态页不能变(这点决定了不能用组件自带的.focus决定标签是否是选中状态) 4、在同一个路由中,从上下往标签聚焦,只能聚焦到当前页面对应的标签,当聚焦到标签栏中的标签时候,按左右可以聚焦到其他标签(这个相当于是聚焦组件的一个缺陷吧) <!--1.2.3 利用v-if来判断是否生成聚焦盒子,用v-show结合路由名称来判断标签状态 --> <div v-focusable @click="$router.push('/home')" @onFocus="$router.push('/home')" v-if="headList[0].status == 1" > <img src="../assets/head_img/xueyuan.png" alt="" v-show="$route.name != 'Home'" /> <img src="../assets/head_img/xueyuanpre.png" v-show="$route.name == 'Home'" alt="" /> </div><!--4.这个由于是插件缺陷,暂时没有特别好的方法实现。目前我的视线方法是: 把每一个区块的第一个专题单独提取出来,监控它的上键@up,然后用 this.$tv.requestFocus( this.$tv.getElementByPath('//div[@class="top_select_box"]/div[2]') );来指定它聚焦到第几个顶部的栏目标签--> 8、h5+app实现安卓下载apk更新功能 //首先还是要全局引mui.js//main.js中引入import Mui from "vue-awesome-mui";Vue.use(Mui);//app.vue中创建更新函数updateFn() { //update_box更新框,must_update强制跟新框。根据data中的版本号和线上返回的版本号决定要不要弹出更新框,根据线上返回的状态码决定是否要强制更新 this.update_box = false; this.must_update = false; this.downloading_box = true; setTimeout(() => { this.downloading_box = false; this.closeFn(); }, 10000); // plus.nativeUI.confirm("发现版本更新,请问是否要下载", function (e) { var wt = plus.nativeUI.showWaiting; var url = this.version_data.url; var dtask = plus.downloader.createDownload(url, {}, function (d, status) { if (status == 200) { var path = d.filename; //调动安卓原生安装apk let _this = this; plus.runtime.install(path).then((_this.this.downloading_box = false)); } else { alert("下载失败:" + status); } }); dtask.start(); },
Comments | NOTHING