Hello Ionic - Ionic学习笔记

带图版：http://note.youdao.com/share/?id=16ffdbff795502afad925c124fd010c5&type=note

Ionic介绍

---

Ionic 是一个强大的 HTML5 应用程序开发框架，号称 Advanced HTML5 Hybrid Mobile App Framework ，是 AngularJS 移动端解决方案， 可以帮助您通过使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。Ionic 主要关注外观和体验，以及和你的应用 程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

Ionic 是一个轻量的手机 UI 库，具有 速度快，界面现代化、美观 等特点。为了解决其他一些 UI 库在手机上运行缓慢的问题

详细介绍（翻译自Ionic开发者）

欢迎来到使用Ionic框架构建HTML5移动应用程序的官方指南，这篇文章是由Ionic作者为你呈现。它包含了所有你需要知道如何开始构建Ionic应用程序的东西，还有一些更高级的特性。

如果你在过去使用的其他移动开发框架，你会发现Ionic使用起来很熟悉。但开始任何框架都是艰巨的，所以我们会从简单基本概念开始，然后逐步深入。但首先，我们需要谈谈Ionic项目本身，它为什么 适合全栈式开发 ，还有为什么我们创造它。

什么是Ionic，Ionic适合怎样的开发？

Ionic是一个HTML5的移动应用开发框架，针对构建混合的移动应用程序。 混合应用程序从本质上来说，是运行在浏览器内壳里面的小网站，它可以访问本地平台层 。混合应用程序有许多超过纯原生应用的好处，特别是在平台支持，发展速度，还有第三方代码支持方面。

想像一下，Ionic作为前端UI框架，它会 帮助你处理所有你的App需要的外观和UI交互 ，你的app将变的如此动人。像“从原生出发“，支持一系列常见的原生移动组件，支持流畅的动画，和华丽的设计。

不同于一般的响应式框架，Ionic有着类原生风格的移动UI元素和布局，就像从一个原生iOS或Android SDK里面构建出来的一样，但以前从未存在过。Ionic也给了你一些你喜欢的，但强大的方式来构建移动应用程序，Eclipse导入现有的HTML5开发框架。

由于Ionic是一个HTML5框架，为了运行原生应用它需要一个本地的包装，如Cordova或PhoneGap 。我们强烈建议使用Cordova包装您的应用程序，Ionic的工具底层也使用Cordova。

为什么我们要创造Ionic？

我们创造Ionic， 是因为我们坚信HTML5会引领移动开发的未来 ，正像它在桌面程序上一样。 一旦电脑变得足够强大，浏览器技术已经足够先进，每个人都将把时间用在浏览器上。 开发者会都会喜欢构建Web应用程序。 近年来随着移动技术的进步，智能手机和平板电脑现在能够运行多个Web应用开发。

创造Ionic，我们是想建立一个HTML5的移动开发框架， 专注于原生或混合应用 ，而不是移动网站站，因为我们觉得已经有移动网站开发的好工具。因此Ionic的应用程序并不意味着要运行在手机浏览器，像Chrome或Safari，而是 更底层的的IOS的UIWebView 或Android的WebView，由Cordova/ PhoneGap包裹 。

首先，我们想确保Ionic是开放源代码，有一个宽松的开放源代码许可证，可以用于商业和开源应用程序，培育一个强大的社区附近的项目。有更多的框架（已经做好的模板，只用添加业务逻辑便可使用），确保在技术上是开源的，而不是精神上的开源或是在不购买商业许可证时无法使用。

Ionic构建混合应用

那些熟悉Web开发会发现Ionic应用的结构非常简单。 它的核心，只是一个运行在本地app壳里的Web页面！ 这意味着我们可以使用我们想用的 HTML，CSS和JavaScript 。唯一的区别是，不同于那些 有外链 的网站，我们正在建设一个 独立的应用程序 。

Ionic大部分使用HTML，JavaScript，CSS。聪明的开发者们也可能深入到Cordova插件或原生代码，但这并不是通往Great App的必经之路。

Ionic的核心功能也使用了AngularJS框架。虽然你可以只使用Ionic的CSS部分，但我们建议你在Angular上花一点时间，它是目前构建Webapp最好的方式。

开始吧！

现在你已经明白Ionic存在的原因，准备开始建立你的第一个应用程序吧。做好安装准备并开始建立Ionic App吧！

Phonegap介绍

---

