（一）ionic开发环境搭建

（一）Ionic简单介绍：

首先，Ionic是什么。

        Ionic是一款基于PhoneGap及AngularJS开发Hybrid/Web APP的前端框架，类似的其他框架有：Intel XDK等。

        简单来说就是可以将你的Web应用打包发布成IOS/Android APP，并且提供了PhoneGap之外很多强大的服务和新的特性。

        听起来还是很诱人的，事实上这也是目前最火的一中Hybrid APP开发方式。接下来介绍如何在Windows下搭建Ionic开发环境。

        在开始之前我假设你已经了解了如下概念。

                Java JDK 

                Apache Ant

                Android SDK

                NodeJS

        #以上名词这里就不赘述，如果有不清楚的可以自行查阅#

（二）安装步骤：

Ionic官方教程： http://learn.ionicframework.com/videos/windows-android/

        以下内容参考官方教程得出。

        1、下载JDK并配置好Java运行环境

        下载地址： http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html （请注意选择您电脑的对应版本）

        Java环境变量的配置：

        2、下载Apache Ant 并将其bin目录路径添加进Path路径

        下载地址： http://mirror.tcpdiag.net/apache//ant/binaries/apache-ant-1.9.4-bin.zip

        下载完成后解压该文件至某个安全的目录下，然后将改文件夹内的bin文件夹路径添加至系统Path环境变量中，如存放在C盘 Program Files目录下则Path中添加如下值 C:\Program Files\apache-ant-1.9.4\bin;  （添加方法和java配置path变量是一样的，注意以 ； 隔开每个环境变量的值）

        3、下载Android SDK 并配置好SDK运行环境

        下载地址： http://developer.android.com/sdk/index.html 这里可以只下载Android SDK 不需要一并下载 Android Studio。下载完成并安装然后向系统Path环境变量中添加两个值。分别是 Android SDK中tools目录的路径和platform-tools的路径。例如：

                C:\Program Files (x86)\Android\android-sdk\tools;

                C:\Program Files (x86)\Android\android-sdk\platform-tools;

        4、下载NodeJS for Windows并安装

        下载地址：https://nodejs.org/download/ 

        Windows下安装NodeJS环境很简单，在NodeJS官网下载正确版本后安装即可。

        注意要下的是下图中红色框所标注的文件。

        5、利用NodeJS中提供的nmp来安装Ionic和Cordova

        完成以上几步需要配置的环境就搭建完成了，接下来就只需要在控制台输入简单的几行命令就可以安装Ionic和Cordova啦。

        将cordova和ionic包安装到全局环境中（可供命令行使用，管理员身份运行命令行）：

          npm install -g ionic cordova

注：由于 GFW ，很多插件下载不下来，我们可以使用淘宝镜像来解决这个问题：

npm install -g cnpm --registry=https://registry.npm.taobao.org  

安装完成后，以后所有的插件都使用cnpm这个命令来进行安装。

cnpm install -g ionic cordova

（三）创建一个Android项目并调用虚拟机运行：

    1.进入你要创建项目的路径：

cd E:\Study\Android\ionic\Project  

2.创建一个名为myApp的还有tabs的项目（ionic start <project-name> <optional-template>） 可选模板为sidemenu 侧滑、tabs 底部tab切换、blank 空白）:

ionic start myApp tabs

3.myApp就为项目名称,进入myApp这个文件夹:

cd myApp 

4.添加android平台:

ionic platform add android 

5.生成androidapk:

ionic build android 

6.在android模拟器或真机中模拟:

ionic emulate android 

7.在真机中运行

ionic run android 

8.更新cordova及ionic包

npm update -g cordova ionic  

9.更新已建ionic项目中的js类库，命令行中先进入项目所在目录，然后运行：  

ionic lib update

（四） Crosswalk开源android WebView 引擎，让Phonegap android应用飞起来（经测试运行速度可以提升 3-5倍）

1. Crosswalk介绍： Crosswalk作为一款开源的web引擎，正是为了跨越这些障碍而生。目前Crosswalk正式支持的移动操作系统包括Android和Tizen，在Android 4.0及以上的系统中使用Crosswalk的Web应用程序在HTML5方面可以有一致的体验，同时和系统的整合交互方面（比如启动画面、权限管理、应用切换、社交分享等等）可以做到类似原生应用。现在Crosswalk已经成为众多知名HTML5平台和应用的推荐引擎，包括Google Mobile Chrome App、Intel XDK、Famo.us和Construct2等等，未来的Cordova 4.X也计划集成Crosswalk。同时在去年的中国iWeb大会上，Cocos2d-HTML5游戏引擎也宣布与Crosswalk展开合作。

2．使用Crosswalk的优点和缺点 优点：运行速度提升 安装包比较大 Ionic 中集成 Crosswalk （也可以集成其他的htnl5框架 如jqmobi）介绍：

1．集成crosswalk ionic browser add crosswalk

2.卸载 crosswalk ionic browser revert android 或者 ionic browser remove crosswalk

（五） Android中底部导航栏在上方的问题

打开项目的app.js文件添加

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
        //定义导航图标在底部
	$ionicConfigProvider.platform.ios.tabs.style('standard');
        $ionicConfigProvider.platform.ios.tabs.position('bottom');
        $ionicConfigProvider.platform.android.tabs.style('standard');
        $ionicConfigProvider.platform.android.tabs.position('bottom');

        $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
        $ionicConfigProvider.platform.android.navBar.alignTitle('center');
        //定义路由的返回按钮样式，并且把携带的上一页的标题数据隐藏掉
        $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
        $ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');

        $ionicConfigProvider.platform.ios.views.transition('ios');
        $ionicConfigProvider.platform.android.views.transition('android');

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js