Cordova Cross-platform app development 01_ Create project, desktop icon, start diagram configuration

Video Address: Http://t.cn/RacnKeB

InstallationCordova

1. Download the installation of node. js (JS) and tick the npm (JS Package management tool) when installing.
2. Download and install git (Configure environment variables).
3. On the cmd console, use npm to install Cordova.

npm install -g cordova

CreateCordova Project

$ cordova create hello com.example.hello HelloWorld

First parameter hello specifies the directory created by the project

The second parameter Com.example.hello the package name of the specified project, and you can also modify the

The third parameter HelloWorld specifies the name that the application displays

As shown in 1-1, a Cordova project was successfully created with a project address of D:\phonegapProject\hello

Figure 1-1

The project catalog is created as shown in

Add Platform

Subsequent commands are required in the Cordova project directory, so advanced to the engineering root directory

    $ cd hello

Add target platform to confirm that the SDK for the relevant platform has been installed before adding the platform

Add target platform, add the following command line in iOS and Android platform

    $ cordova platform add ios

    $ cordova platform add amazon-fireos

    $ cordova platform add android

    $ cordova platform add blackberry10

    $ cordova platform add firefoxos

PackagedApp

When creating the Cordova Project, the generated www folder is the location of the front-end project placement, and the directory is based on the Web application Architecture , as shown in:

Index.html is the entry for the hybrid app, and some initialization is to be placed in the Deviceready in the Www/js/index.js file . After the development of the front-end project can be packaged into the corresponding platform of the app.

Cordova Build

The specified platform can be packaged

Cordovaios

Cordovaadndroid

Runapp

Real Machine Run

$ Cordova Run Android

Simulator run

$ Cordova Emulate Android

app icon Settings

Modify config .

The following configuration applies to all platforms

<icon src= "Res/icon.png"/>

Each platform can also be configured separately to suit different resolutions.

<platform name= "Android" >

<icon src= "Res/android/ldpi.png" density= "ldpi"/>

<icon src= "Res/android/mdpi.png" density= "mdpi"/>

<icon src= "Res/android/hdpi.png" density= "hdpi"/>

<icon src= "Res/android/xhdpi.png" density= "xhdpi"/>

</platform>

<platform name= "ios" >

<!--IOS 8.0+--

<!--IPhone 6 Plus--

<icon src= "Res/ios/[email protected" "Width=" height=

<!--IOS 7.0+--

<!--iphone/ipod Touch--

<icon src= "res/ios/icon-60.png" width= "" "Height="/> "

<icon src= "Res/ios/[email protected" "Width=" "height=" (/>)

<!--IPad--

<icon src= "Res/ios/icon-76.png" width= "height="

<icon src= "Res/ios/[email protected," width= "height="/>

<!--IOS 6.1--

<!--Spotlight Icon--

<icon src= "Res/ios/icon-40.png" width= "All" height= "/>"

<icon src= "Res/ios/[email protected" width= "height="

<!--iphone/ipod Touch--

<icon src= "res/ios/icon.png" width= "" "Height="/> "

<icon src= "Res/ios/[email protected" "Width=" height=

<!--IPad--

<icon src= "Res/ios/icon-72.png" width= "height="

<icon src= "Res/ios/[email protected]" width= "144" height= "144"/>

<!--IPhone Spotlight and Settings Icon--

<icon src= "Res/ios/icon-small.png" width= "height="/>

<icon src= "Res/ios/[email protected]" width= "" height= "[/>]

<!--IPad Spotlight and Settings Icon--

<icon src= "res/ios/icon-50.png" width= "" "Height="/> "

<icon src= "Res/ios/[email protected" "Width=" height=

</platform>

splash screen Settings

Cordova Plugin Add Cordova-plugin-splashscreen

<platform name= "android" >

<!--can use any density this exists in the Android project--

<splash src= "Res/screen/android/splash-land-hdpi.png" density= "land-hdpi"/>

<splash src= "Res/screen/android/splash-land-ldpi.png" density= "land-ldpi"/>

<splash src= "Res/screen/android/splash-land-mdpi.png" density= "land-mdpi"/>

<splash src= "Res/screen/android/splash-land-xhdpi.png" density= "land-xhdpi"/>

<splash src= "Res/screen/android/splash-port-hdpi.png" density= "port-hdpi"/>

<splash src= "Res/screen/android/splash-port-ldpi.png" density= "port-ldpi"/>

<splash src= "Res/screen/android/splash-port-mdpi.png" density= "port-mdpi"/>

<splash src= "Res/screen/android/splash-port-xhdpi.png" density= "port-xhdpi"/>

</platform>

<platform name= "iOS" >

<!--images is determined by width and height. The following is supported--

<splash src= "res/screen/ios/default~iphone.png" width= "" "height=" 480 "/>"

<splash src= "Res/screen/ios/[email protected]~iphone.png" width= "640" height= "960"/>

<splash src= "Res/screen/ios/default-portrait~ipad.png" width= "768" height= "1024x768"/>

<splash src= "Res/screen/ios/[email protected]~ipad.png" width= "1536" height= "2048"/>

<splash src= "Res/screen/ios/default-landscape~ipad.png" width= "1024x768" height= "768"/>

<splash src= "Res/screen/ios/[email protected]~ipad.png" width= "2048" height= "1536"/>

<splash src= "Res/screen/ios/[email protected]~iphone.png" width= "640" height= " 1136"/>

<splash src= "Res/screen/ios/default-667h.png" width= "the" height= "1334"/>

<splash src= "Res/screen/ios/default-736h.png" width= "1242" height= "2208"/>

<splash src= "Res/screen/ios/default-landscape-736h.png" width= "2208" height= "1242"/>

</platform>

Cordova Cross-platform app development 01_ Create project, desktop icon, start diagram configuration