Cordova 3.x Foundation (6)--Sample engineering analysis

Original http://rensanning.iteye.com/blog/2020843

(1) Create Cordova Project via Cordova CLI

The most streamlined creation of an app:

Reference Cordova Create App1

The default is to use the package name: Io.cordova.hellocordova, Application name: Hellocordova.

Specify the package name and app name:

Reference Cordova Create APP2 Com.rensanning.app.cordova cordovasample

You can also specify only the package name individually

Name of application with Chinese characters:

Reference Cordova Create APP3 Com.rensanning.app.cordova Cordova Example

The. config file uses ' UTF-8 ' encoding.


(2) code under the WWW folder

Once the project is successfully created, Cordova will generate index.html, CSS/INDEX.CSS, Img/logo.png, and js/index.js by default.

Index.hml
Settings for the WebView app

HTML code

1. <Meta name= "format-detection" content="Telephone=no" />
2. <Meta name="viewport" content= "user-scalable=no, initial-scale=1, maximum-scale=1, Minimum-scale=1, Width=device-width, Height=device-height, target-densitydpi=device-dpi " />

Call the Cordova Core API JS

HTML code

1. <script type="Text/javascript" src="Cordova.js"></script>

Starting with Cordova 3, the core API is provided in plugin, so the cordova.js file simply provides some basic functions.

Call Index.js

HTML code

1. <script  type= "Text/javascript"  src= "js/index.js" ></ script>  
2. <script type=< Span class= "Attribute-value" > "Text/javascript" >  
3.     app.initialize ();   
4. </script>  

The

Initialize () function is actually a listening setting for the Deviceready event, and when Deviceready is complete, display "device is ready" hides "Connecting to Device".  

(3) Android project  

Add platform support  
Cordova Platform Add android 
* *cordova will call the Android SDK to create a complete Android app project in App1\platforms\android. &NBSP
 

project directory structure  
assets\www 
This is all the contents of the WWW folder under the Cordova Project root directory. (Cordova.js and Cordova_plugins.js are automatically created by Cordova) &NBSP,
* * * visible Cordova will eventually pack your code into the APK in assets form, so code is safe, Need to compress JS and so on, the core code is best not put on the client!!! &NBSP

cordovalib 
since 3.3, Cordova changed from. Jar to the form of library project.  

cordova 
Compile and run the project script. &NBSP

platform_www 
prevents users from changing machines. Cordova/lib does not exist, backup cordova.js to this folder. Build is actually used for this file.  

libs 
Empty folder, previous version may contain Cordova-*.jar. If you want to add Android-support-v4.jar, you can add it in the form of a plugin.

(4) Import Android project in Eclipse  

Create an Eclipse Android project in Cordova with two special settings: 

• Make Android Project "Assets/www" and "Res/xml/config.xml" invisible (there are other folders that you do not want users to modify)
• Link the Cordova project's merges folder, www folder, and config file to the Android project

Because the code under Platforms\android is generated automatically at build time, so there is no point in modifying it, you should modify the files in the Cordova project root directory. You can also show them through Eclipse's resource settings.



Cordova Android Engineering code is not particularly complex, by inheriting cordovaactivity on the first page of activity, Parse the CONFIG. ins file, do the initial setup, then embed the Cordovawebview and load the URL of the page configured in CONFIG.

Cordova is just a webview shelf that gives you the ability to invoke the native API, and in the UI he doesn't care what your page looks like, nor does it give you any UI features, so the UI also relies on jquery Mobile, Sencha Touch, App Framework (Jqmoby), Kendoui Mobile, Adobe topcoat, JQTouch, Ionic Framework, Onsen UI, and more.

Cordova 3.x Foundation (6)--Sample engineering analysis