Cordova3.x自学系列之一 环境搭建及常用命令

随喜结佛缘

                

         

                       

    郑重声明：此系列博客文章所涉知识点来自他人博客转摘，由自己亲手实践后加以总结，省略了很多操作细节，目的是巩固所学，后续将陆续推出关于Cordova的自学系列博文。

 

    一、关于Cordova的一些认知

    Mobile App分为三大类：Native App,Hybrid App,Web App。其中Hybrid App介于Native App和Web App之间，它能兼顾Native App的良好用户体验及强大的功能并具有Web App跨平台快速开发的优势。缺点在于依赖于各平台的WebView，WebView的性能好坏直接决定了   Hybrid App的性能。 

 

    目前国内外的Hybrid App开发框架很多，比较有代表的是国外的Cordova(aka PhoneGap)、Sencha Touch、Titanium、Intel XDK、RhoMobile、Xamarin等和国内的AppCan、Rexsee、xFace，而Dr. Dobb's Journal颁布的2014年度移动开发工具类Jolt大奖中PhoneGap和   Titanium获得Jolt生产力奖。Titanium应该属于Web到Native的Converter，还有一种就是Native JavaScript的应用，比如Chrome Apps／Firefox OS／Windows 8 apps。 

 

    基于开源的Cordova，各大公司都推出了自己的产品，比如：Adobe PhoneGap、Oracle ADF Mobile、SAP Kapsel、IBM Worklight、Microsoft的Visual Studio也支持Cordova。

    二、环境搭建的相关准备

    1、JDK开发环境及环境变量的配置  检测命令：java -version

    2、Android SDK开发环境及环境变量的配置     检测命令：android -h

    3、Ant下载安装及环境变量配置       检测命令: ant -version

    4、Nodejs下载安装及环境变量配置 检测命令: node -v  npm -v

    5、Git下载安装及环境变量配置   检测命令： git --version

    6、 Cordova CLI安装及环境变量配置  检测命令： npm install -g cordova（安装cordova）

    三、项目创建到运行系列操作

    1、创建项目的根目录，命令提示符中进入该目录 cd e:\proroot.(以后通过各种命令生成或下载的文件都会放在这个目录中)

    2、创建一个项目firstdemo

    命令：cordova create firstdemo com.test.firstdemo MyDemo

    项目文件夹为firstdemo，包名为com.test.firstdemo，项目名称为MyDemo（MyDemo也就是以后导入到eclipse工程后的工程名称）

    3、进入工程目录firstdemo，添加平台支持，操作命令如下：

         cordova platforms add ios

         cordova platforms add android

        显示平台列表命令：cordova platforms ls

    4、为项目添加所需要的开发插件,操作命令如下：

    cordova plugin add 命令需要开发员指定外挂程序代码的存储库,常用插件列表如下：

    （1）基本设备资讯API

    cordova plugin add org.apache.cordova.device

    （2）网络连接和电池事件

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

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

    （3）加速指针、指南针和地理位置

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

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

    cordova plugin add org.apache.cordova.geolocation

    （4）相机、媒体重播和捕获

    cordova plugin add org.apache.cordova.camera

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

    cordova plugin add org.apache.cordova.media

    （5）访问设备或网络上的文件

    cordova plugin add org.apache.cordova.file

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

    （6）通过对话框或振动发出通知

    cordova plugin add org.apache.cordova.dialogs

    cordova plugin add org.apache.cordova.vibration

    （7）联系人

    cordova plugin add org.apache.cordova.contacts

    （8）国际化

    cordova plugin add org.apache.cordova.globalization

    

    （9）闪屏（启动动画）

    cordova plugin add org.apache.cordova.splashscreen

    （10）打开新的浏览器窗口

    cordova plugin add org.apache.cordova.inappbrowser

    （11）调试主控台

    cordova plugin add org.apache.cordova.console

     5、编译项目代码

    

    cordova build android

    6、运行项目

    （1）在模拟器上运行：cordova emulate android(需要先创建好虚拟机)

    （2）通过USB在真机上运行：cordova run android

    （3）在浏览器上运行：cordova serve android

    注意：每次对项目做了改动之后，需要运行编译命令和运行命令才能看到最新的效果

    

    四、常用命令

    （1）create <directory> [<id> [name]]

    创建一个cordova工程，id为package名。

    （2）platform [ls | list]

    列出该工程支持哪些平台

    （3）platform add <platform>[ <platform>...]

    为工程添加一个或多个平台支持

    （4）platform [rm | remove] <platform> [<platform>...]

    删除该工程的某个平台支持

    （5）platform [up | update] <platform>

    更新该工程某个平台的Cordova版本

    （6）plugin [ls | list]

    列出该工程包含哪些插件

    （7）plugin add <path-to-plugin> [path-to-plugin...]

    为工程添加一个或多个插件

    

    （8）plugin [rm | remove] <plugin-name> [plugin-name...]

    从该工程中删除某个插件

    （9）plugin search [<keyword1> <keyword2> ...]

    根所关键字从registry中搜索插件

    （10）compile [platform...]

    编译指定平台的app包

    （11）build [<platform> [<platform>] [...]] 

    先做prepare（拷贝文件）后做compile

    （12）emulate[<platform> [ <platform>][...]]

    启动模拟器运行应用

    （13）serve[port]

    启动本地web服务来访问www,默认端口是8080

    五、Cordova相关文件简介

    

    1、config.xml

    cordova的配置文件

    2、hooks目录

    存放自定义cordova命令的脚本文件。每个project命令都可以定义before和after的Hook,比如：before_build、after_build。

    Hook可以采用任何编程语言来写，Cordova CLI采用的是Node.js,所以一般都是用它来写。

    3、merges目录

    存放各个平台特殊的文件，会和www进行合并编译，相同的文件merges下的文件优先。编译使用

    4、platforms目录

    各个平台的原生代码工程，不要手动修改，因为在build的时候会覆盖。

    5、plugins目录

    插件目录（cordova提供的原生API也是以插件的形式提供的）

    

    6、www目录

    源代码目录，在cordova prepare的时候会被copy到各个平台工程的assets\www目录中。其中index.html为应用的入口文件。