安卓Tv嵌入web开发

移动端嵌入h5

• 最近的开发需求遇到了android和ios嵌入h5的开发,以及android TV 嵌入h5的开发，这种移动端通过内置浏览器嵌入h5的开发很常见，最主要的问题就是两者之间的交互，客户端调用h5的方法，h5调用客户端的方法，两者之间互相调用。
• 嵌入开发前端需要提供app开发人员的一个打包好的html文件，包含引入的静态资源在内。或者是把前端发布到服务器，给一个url给app的开发人员，这样也可以。

Development

• 嵌入开发要注意的适配的问题(其它文章有写)，在vue里面定义在methods的方法怎么能被客户端调用，只需要在mounted的时候将方法挂载到window，客户端就能访问到methods的方法。
• 调用客户端的方法，客户端会提供一个句柄，我们在window对象下能访问并调用到这个方法。

//客户端调用vue方法
mounted(){
    window.initData=this.initData
},
mthods(){
    initData(){
        console.log("初始化数据")
    }
}


//vue调用客户端方法，由app开发人员提供，不需要前端操心
    if (ISANDROID) //调用安卓
    {
        window.AnalyticsWebInterface.showErrorFunction();
    }
    else
    {
        window.webkit.messageHandlers.ShowErrorFunction.postMessage(obj); //调用ios
    }

Android Tv嵌入h5

• 安卓Tv嵌入h5的开发和手机安卓嵌入开发问题要多一些，Tv的安卓版本一般比较老，更新慢，品牌多适配测试的难度大，一般只测试主流电视品牌。
• 最近有一个这样的需求，嵌入交互的方式和手机一样，只不过TV多了个遥控器，通过遥控器来和h5交互。TV的遥控器的键值对应js的几个键值，起初是想监听onkeydown事件通过键值执行对应的交互，在实现的过程中发现了一个问题，遥控器选中一个元素高亮，enter键按下事件触发，同时也会触发别的事件，有时候触发，有时候不触发，困扰了一段时间，查阅资料发现Tv webview 加载h5以后遥控器操控会自动获取焦点，按键就会触发绑定在元素上的事件，所以需要将高亮的元素获取焦点，就不会触发别的元素绑定的事件。用到了vue-tv-focusable，文档地址。

Development

• 使用vue-tv-focusable也比较简单下载引入，在元素要获取焦点的元素设置v-focusable，设置 v-focusable就相当于 android 上设置了 android:focusable=“true”，当用户按遥控器时，该库会像android那样自动把焦点移动到下一个焦点上，无需开发者处理。手动通过this.$tv.requestFocus(Element)设置哪个元素获取焦点，注意遥控器上下左右操控会默认查找元素获取焦点，使用这个方法可以使用setTimeout延迟100ms调用。
• 元素过多可以设置滚动this.$tv.setScrollEl(element)，element容器包含滚动的内容。
• 获取到焦点的元素会有一个focused属性,设置了v-v-focusable,会有一个focusable属性。具体的操控逻辑实现还是监听onkeydown，判断键值来交互。
• 具体使用查看文档

npm i tv-focusable

main.js

import focusable from 'vue-tv-focusable';
Vue.use(focusable);

//清除
this.$tv.resetScrollEl();
this.$tv.resetFocusClassName();
this.$tv.resetFindFocusType();
this.$tv.resetInitDis();
this.$tv.resetKEYS();