Installation and configuration of Cordova

1. Install Nodejs (automatically include NPM)

2. Install Cordova on the command line via NPM statement NPM install-g Cordova (if you are prompted for network connection failure, you need to set up a network proxy, address:NPM config--global set registry http://registry.cnpmjs.org)

3. In the command line, create a hybrid project, create a statement by installing the successful Cordova:

Cordova Create Cordovademo Com.first.helloworld HelloWorld

Cordovademo: Project folder name

Com.first.helloworld: Project Package Name

Helloworld: project name

4, through the CD Cordovademo command into the folder, through the following command Cordova platform add Android

Add an Android runtime platform for your created project (same as iOS platform add)

5, the running platform added successfully, you also need to add the phone to call the underlying control

Cordova Plugin Add Cordova-plugin-device

Cordova-plugin-device Basic Equipment Information
cordova-plugin-network-information Network connection Information
cordova-plugin-battery-status Battery status information
cordova-plugin-device-motion Acceleration Information
cordova-plugin-device-orientation Compass Information
cordova-plugin-geolocation Locating Data
Cordova-plugin-camera Camera
cordova-plugin-media-capture Media Capture
Cordova-plugin-media Media Player
Cordova-plugin-file Accessing Files
cordova-plugin-file-transfer File Delivery
cordova-plugin-dialogs Message Prompt dialog box
cordova-plugin-vibration Vibration Alert
cordova-plugin-contacts Contact Person
cordova-plugin-globalization Globalization
Cordova-plugin-splashscreen splash screen ( splash screen)
Cordova-plugin-inappbrower Browser
Cordova-plugin-console Console
Cordova-plugin-statusbar status Bar

Add plug-ins, selective installation, no need to install ...

6. Project creation is successful and the project you created is imported with development tools. If you are using the Eclipse development tool, you will need to adjust your SDK version to more than 5.1 after importing the project, and associate the jar package with the project that you imported at the same time.

7. At this point, the project can run normally. In the project structure, you need to be aware of the assets folder, which contains all the files that need to be maintained and modified for future project development.

8, the index.html page in assets is the homepage after the project starts. Project development to start with him.

9. To achieve the hybrid project of Onsenui and ANGULARJS collaboration, the following simple configuration is required. Since the project is a single-page project (SPA), the CSS and JS files used during the project run need to be declared all on the index.html page.

(1) Refer to the two CSS files that must be introduced:

onsenui.css (components) and onsen-css-components-blue-basic-theme.css(theme)

(2) Introduce several JS files that must be introduced,

Angular.js

Onsenui.js

Cordova_plugins.js

Cordova.js

and Custom App_model.js,

Note: Cordova.js and cordova_plugins.js are only useful when invoking the phone's underlying functionality. So in the browser to run the project, you need to block these two JS files, in addition, the content of App_modal.js only write a sentence can:

var app = Angular.module (' app ', [' Onsen ']);

10. In the HTML tag of the Index.html page, refer to the module declared in App_modal.

11. This time, the created project can correctly run any component provided by the Onsenui front-end framework. However, it is important to note that the components in the Onsenui need to be placed inside the <ons-page> tag, and do not write plain text messages directly within the <ons-page> tag.

12, in the Index.html page, it should be noted that the,<ons-page> label recommendation is written in the <ons-navigator> tag, in order to facilitate the page jump.

13. You can then test the various components provided by Onsenui in the index <ons-page> tag.

14, and so familiar with the Onsenui provided by the various components of the display effect, you can use the ANGULARJS to achieve data filling.

Installation and configuration of Cordova