Cordova Introductory Course

Cordova is just a shelf for Webview, it only provides you with the interface that can call Native API. In terms of UI, it doesn't care what your page looks like, and it will not provide you with any UI functions. jQuery Mobile, Sencha Touch, App Framework (jQMoby), KendoUI Mobile, Adobe Topcoat, jQTouch, Ionic Framework, Onsen UI, and more.

 

Install nodejs
Download: http://nodejs.org/download/

2. Install cordova
Open cmd command line and execute:

npm install -g cordova

3. Install ant
ant download:

http://ant.apache.org/bindownload.cgi?Preferred=http%3A%2F%2Fmirrors.cnnic.cn%2Fapache%2F

4. Create a cordova project
cordova create creates a file directory package name project name (if the package name is omitted, a cordova project with a default package name and project name is created), for example: cordova create d: \ cordovatest com.saiven.cordovaTest CordovaTestProject

5. Enter the project folder
 

6. Add platform support
You can add it selectively, such as the android example here. First make sure that the Android SDK development environment is installed and configured, and then execute the following command:

$ cordova platform add android

You can also choose to add support for other platforms. For each platform, you should make sure that the development environment of the corresponding platform is configured.

$ cordova platform add ios

$ cordova platform add amazon-fireos

$ cordova platform add android

$ cordova platform add blackberry10

$ cordova platform add firefoxos

$ cordova platform add wp7

$ cordova platform add wp8

$ cordova platform add windows8

7. Add plugin support
Plug-ins for system hardware access, such as cameras, media access, device access, acceleration devices, pointing devices, etc. Should be added as needed.

Basic Device Information (Device API):

$ cordova plugin add org.apache.cordova.device

Network connection and battery events:

$ cordova plugin add org.apache.cordova.network-information

$ cordova plugin add org.apache.cordova.battery-status

Accelerometer, compass, and geolocation:

$ cordova plugin add org.apache.cordova.device-motion

$ cordova plugin add org.apache.cordova.device-orientation

$ cordova plugin add org.apache.cordova.geolocation

Camera, media playback and capture:

$ cordova plugin add org.apache.cordova.camera

$ cordova plugin add org.apache.cordova.media-capture

$ cordova plugin add org.apache.cordova.media

Access files on device or network (File API):

$ cordova plugin add org.apache.cordova.file

$ cordova plugin add org.apache.cordova.file-transfer

Notification via dialog box or vibration:

$ cordova plugin add org.apache.cordova.dialogs

$ cordova plugin add org.apache.cordova.vibration

Contact:

$ cordova plugin add org.apache.cordova.contacts

Globalization:

$ cordova plugin add org.apache.cordova.globalization

Splash screen:

$ cordova plugin add org.apache.cordova.splashscreen

Open a new browser window (InAppBrowser):

$ cordova plugin add org.apache.cordova.inappbrowser

Debug console:

$ cordova plugin add org.apache.cordova.console

View installed plugins for the current application:

$ cordova plugin ls # or ‘plugin list’

[‘Org.apache.cordova.console’]

Remove installed plugins:

$ cordova plugin rm org.apache.cordova.console

$ cordova plugin remove org.apache.cordova.console # same

Add or remove plugins with multiple parameters:

$ cordovaplugin add org.apache.cordova.console org.apache.cordova.device

For details, please refer to:

http://docs.phonegap.com/en/3.4.0/guide_cli_index.md.html

8. Refer to the API documentation to develop the application
Mainly for the development of html5 applications in the lzwmeapp / www directory. Zhiwen Studio recommends rapid development with jQuery Mobile or Sencha Touch.

API reference:

http://docs.phonegap.com/en/3.4.0/cordova_plugins_pluginapis.md.html

http://docs.phonegap.com/en/3.4.0/cordova_events_events.md.html

9. Build the application
cordova build

or

cordova build android

The content under lzwmeapp / www will be built into each added platform. For the android platform, it will be built into this directory:

lzwmeapp \ platforms \ android \ assets \ www

10. Test the application
10.1 Install the test application on the simulator

For android platforms, the android emulator should be started and opened first.

cordova emulate android

