前端学习总结（十二）ionic——媲美原生的h5跨平台移动应用开发框架

进入正题ionic之前，先聊聊目前很火的h5开发移动应用的主流技术，做个对比。

1. Jqmobi
   轻量级框架，它的语言基于 jquery 语言容易上手,运行速度快，但是没有 MVC 多人协作
   开发的概念，项目比较大后 代码不易维护 (中小项目 1-2 个人开发很适用)
2. SenchaTouch
   运行速度快 和 jqmobi 运行速度差不多， 兼容性好， 基于 MVC 世界上第一个 html5 移
   动开发框架，但是它是一个重量级的框架， 需要 extjs 基础 代码复杂需要较强的程序基
   础。
   但是 sencha architect 是个很不错的可视化开发工具，弥补了 sencha 的不少缺点
3. ionic
   运行速度快 和 jqmobi 运行速度差不多， 轻量级框架，基于 Angularjs，支持 Angularjs
   的特性， MVC ，代码易维护
   IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序，它
   提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和
   AngularJS 来增强应用。提供数据的双向绑定，使用它成为 Web 和移动开发者的共同选
   择。即将发布的 AngularJS 2.0将会专注于移动开发，相信 IONIC一定会取得不错的成就 。
4. Crosswalk 开源 android WebView 引擎，让 Phonegap android 应用飞起来（经
   测试运行速度可以提升 3-5 倍）

一 ionic简介

ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

ionic提供很多css组件和javascript UI库。

ionic可以支持定制android和ios的插件，也支持服务端REST的敏捷开发。

ionic 特点：
1.ionic 基于Angular语法，简单易学。
2.ionic 是一个轻量级框架。
3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。
4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。
5.ionic 专注原生，让你看不出混合应用和原生的区别
6.ionic 提供了强大的命令行工具。
7.ionic 性能优越，运行速度快。

ionic优点

学习成本低

对前端开发者来说，学习成本不是很高，如果有接触过 angular ，就几乎没有什么学习成本了

简单易用

强大的CLI， start -> platform -> serve -> build -> emulate -> run ，全套服务命令行完成，不用写配置文件，不用F5

组件多而强大

提供了很多强大的现成组件，很容易实现流行的交互效果，比如下拉刷新（ ion-refresher ）、上拉加载/瀑布流（ ion-infinite-scroll ）、tabs（ ion-tabs ）、侧边栏菜单（ ion-side-menu ）等等，只需要写一点点代码，就能实现这些流行效果，比native开发速度快太多了

支持cordova插件

打开了这扇门，意味着我们可以使用大量的原生功能，比如调用相机拍照、响应返回按钮、打电话发短信发邮件……都只要几行代码就能搞定

更新速度快

快速更新意味着有人维护，bug能被迅速修复

缺点：

新版本不完全向后兼容

bug难以定位

angular+cordova+ionic+javascript，发现问题后，很难确定是哪块的问题

性能优化难

动画卡顿，低端机体验更差，而优化措施一般都是建议少用动画少用阴影少用渐变

二 ionic常用技巧

1创建应用：

进入想要创建工程的目录，输入命令：

a. 创建空白应用：

$ ionic start myApp blank

b. 使用ionic官方提供的模版，创建一个带标签的应用：

$ ionic start myApp tabs

c. 使用ionic官方提供的模版，创建一个带侧边栏菜单的应用：

$ ionic start myApp sidemenu

2.运行

1.ios:

$ cd myApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios

2.android:

$ cd myApp
$ ionic platform add android
$ ionic build android
$ ionic emulate android

如果是使用手机或者genymotion的话,最后一行命令是：ionic run android，建议使用使用手机或者genymotion模拟器测试，比AS的模拟器快很多。

3.通过Chrome浏览器运行调试

进入工程目录，输入命令：

$ ionic serve

在Chrome浏览器打开调试地址，将浏览器跳到手机模式，可以方便快捷的测试android和ios下的运行情况，一般功能的调试推荐用这种方式。

三 ionic常见问题解决

一.jsonp跨域，php服务怎么写

这是angular的问题angular的$http可以发送jsonp请求，用法类似于jQuery，如下：

// 请求数据
$http.jsonp(sUrl).success(function(res){// ...
}).error(function(err){// ...
});

sUrl 有特殊要求，必须带上 callback 参数，而且参数值 只能 是 JSON_CALLBACK ，angular文档：

Relative or absolute URL specifying the destination of the request. The name of the callback should be the string JSON_CALLBACK.

例如：

var sUrl = http://www.ayqy