Web移动端混合开发--IonicFramework

混合开发方案

• 采用框架：

    Ionic + Cordova + AngulaJS + Ionic UI
  

• ionic是什么：

    Ionic(ionicframework)一款开源的Html5移动App开发框架,是AngularJS移动端解决方案,
    Ionic以流行的跨平台移动app开发框架phoengap为蓝本，让开发者可以通过命令行工具快速生成
    android 、ios移动app应用。通俗的讲：ionic是一款基于angularjs的html5移动app开发框架，
    phonegap就是一款可以打包并且可以让js调用原生的移动app框架。
  
  
    Ionic 底层打包使用 Cordova ( 和 Phonegap 一样 ) 底层打包用 Cordova 是不错的。Ionic 
    是一个全堆栈的混合应用开发框架，可以理解成 
    		Ionic = Cordova + AngularJS + Ionic UI
  

• 优点：

    1.开发成本低；
    2.能够快速进行开发，迭代更新容易；
    3.轻量级和插件式架构显著降低了维护成本；
  

• 缺点：

    1.Ionic放弃了ios6(市场占用率低于5%)和Android4.1(市场占用率低于10%)以下版本支持，来获取更好的使用体验；
    2.浏览体验短期内还无法超越原生应用；
    3.特别复杂的应用运行速度稍显缓慢；
  

混合开发环境

1. 安装node.js
2. 安装jdk1.7
	配置环境变量，在我的电脑->属性->高级->环境变量->系统变量中添加以下环境变量(假定你的j2sdk安装在c:\jdk1.7)：  
		JAVA_HOME=c:\jdk1.7
		classpath=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;（.;一定不能少，因为它代表当前路径）  
		path=%JAVA_HOME%\bin
	安装完成后cmd下执行命令行  java -version 查询版本即可验证是否安装成功
3. 安装android SDK
	配置环境变量，在我的电脑->属性->高级->环境变量->系统变量中添加以下环境变量(假定你的sdk安装在E:\soft\adt-bundle-windows-x86_64-20140702\sdk)：
		ANDROID_HOME = E:\soft\adt-bundle-windows-x86_64-20140702\sdk
		path=%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;
4. 安装Git
	配置环境变量，在我的电脑->属性->高级->环境变量->系统变量中添加以下环境变量(假定你的git安装在E:\soft\Git)：
		path=E:\soft\Git\cmd;
5. 安装cordova和ionic
	npm install -g cordova ionic	（如果出错的话，在安装ionic 和cordova 之前，先安装 express 然后在安装ionic 和cordova 居然就可以安装了。）
	npm  install express
	npm install -g ionic
	npm Install -g cordova
	
*备注：*
	查询版本即可验证是否安装成功
	node -v
	ionic -v
	cordova -v
	npm -v
	java -version

ngCordova的安装及配置

插件文件地址：http://ngcordova.com/docs/plugins/barcodeScanner/
安装：

Ionic安装及使用一览图（请全屏查看）

命令行创建工程

• IOS创建-安装-运行

    ionic start myproject  
    cd myproject  
    ionic platform add ios  
    ionic build ios  
    ionic emulate ios
  

• Android创建-安装-运行

    ionic start myproject 
    cd myproject 
    ionic platform add android 
    ionic build android 
    ionic emulate android  (模拟器运行)
    ionic run android  (连接上手机运行) 
  

号外！

准备：

• JDK
  下载地址 http://www.oracle.com/technetwork/java/javase/downloads/index.html
  安装好之后环境变量配置:

    新建系统变量JAVA_HOME 和CLASSPATH 
    	变量名：JAVA_HOME 变量值：C:Program FilesJavajdk1.7.0	
    	变量名：CLASSPATH 变量值：.;%JAVA_HOME%libdt.jar;%JAVA_HOME%libtools.jar;	
    	变量名：Path 变量值：%JAVA_HOME%bin;%JAVA_HOME%jrebin;
  

• Android SDK
  (参考该文章：http://www.cnblogs.com/zoupeiyang/p/4034517.html)

• git
  中间选择按照命令行来安装,会直接给你配置好环境变量.

• nodejs 以及 npm
  下载地址(https://nodejs.org/)

    nodejs 安装简单,直接, 下一步下一步,然后完事.
    cmd 测试: 输入  npm -v   和  node -v     结果如下说明成功.