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

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.