Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Environment Version introduction:

The JDK: JDK_18..0_64bit (provided in the root directory)nodejs: v811.2.

cordova: 8.0. 0Android Studio: The latest version3.13.Download address: HTTP://www.android-studio.org/
Copy the code

ionic3

Ionic3 = Cordova + Angular +ionicUI (Ionic UI component + Javascript API+Ionic Native) It provides a beautiful UI component library, powerful JS APi and Native APi based on call Native, which allows us to quickly develop cross-platform hybrid apps and mobile Web pages. Cons: Angular React Vue apps can be packaged directly as apps, and vue can call native functions (taking photos). Weex: Cordova + Vue: (Cordova is very mature, has a lot of plugins, and has strong scalability)10ReactNative: Based on ReactCopy the code

Cordova is introduced:

Cordova: It is possible to package HTML, CSS and JS code into apps and make JS call native apis

Ionic, Cordova + Vue, Cordova + React, cordova+ Angular

Develop Android apps with Cordova

1.Install and configure the JDK2.Install the android studio3.Install nodejs4.NPM install -g cordova/CNPM install -g cordova NPM install -g cordova --registry= HTTPS://registry.npm.taobao.org
							  	
5.Creating a project cordova create Project name Cordova create project name com. Company name Project Name Class Name (Recommended) Cordova create Cordovademo02 com.itying. Cordova Cordovademo Pay attention to the package name when creating a project. http://www.ionic.wang/article-index-id-91.htmlChange the name of the application package:1, modify the package name in config. XML2, and then run the Cordova Platform add Android command again6.CD into the project CD cordovademo027.Add android platform to the project cordova Platform add Android8.Import the project into Android Studio for debugging (or run Cordova Run Android) note possible problems reference (installation encountered problems graphic solution folder)9, Running items: Attention1, Android phone to connect to the computer, and Android phone must be enabled debugging mode (how to enable: Baidu search XXX mobile phone to enable debugging mode)2Android Studio must have the SDK for the phone3, close360Mobile assistant, XXX mobile assistant10, Modify the project: Run Prepare for CordovaCopy the code

First, focus selection

For H5 TV apps to select focus, this element must be either a link or an input field. To change the style of focus selection we can use the pseudo-class selector focus connected by A

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

Second, focus animation

Focus animation is simple if you can achieve focus selection. We can do this using CSS3 animation.

.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); }}}Copy the code

Three, monitor remote control up, down, left, right, OK things

The plugin needs to listen for keyboard events after the DOM loads. Remote control events are really keyboard events

ngAfterViewInit(): void {
    window.addEventListener("keydown".function (event) {
        alert(event.keyCode);
        switch (event.keyCode) {
            case 37:/ / left
            alert('the left');
            break;
            case 38:/ /
            alert('on');
            break;
            case 39:/ / right
            alert('right');
            break;
            case 40:/ /
            alert('next');
            break; }})}Copy the code