移动端嵌入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);
<template>
<div v-focusable ref="menu">
菜单
</div>
</template>
<script>
export default {
data(){
return{
}
},
mounted(){
this.init()
},
methods:{
init(){
this.$tv.requestFocus(this.$refs.menu)
}
}
}
</script>
//清除
this.$tv.resetScrollEl();
this.$tv.resetFocusClassName();
this.$tv.resetFindFocusType();
this.$tv.resetInitDis();
this.$tv.resetKEYS();
网友评论