10.2 Use real machine test (recommended)

You can use the following command:

cordova run android

10.3 Run in the browser

cordova serve android

10.4 Debugging with Ripple Emulator

npm install -g ripple-emulator

ripple emulate

Detailed reference: http://lzw.me/a/ripple-emulator.html

11. Packaging as a Released Application
1. Local packaging (need to install and configure the corresponding platform development environment)

cordova build android --release

2. phonegap online packaging

https://build.phonegap.com/

3. Sina sae cloud window debugger

http://sae.sina.com.cn/doc/mobile/tutorial.html

4. Package android application: use eclipse to complete

12. Common commands
(1) create <directory> [<id> [<name>]]

Create a cordova project with id as the package name.

(2) platform [ls | list]

List which platforms the project supports

(3) platform add <platform> [<platform>…]

Add one or more platform support to the project

(4) platform [rm | remove] <platform> [<platform>…]

Remove a platform support for this project

(5) platform [up | update] <platform>

Update the Cordova version of the 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 the project

(8) plugin [rm | remove] <plugin-name> [<plugin-name>…]

Remove a plugin from the project

(9) plugin search [<keyword1> <keyword2>…]

Search plugins from registry based on keywords

(10) compile [platform ...]

Compile the app package for the specified platform

(11) build [<platform> [<platform> […]]]

First prepare (copy the file) and then compile

(12) emulate [<platform> [<platform> […]]]

Launch the simulator to run the application

(13) serve [port]

Start local web service to access www, default port is 8000

platform and platforms are equivalent

plugin and plugins are equivalent

The detailed content can be viewed through the cordova help command.

13. 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)

 

*** It can be seen that Cordova will eventually package your code into an apk in the form of assets, so for code security, you need to compress js, etc. The core code should not be placed on the client! !! !!

 

The Cordova Android project code is not particularly complicated. By inheriting CordovaActivity in the Activity of the first page, it parses the config.xml file, makes initial settings, and then embeds CordovaWebView and loads the page URL configured in config.xml.

14. UI Framework Introduction
The document mentioned at the beginning that Cordova only provides the interface called by the hardware device and does not provide any UI support. In terms of UI framework, we mainly introduce JQueryMobile and SenchaTouch

14.1 Introduction to JQueryMobile
jQuery Mobile is the version of jQuery for mobile phones and tablets. jQuery Mobile will not only bring the jQuery core library to mainstream mobile platforms, but also release a complete and unified jQuery mobile UI framework. Supports mainstream mobile platforms worldwide.

This framework is simple and easy to use. Page development primarily uses markup and requires little or no JavaScript.

The overall size of the jQuery Mobile framework is relatively small, the JavaScript library is 12KB, the CSS is 6KB, and some icons are included.

All browsers should be able to access all the basic content.

All browsers should be able to access all the basic functions.

Development method: html (html5) + css (css3) + javascript

14.2 SenchaTouch Introduction
Sencha Touch can make your web app look like a native app. Beautiful user world 

The surface components and rich data management are all based on the latest HTML5 and CSS3 web standards, and are fully compatible with Android and Apple iOS devices.

ExtJS, an Ajax framework written based on JavaScript, integrates existing ExtJS with JQTouch and Rapha? L libraries, and launches the Sencha Touch framework for the most advanced Touch Web

Development method: Extjs (javascript)

 

14.3 JQueryMobile and SenchaTouch compare JQueryMobile advantages:
ü Easy to develop

ü Good third-party support, plugins are knowledge, knowledge is power

ü Easy to debug

ü Stackoverflow

JQueryMobile points:
ü Slower than Sencha Touch

ü APP is almost the same UI, if you are a tolerant UI designer, then you can accept this sluggish UI

ü The official document is missing something, because it introduces too much in the UI and lacks an introduction in the architecture

 

SenchaTouch advantages:
ü The operation is very smooth, and some of them are developed like native APIs

ü Have MVC structure

ü The document is perfect

 

SenchaTouch disadvantages:
ü Too complicated for inexperienced developers

ü Too little third party support

ü Since it only supports webkit, it has little effect on general programs except for mixed applications.

ü Both IDE and support have to pay