Cordova 3.x Foundation (1)--Environment construction (windows/android)

Cordova 3.x Foundation (1)--Environment construction (windows/android)

The Mobile app is divided into three main categories: Native App,hybrid app,web app. The hybrid app is between the native app and the Web App, which takes into account the native app's good user experience and powerful features, as well as the advantages of rapid web app development across platforms. The disadvantage is that relying on the performance of the Webview,webview of each platform directly determines the performance of the hybrid app.

At present, there are many hybrid app development frameworks at home and abroad, more representative of Foreign Cordova (aka PhoneGap), Sencha Touch, Titanium, Intel XDK, Rhomobile, Xamarin and other domestic appcan, Rexsee, XFace, and Dr. Dobb's journal won the Titanium Productivity Award in the 2014 Mobile Development Tool category Jolt Awards in PhoneGap and Jolt. Titanium should be part of the web-to-native converter, as well as native JavaScript apps, such as Chrome Apps/firefox os/windows 8 apps.

Based on open source Cordova, major companies have launched their own products, such as Adobe PhoneGap, Oracle ADF Mobile, SAP Kapsel, IBM Worklight, Microsoft's visual Studio also supports Cordova.

Installation Run

(1) Prerequisite environment
Install ANT, add the%ant_home%\bin to the PATH environment variable, or it will report the error "executing command ' ANT '" error.

Reference

Ant-h
Ant-version

Install the ANDROID SDK, add the%android_home%\tools;%android_home%\platform-tools to the PATH environment variable, or it will be reported as "Error:an Error occurred while Listing Android targets "wrong, and create good one avd in advance.

About the API version:

• 3.0 Required is ANDROID-17 (Android 4.2.2)

• 3.1 and 3.2 require android-18 (Android 4.3)

• 3.3 and 3.4 require android-19 (Android 4.4.2)

Reference

Android-h
ADB version
Android List AVD

Install node. js

Reference

Node-v
Npm-v

If you need to install a plugin from a git address, you need to install Git.

Reference

Git--version

(2) Installing the Cordova CLI

Reference

> NPM install-g Cordova

Installation path:
C:\Documents and Settings\rensanning\application Data\npm\node_modules\cordova

Update Cordova version

Reference

NPM Update Cordova-g

If the installation is slow, you can set up a proxy:

Reference

NPM Config set proxy http://xx.xx.xx.xx:xxxx
NPM Config set Https-proxy http://xx.xx.xx.xx:xxxx
NPM Config list

Or use the domestic mirror station: http://cnpmjs.org

Reference

NPM Config Set Registry http://registry.cnpmjs.org
NPM Info Cordova

NPM--registry http://registry.cnpmjs.org Info Cordova

Current version: 3.4.0-0.1.3 (released 2014/03/05)

(3) Create and run project

A. Create a new directory Pro and enter

Reference

> CD C:\pro

B. Creating a "MyApp" project

Reference

> Cordova Create MyApp com.yourname.myapp MyApp

C. Access to the engineering catalogue

Reference

> CD MyApp

D. Add platform Support

Reference

> Cordova Platforms Add iOS
> Cordova Platforms Add Android

> Cordova Platforms LS

The CLI uses the SDK of each platform to create the project.

Update the version of the Cordova project
Cordova Platform Check
If there is a hint like "Android @ 3.3.0 could be updated to:3.4.0" You can perform the update
You can also view platforms\android\assets\www\cordova.js to confirm the current version information
Cordova Platform update Android
If you are prompted "all platforms is up-to-date." The description does not require an update.

E. Adding plugins

Reference

> Cordova Plugin Add org.apache.cordova.device
> Cordova Plugin Add org.apache.cordova.console

> Cordova Plugin ls

Plugins can be installed from many places:
Plugin name (download from plugin repository): Cordova plugin Add Org.apache.cordova.console
git address: Cordova plugin Add Https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
Local address: Cordova plugin Add D:\cordova-3.3.0\cordova-plugin-camera
Local file: Cordova plugin Add plugin.tar.gz
Specify version
Cordova plugin Add [email protected]
Cordova Plugin Add https://github.com/apache/cordova-plugin-console.git#r0.2.0
Cordova Plugin Add Https://github.com/someone/aplugin.git#:/my/sub/dir
Cordova Plugin Add Https://github.com/someone/aplugin.git#r0.0.1:/my/sub/dir
Wait a minute

