cordova创建电视TV软件

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

环境版本介绍：

JDK： JDK_1.8.0_64bit   （根目录有提供）

nodejs: v8.11.2

cordova: 8.0.0
	
android studio：目前最新版本3.1.3  （建议升级为最新）  下载地址：http://www.android-studio.org/

ionic3

ionic3=cordova+angular+ionicUI      （Ionic UI组件+ Javascript API+Ionic Native） 	
	
优点：它提供了漂亮的UI组件库、强大的JS APi以及基于调用原生的的Native APi,可以让我们快速开发跨平台的混合APP以及移动web页面。（推荐*）
	
缺点：angular   react   vue开发的移动端应用要打包成app的时候得重新再学习ionic

vue开发的项目直接可以打包成app，并且可以让vue调用原生的功能（拍照）

阿里weex框架：不建议大家用weex  （不能直接把vue项目打包成app、学习weex成本高、weex不是特别成熟）     
cordova+vue：  （cordova非常成熟、插件也非常多、扩展性也强）  10年的历史

reactNative：基于react

cordova介绍：

cordova: 可以把html css js写的代码打包成app，还可以让js调用原生的api

ionic、cordova+vue、cordova+react 、cordova+angular

用cordova开发android 应用

1.安装jdk 、配置jdk           

2.安装android studio         

3.安装nodejs   

4.安装cordova    npm  install  -g  cordova   /   cnpm install -g cordova
				
  npm install -g cordova --registry=https://registry.npm.taobao.org
							  	
5.创建项目    cordova create 项目名称

cordova create 项目名  com.公司名.项目名  类名 （建议）

cordova create cordovademo02  com.itying.cordova  Cordovademo	

创建项目的时候注意包名称：发布上线打包的时候用到包名称，注意

修改应用包名名称参考：http://www.ionic.wang/article-index-id-91.html
				
修改应用包名名称：

	1、修改config.xml里面的包名称

	2、修改完成以后重新执行cordova platform add android
	

6.cd 到项目里面    cd cordovademo02

7.把android的平台添加到项目里面     cordova platform add android

8.把项目导入到 android studio 进行运行调试  （或者运行   cordova  run  android）   注意可能遇到的问题参考（安装遇到问题图文解决方案文件夹）
  			

9、运行项目 ：注意

    1、android手机要连上电脑，并且 android手机必须开启调试模式（如何开启:百度搜 xxx手机开启调试模式）

    2、android studio必须得安装手机对应的sdk  

    3、关闭360手机助手、xxx手机助手

10、修改项目:  运行cordova prepare

一、 焦点选中

H5 开发的电视应用要选中焦点的话，这个元素必须是 a 连接或者输入框。 要改变焦点选中的样式的话我们可以用 a 连接的伪类选择器 focus 来完成

a:focus{
    border:.2rem solid yellow;
}

二、 焦点动画

能实现焦点选中的话焦点动画就简单了。我们可以使用 css3 动画来实现。

.top{
    display: flex;
}
.t1{
    flex: 2;
    margin-left: 1.3rem;
    margin-right: 1.4rem;
}
.t2{
    flex: 1;
    margin-right: 1.3rem;
}
.t3{
    flex: 1;
    margin-right: 1.3rem;
}
img{
    width: 100%;
    height: 33.55rem;
    transition: all 0.3s;
}
div{
    border: .2rem solid #000;
    overflow: hidden;
    &:focus{
        border: .2rem solid white;
        img{
            transform: scale(1.1);
        }
    }
}

三、 监听遥控的上 、 下 、 左 、 右 、ok 事

件 需要在 dom 加载后监听键盘事件。遥控事件其实就是键盘事件

ngAfterViewInit(): void {
    window.addEventListener("keydown", function (event) {
        alert(event.keyCode);
        switch (event.keyCode) {
            case 37://左
            alert('左');
            break;
            case 38://上
            alert('上');
            break;
            case 39://右
            alert('右');
            break;
            case 40://下
            alert('下');
            break;
        }
    })
}