Hybrid App混合模式移动应用开发（AngularJS+Cordova+Ionic）

       以前公司开发了某手机APP是通过jquerymobile来实现的，发现它对手机上的原生设备无能为力。于是在下一个项目到来之际，通过筛选最终决定使用cordova+Ionic。看起来简单，但是因为他们各自有一些依赖，林林总总，最终涉及的内容便不少了。

　　如下所示：

　　环境搭建：window

　　　　1、JAVA-SDK 安装配置(版本7以上)

　　　　　　这个没什么难度，到官网下载jdk，然后按照步骤配置环境变量即可。配置完成后，记得校验jdk安装是否成功。

　　　　　　JDK安装及环境变量配置

　　　　2、Android-SDK 安装配置

　　　　　　Android的SDK安装配置我不怎么熟悉，关键是安装文件过于巨大。所以我用的公司提供的安装包，解压好即可使用。

　　　　　　Android SDK下载和安装以及环境变量配置

　　　　3、Nodejs 安装

　　　　　　之所以要用NodeJS主要原因在于，Cordova、Ionic等需要依赖该NPM平台进行安装。

　　　　　　淘宝NPM镜像 因为某些原因，在国内安装NPM上的插件，不FQ的话，基本上无法成功。所以，大家感谢它吧。

　　　　　　windows环境下，通过CMD进入命令窗口，在命令行输入： npm install -g cnpm --registry=https://registry.npm.taobao.org然后等着它执行完成。

　　　　4、Cordova CLI 安装

　　　　　　windows环境下，通过CMD进入命令窗口，在命令行输入：cnpm install -g cordova，然后等着它执行完成。

　　　　　　

　　　4.1、创建Hybrid App　

　　　　　　4.1.1）创建一个目录，用于存放你的android项目

　　　　　　　　例如：E:\Study\Android\Project

　　　　　　4.1.2）进入你要创建项目的路径

　　　　　　　首先通过CMD进入到命令窗口，然后在命令行输入：e: 进入E盘，再输入：cd E:\Study\Android\Project

　　　　　　4.1.3）创建一个应用程序（大家可以观察操作前后该目录的变化）

　　　　　　　 cordova create hello com.example.hello HelloWorld

 

　　　　　　　　参数说明：
　　　　　　　　　　1--hello：即创建的项目目录名
　　　　　　　　　　2--com.example.hello：项目的唯一id
　　　　　　　　　　3--HelloWorld：应用的显示名称

　　　　　　4.1.4）添加平台（大家可以观察操作前后该目录的变化）　　　　　　　　

　　　　　　　　　　输入命令行：cd hello (进入到项目目录中)

　　　　　　　　　　输入命令行：cordova platforms add android　　　　

　　　　　　4.1.5）添加Cordova操作原生设备的插件（大家可以观察操作前后该目录的变化）

　　　　　　　　      通过网上资源获取(命令行依旧在项目目录中)

　　　　　　　　      cordova platforms plugin add cordova-plugin-camera
　　　　　　　　      其中 cordova-plugin-camera 为特定的插件名，输入命令后，npm通过网上资源下载，并添加到项目中。

　　　　　　4.1.6）打包（大家可以观察操作前后该目录的变化）

　　　　　　　　　　打包Android 的app，则需要输入(命令行依旧在项目目录中)
　　　　　　　　　　命令行输入：cordova build android

　　开发框架  Ionic

　　　　1、安装Ionic  

　　　　      windows环境下，通过CMD进入命令窗口，在命令行输入：cnpm install -g ionic，然后等着它执行完成。

 　　　　2、下载AngularJS包

　　　　　　   大家自个百度吧。我再提供一个学习的网站(汇智网~貌似有推广效果，网站不允许~囧)，大家共勉之。

　　

　　开发环境：Eclipse 4.4 (Luna)

　　　　1、安装插件JBoss Developer Studio,该插件中包含了AngularJS的语法提示，可以为初学者提供极大的助力。我这边不知道怎么回事，安装成功了，但是在eclipse界面并没有任何相关字眼，折腾了半天没有效果后。我目前使用的是sublime text2进行开发，这玩意整插件也整得很酸爽！　

　　　　    JBoss Developer Studio安装及项目导入

　　　　　  

　　Debug 工具：Ripple Emulator

　　　1.安装Ripple Emulator
　　　　 进入命令行 cnpm install -g ripple-emulator

 

　　　 2.进入cordova 项目路径
　　　　 命令运行：ripple emulate

 

　　    3.测试工具会自动生成本地测试地址，如:
　　　　http://127.0.0.1:4400/?enableripple=cordova-3.0.0
　　　　该地址可以拷贝到chrome firefox使用。