PhoneGap是一个用基于 HTML，CSS和JavaScript的， 创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用iPhone，Android，Palm，Symbian,WP7,WP8,Bada和Blackberry智能手机的 核心功能——包括地理定位，加速器，联系人，声音和振动等，此外PhoneGap拥有丰富的插件 可以调用。

Phonegap运行速度 ：

    1. android环境：

        a) 512内存手机可以放弃phoengap  

        b) 1G 双核手机  运行流畅  感觉速度稍微比原生慢

        c) 2G  4核+ 手机运行流畅 看不出和原生差别

        d) 部分手机兼容可能会出现问题 需要调整css（原生开发也会有次问题）

    2. ios环境：

        a) iphone4+运行流畅  

        b) iphone5+ 看不出和原生差别

Angularjs介绍

---

诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中 如Gmail、Maps、Calender 等。号称 下一代web应用 ，是一款优秀 的 前端 JS 框架 。

 AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言，但要 构建WEB应用的话它就显得乏力了。所以我做了一些工作（你也可以觉得是小花招）来让浏览器做我想要的事。

  通常，我们是通过以下技术来解决 静态网页技术在构建动态应用上的不足：

   类库 - 类库是一些函数的集合，它能帮助你写WEB应用。起主导作用的是你的代码，由你来决定何时使用类库。类库有：jQuery等

   框架 - 框架是一种特殊的、已经实现了的WEB应用，你只需要对它填充具体的业务逻辑。这里框架是起主导作用的，由它来根据具体的应用逻辑来调用你的代码。框架有：knockout、sproutcore等。

  AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

  使用双大括号{{}}语法进行数据绑定；

  使用DOM控制结构来实现迭代或者隐藏DOM片段；

  支持表单和表单的验证；

  能将逻辑代码关联到相关的DOM元素上；

  能将HTML分组成可重用的组件。

引用自：

Angularjs中文网http://www.apjs.net/、百度百科

安装ionic

---

经典安装方式：

1. 配置环境
2. 先安装 node.js（包含npm）
3. 安装 cordova

在cmd中输入 
==npm install -g cordova== 
或 ==sudo npm install -g cordova==

注意： 部分同学现在直接使用 npm install -g cordova 发现安装了以后 执行 cordova build 
android的时候 提示需要安装 platform for android-21 sdk，意思就是需要 最新版本的 sdk

解决方法：

• 更新 sdk （推荐） 翻墙 代理 或者想其他办法
• Sdk 没法更新的情况下面 可以先卸载当前的 cordova，然后再重新指定版本安装 cordova
• 下载 sdk 包集成 推荐 http://bbs.phonegap100.com/thread-1566-1-1.html 
  Android adt 离线包集成 sdk 
  http://bbs.phonegap100.com/thread-1456-1-1.html

提示：ctrl+c终止批处理操作

卸载 cordova 
卸载方法

重新指定版本 安装 cordova 
http://bbs.phonegap100.com/thread-1127-1-1.html 
npm install -g cordova@4.1.2

4.安装ionic

==npm install -g ionic== 
或 ==sudo npm install -g ionic==

5.创建运行项目

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 (连接上手机运行)  

基于Android Studio的Android方面安装方式：

这里说Android的：

需要的软件：

java

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 

git

http://git-scm.com/download/ 

nodejs （包含npm）

https://nodejs.org/ 

android studio （包含android sdk）

http://www.android-studio.org/ 

Genymotion （Android模拟器，需要去官网注册个账号，也可不用这个，用真机调试）

https://www.genymotion.com/ 

先安装java，需要配置JAVA_HOME，不然android studio无法安装

其他的直接安装就行

创建项目

---

e:\project>ionic start ionic_demo01

可以创建不同的模板，默认是tabs（导航栏）模板

ERROR：运行ionic build android 提示未设置 ANDROID_HOME 
解决方案： 
新建环境变量 ANDROID_HOME，令其值为Android sdk文件夹的路径 
再建 ANDROID_PLATFORM_TOOLS,值为sdk目录下的platform-tools文件夹路径 
还有 ANDROID_TOOLS，值为sdk目录下的tools文件夹路径 
最后在path环境变量中新增ANDROID_HOME，即末尾添加;%ANDROID_HOME%

ERROR: [Error: Please install Android target: “android-22”. 
Hint: Open the SDK manager by running: D:\program\SDK\tools\android.BAT (打开Android.bat) 
You will require: 
1. “SDK Platform” for android-22 (安装Android-22) 
2. “Android SDK Platform-tools (latest) (安装最新平台工具) 
3. “Android SDK Build-tools” (latest)] (安装最新通用工具)

