Cordova-developing iOS apps with Cordova 1 (configuring, developing the first app) is now more popular to useHTML5 development of mobile applications, after all, just write a set of HTML pages can be adapted to a variety of mobile devices, greatly saving the development time of cross-platform applications. And not as before Android to write a set of programs,IOS to write a set, even the Windows Phone to write a set of programs. Although the interface developed with H5 is easy to adapt to a variety of mobile devices, due to differences in the system, if you want to access the native device features (such as cameras, microphones, etc.) or some inconvenience, or not so unified. Then we can useCordova to develop H5 cross-platform applications.
one, Cordova Introduction
(1) cordova formerly phonegap,adobe PhoneGap to Apache and became an open source project and renamed Cordova.
(2) Cordova provides a set of device-related APIs through which mobile apps can javascript Access native device features, such as cameras, microphones, and more.
(3) Cordova also provides a uniform set of javascript class libraries, and native code related to the devices used by these class libraries. The
(4) Cordova supports the following mobile operating systems: IOS, Android,ubuntu phone OS, Blackberry, Windows phone, Palm WebOS, Bada and Symbian.
two, environment construction
1, install node. JS:
is primarily needed to download and install Cordova
:https://nodejs.org The
will download the pkg file to run the installation.
Run npm-v, if the version number shows node.js installation succeeded
2, installing the Cordova CLI
Run the following command to install:
| 1 |
sudo npm install -g cordova |
If you want to update Cordova later, run the following command:
| 1 |
sudo npm update cordova -g |
after the Cordova update is complete, you will also need to update your project (such as updating your iOS project):
| 1 |
cordova platform update ios |
3, test the Cordova if the installation is successful
Run the following command:
Displaying the version number proves that the installation was successful.
Three, create a simple Cordova project
1. Run the CD command in terminal to enter the directory location where project engineering is created For example, we want to create the project in the User document directory:
2, run the following command to create the project
| 1 |
cordova create hello com.example.hello HelloWorld |
Parameter description:
The first parameter , Hello, is the project's folder name;
The second parameter (optional)Com.example.hello is the ID name of the application, similar to Xcode, which can be modified in CONFIG. Io.cordova.hellocordova if not specified ;
The third parameter (optional)HelloWorld The name that is displayed for the app, or it can be modified in CONFIG.
3, after the successful creation of the project directory as follows:Directory File Description:
Configuration file for Conig.xml:cordova
hooks/: The script file that holds the custom Cordova command.
platforms/: Native engineering code for each platform, will be overwritten when build is not modified
plugins/: Plugin directory (primarily native API for each platform)
www/: The source code directory written with H5, build will be placed into the ASSETS\WWW directory of each platform.
Www/index.html:app Portal HTML file
4. Add iOS Platform Support
(1) Enter the project catalogue
(2) Add iOS platform files
| 1 |
cordova platform add ios |
(3) After execution, you can see that an iOS project has been created under the Platforms folder
Four, the project compiles, runs
Directly open the Helloworld.xcodeproj project to compile and run in Xcode
1, the directory structure is as follows
2, directory structure descriptionCan seeunder the Staging folder, there is a www folder and a . config file (blue box callout). And inThere is also a www folder and a config. Staging file (highlighted in red box) outside the folder.
we usually have the following two scenarios when we develop them:(1) If you are running in Xcode, use the HTML page below Staging. So we can remove the outside www folder and config. html from the project (the red box is labeled), and only edit it using the staging folder, but this is not recommended. because every time Cordova compile, or update the project, install the plug-in will re-overwrite the files in the red box to the various platform files (blue box labeled). At the same time, only edit the HTML page under the Single Platform project folder, also does not conform to write once, simultaneously compiles publishes the multi-platform application development idea. (2) So generally I am the editor outside the (red box callout) in the WWW folder page, and then run the following command to re-build Project, these pages will be automatically covered under the corresponding directory under each platform.
3, the result of the operation is as follows
Original from: www.hangge.com reprint please keep the original link: http://www.hangge.com/blog/cache/detail_1145.html
Cordova-developing iOS apps with Cordova 1 (configure, develop first app)
