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像素
//修改后记得在失焦或者离开页面的时候重置，默认是50
this.$tv.resetOffsetDistance();
（图2）
init所有可配置项
初始化配置init
init(…)
| name | 描述 | 默认值 | 是否必须 |
|---|---|---|---|
| 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://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