叫我更新到Android-22，倒霉的是，这个更新需要翻墙。 
那么好的，到网上搜到一小时vpn，按照win8教程配置好我的win10vpn，登上账号，终于开始下载了，速度50~500kb/s，波动有点大，50是常态，不过能更新就好。

Android sdk manager安装的选择：Android5.1.1（API22）中，我只选择了SDK Platform，然后就是选择了Tools里面的Android sdk tools和Android sdk platform-tools和Android sdk Build-tools。 
除了这些，还有Extras目录下的Android support repository，Android support library，google repository，google USB Driver最好也弄上。

            

编译项目

---

ok，解决了error，继续上路，输入指令ionic build Android，开始编译，速度有点慢，主要是在下载gradle-2.2.1.zip，看来编译还需要gradle打包构建工具，真是麻烦，还好是自动化的。当初弄Android studio也是弄了这个，现在发现Android studio隐藏了很多环境设置细节，越来越喜欢AS了。

ERROR：Could not resolve com.android.tools.build:builder:1.0.0.

通过错误描述，猜测有可能由于网络问题，对应的版本下不下来，无法进行打包构建，缺少gradle1.0.0工具，处于vpn状态下，再次编译，开始下载一堆东东，有点慢，终于成功了

编译成功 

编译完成后，可以在项目目录/platform/andorid/build/outputs/apk文件夹里看到应用的apk安装包了。

至此可以将项目导入到Android studio中，用AS来编辑、运行应用。不过AS的html编辑能力比较差，按照教程的指导，不采用这种方式。html的编辑问题先不管。

接下来准备在命令行界面连接手机

---

输入adb devices 查看所有设备，提示adb不是有效的命令，应该是还没配置环境变量，将Android sdk目录/platfrom_tools添加进path环境变量中。 
 
在手机设置开发者选项中，打开允许调试开关，连上手机，点击允许调试，再次执行adb devices ，ok。

在手机上运行

---

e:\project\ionic_demo01>ionic run android

浏览器调试（重要，用于调试）

---

e:\project\ionic_demo01>ionic serve 
打开本地的浏览器调试应用，google浏览器（360浏览器）点击F12进行调试，点击左边的小手机图标查看手机上的模拟状态 

进入serve状态后，会监听文件的修改，文件修改保存后会自动刷新浏览器以展示修改后的内容（动态预览） 

cmd中ctrl+c结束调试

android中，调整tabs模板的导航栏到底部

---

修改app.js文件

通过文本编辑器打开app.js，在config中添加$ionicConfigProvider以及设置：

ironic是要修改项目目录下的www文件夹内的内容，不是platform下的。编写应用也是修改www下的文件

......

.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('standard');

        $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); 
        $ionicConfigProvider.platform.android.navBar.alignTitle('left');

        $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');

......

使用Crosswalk提高phoneGap应用运行速度

---

Crosswalk简介

Crosswalk是一款开源 android WebView 引擎，能够使phoneGap应用运行速度提升3-5倍，缺点是安装包体积会变大很多。同时和系统的整合交互方面（比如启动画 
面、权限管理、应用切换、社交分享等等）可以做到类似原生应用。 现在 Crosswalk 已经成为众多知名 HTML5 平台和应用的推荐引擎， 包括 Google Mobile Chrome App、 Intel XDK、Famo.us 和 Construct2 等等， 未来的 Cordova 4.X 也计划集成 Crosswalk。同时在去年的中国 iWeb 大会上， Cocos2d-HTML5 游戏引擎也宣布与 Crosswalk 展开合作。

Ionic 中集成 Crosswalk （也可以集成其他的 htnl5 框架 如 jqmobi） 介绍：

1.集成 crosswalk

x:/project>ionic browser add crosswalk

使项目(不能有中文目录，还得翻墙)添加crosswalk webview引擎

2.卸载 crosswalk

x:/project>ionic browser revert android
或者 x:/project>ionic browser remove crosswalk

注意：执行以上命令时需要在线。命令行工具版本必须为1.3.0以上。Android SDK 为 19以上。

参考自phoneGap中文网

如果ionic停止维护了，如何使用ionic进行开发

---

将github上的ionic代码复制出来，复制到cordova目录下的www目录下，也是可以运行的。