F. Compiling code

Reference

> Cordova Build Android

G. Running code
Run on the emulator (provided that the AVD is created)

Reference

> Cordova emulate Android

Windows Convert command conflict, direct "Cordova emulate Android" will be reported error:spawn ENOENT, need to start the simulator first.

H. Running in the browser

Reference

> Cordova serve Android

Browser access address: Http://localhost:8000/, you can debug the page like debugging the layout of the app. If the Cordova native API call is used in the app, the following dialog box pops up:

This is because the browser cannot provide @javascriptinterface interfaces, Cordova views interact through prompt () and native, and this is done because of Android2.3 simulator bugs. So debug the page layout, ignore it.

I. Install directly to the real machine via USB

Reference

> Cordova Run Android

The Cordova CLI uses the Lazy loading approach when you create Cordova projects, add platform support, install plugins, and so on, and download the appropriate files from the server to the appropriate folder. lazy-loaded files are stored in the System user's folder, such as Windows XP is C:\Documents and
Settings\rensanning\.cordova. So the first time use will be slower.

Common Commands

(1) Create <directory> [<id> [<name>]
Create a Cordova project with the ID of the package name.

(2) platform [LS | list]
List which platforms the project supports

(3) Platform add <platform> [<platform> ...]
Add one or more platform support for your project

(4) Platform [RM | remove] <platform> [<platform> ...]
Remove a platform support for this project

(5) Platform [up | update] <platform>
Update the Cordova version of a platform for this project

(6) plugin [ls | list]
List which plugins are included in the project

(7) plugin add <path-to-plugin> [<path-to-plugin> ...]
Add one or more plugins to your project

(8) Plugin [RM | remove] <plugin-name> [<plugin-name> ...]
Remove a plug-in from the project

(9) Plugin search [<keyword1> <keyword2> ...]
Search for plugins from registry based on keywords

(ten) Compile [platform ...]
Compiling app packages for the specified platform

(one) build [<platform> [<platform> [...]]
Do prepare first (copy file) and do compile

(emulate) [<platform> [<platform> [...]]
Launch simulator run app

(+) serve [port]
Start the local Web service to access WWW, the default port is 8000

Reference

Platform and platforms equivalents
Plugin and plugins equivalents

Detailed content can be viewed through the Cordova help command.

directory Structure

(1) Catalogue at a Glance:

Reference

myapp/
|--Config
|--hooks/
| | | |--before_xxx/
| | '--after_xxx/
|--merges/
| | | |--Android/
| | '--ios/
|--platforms/
| |--Android/
| '--ios/
|--plugins/
| |--org.apache.cordova.console/
| '--org.apache.cordova.device/
|--www/
| |--css/
| |--img/
' |--js/
'--index.html

(2) Config
Configuration file for Cordova

(3) Hooks catalogue
The script file that holds the custom Cordova command. Each project command can define before and after hooks, such as: Before_build, After_build.
Hooks can be written in any programming language, and the Cordova CLI uses node. js, so it's generally written with it.

There are 3 common hook scripts available:
http://devgirl.org/2013/11/12/three-hooks-your-cordovaphonegap-project-needs/

(4) Merges catalogue
The storage platform special files, will be merged with WWW compile, the same file merges file priority.

Like what:

Reference

merges/
|--ios/
| '--app.js
|--Android/
| '--android.js
www/
'--app.js

Compiled into iOS apps, including Merges/ios/app.js, while Android apps include Www/app.js, Merges/android/android.js

(5) Platforms catalogue
Native code engineering for each platform, do not modify it manually because it will be overwritten at build time.

(6) Plugins catalogue
The plug-in directory (the native API provided by Cordova is also provided as a plug-in).

(7) WWW directory
The source code directory will be copied to the Assets\www directory of each platform project when Cordova prepare.
Where Index.html is the application's entry file.

MORE: http://cordova.apache.org/docs/en/3.4.0/index.html

Cordova 3.x Foundation (1)--Environment construction (windows/android)