Cordova Study-Basic article

Cordova Study Notes (a): Quick Start

1. Installing Cordova

Cordova installation can be obtained from npm via node. js . npm install-g Cordova This command allows you to install Cordova. If you have installed the node. js .

2. Create a project

Create an empty Cordova project from the command line. from the command line, first boot to the directory where you want to create the project, and then command: Cordova Create <path>. can be done by Cordova help Create gets the complete command.

3. Add a development platform

Create an empty project, boot to the project path you created, and create a project of the platform you want by command Cordova Platform add <platform name> . To see which platforms Cordova support, use the command line:Cordova platform. such as: Create Android platform of the project, Cordova Platform add Android. removal can be used Cordova Platform remove Android.

4. Run your app

Cordova Run <platform name>

5. Read the API Documentation:http://cordova.apache.org/docs/en/latest/guide/overview/

6. Add a plugin to the project: When you create a default empty project, without adding any plugins, you can manually add plugins to the project as needed, there are many plugins, including community groups provided, which you can see in Plugins.cordova.io. You can find it in the warehouse from the command line and then add it to the project. For example, search bar and code, $ Cordova Plugin Search bar code produces a case-insensitive plug-in name that contains 2 substrings. Add <plugin name> using the command Cordova plugin. For example, add device,Cordova plugin add Cordova-plugin-device.

Common plug-ins are:

$ Cordova Plugin Add cordova-plugin-network-information

$ Cordova Plugin Add Cordova-plugin-battery-status

$ Cordova Plugin Add cordova-plugin-device-motion

$ Cordova Plugin Add cordova-plugin-device-orientation

$ Cordova Plugin Add cordova-plugin-geolocation

$ Cordova Plugin Add Cordova-plugin-camera

$ Cordova Plugin Add Cordova-plugin-media-capture

$ Cordova Plugin Add Cordova-plugin-media

$ Cordova Plugin Add Cordova-plugin-file

$ Cordova Plugin Add Cordova-plugin-file-transfer

$ Cordova Plugin Add Cordova-plugin-console

7. Add app icon

Can be done by using the command line or ADT

the <icon> element defines the app icon in config. If not set, the Cordova icon is used by default .

<icon src= "Res/ios/icon.png" platform= "ios" width= "" height= "" density= "mdpi"/> These properties, only SRC is required. density is unique to Android and sets the icon density.

by <icon src= "Res/icon.png"/>, set all platform-consistent icons.

You can also experience better icons for devices with different resolutions by setting similar to the following settings

<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>

8. Start Screen Settings

At the root of the project, in the Config. platforms file, instead of adding in, the following:

Please notice the value of the "src" attribute are relative to the project directory and not to the WWW directory. You can name the source image whatever. The internal name in the app is determined by Cordova.

<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>

<preference name= "Splashscreendelay" value= "10000"/>

9. Configure the app

Through the config . * file. configuration file location for Ios and android :

App/platforms/ios/appname/config.xml App/platforms/android/res/xml/config.xml

Core Public configuration elements:

This is the default configuration created from the command line:

<widget id= "Com.example.hello" version= "0.0.1" >

<name>HelloWorld</name>

<description>

A Sample Apache Cordova application that responds to the Deviceready event.

</description>

<author email= "[email protected]" href= "Http://cordova.io" >

Apache Cordova Team

</author>

<content src= "index.html"/>

<access origin= "*"/>

</widget>

A complete example of me:

<?xml version= ' 1.0 ' encoding= ' utf-8 '?>

<widget id= "Org.mjing.adroidCordova" version= "0.0.2" android-versioncode= "1.2.7" xmlns= "http://www.w3.org/ns/ Widgets "xmlns:cdv=" http://cordova.apache.org/ns/1.0 ">

<preference name= "loglevel" value= "DEBUG"/>

<preference name= "fullscreen" value= "true"/>

<preference name= "BackgroundColor" value= "0xff0000ff"/>

<feature name= "Whitelist" >

<param name= "Android-package" value= "Org.apache.cordova.whitelist.WhitelistPlugin"/>

<param name= "onload" value= "true"/>

</feature>

<feature name= "Device" >

<param name= "Android-package" value= "Org.apache.cordova.device.Device"/>

</feature>

<feature name= "Camera" >

<param name= "Android-package" value= "Org.apache.cordova.camera.CameraLauncher"/>

</feature>

<feature name= "Notification" >

<param name= "Android-package" value= "Org.apache.cordova.dialogs.Notification"/>

</feature>

<feature name= "SplashScreen" >

<param name= "Android-package" value= "Org.apache.cordova.splashscreen.SplashScreen"/>

<param name= "onload" value= "true"/>

</feature>

<feature name= "NetworkStatus" >

<param name= "Android-package" value= "Org.apache.cordova.networkinformation.NetworkManager"/>

</feature>

<feature name= "File" >

<param name= "Android-package" value= "Org.apache.cordova.file.FileUtils"/>

<param name= "onload" value= "true"/>

</feature>

<feature name= "Media" >

<param name= "Android-package" value= "Org.apache.cordova.media.AudioHandler"/>

</feature>

<preference name= "androidpersistentfilelocation" value= "Internal"/>

<allow-intent href= "market:*"/>

<name>FirstCordova</name>

<description>

Jing.ming's first Cordova project.

</description>

<author email= "[email protected]" href= "http://http://cordova.apache.org/docs/en/latest/config_ref/index.html" >

Jing.ming

</author>

<platform name= "Android" >

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

<splash src= "Res/android/bar3.jpg"/>

<!--<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>

<content src= "index.html"/><!--start Page--

<access origin= "*"/>

<allow-intent href= "http://*/*"/>

<allow-intent href= "https://*/*"/>

<allow-intent href= "tel:*"/>

<allow-intent href= "sms:*"/>

<allow-intent href= "mailto:*"/>

<allow-intent href= "geo:*"/>

</widget>

This only describes the android configuration:

Too much, when you need to check the documentation yourself.

<preference name= "keeprunning" value= "false"/>

<preference name= "Loadurltimeoutvalue" value= "10000"/>

<preference name= "SplashScreen" value= "Mysplash"/>

<preference name= "Splashscreendelay" value= "10000"/>

<preference name= "inappbrowserstorageenabled" value= "true"/>

<preference name= "Loadingdialog" value= "My title,my Message"/>

<preference name= "Loadingpagedialog" value= "My title,my Message"/>

<preference name= "Errorurl" value= "myerrorpage.html"/>

<preference name= "Showtitle" value= "true"/>

<preference name= "LogLevel" value= "VERBOSE"/>

<preference name= "Androidlaunchmode" value= "Singletop"/>

<preference name= "overrideuseragent" value= "mozilla/5.0 My Browser"/>

<preference name= "appenduseragent" value= "My Browser"/>

Cordova Study-Basic article