进入正题ionic之前,先聊聊目前很火的h5开发移动应用的主流技术,做个对比。
- Jqmobi
轻量级框架,它的语言基于 jquery 语言容易上手,运行速度快,但是没有 MVC 多人协作
开发的概念,项目比较大后 代码不易维护 (中小项目 1-2 个人开发很适用) - SenchaTouch
运行速度快 和 jqmobi 运行速度差不多, 兼容性好, 基于 MVC 世界上第一个 html5 移
动开发框架,但是它是一个重量级的框架, 需要 extjs 基础 代码复杂需要较强的程序基
础。
但是 sencha architect 是个很不错的可视化开发工具,弥补了 sencha 的不少缺点 - ionic
运行速度快 和 jqmobi 运行速度差不多, 轻量级框架,基于 Angularjs,支持 Angularjs
的特性, MVC ,代码易维护
IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它
提供了很多 UI 组件来帮助开发者开发强大的应用。 它使用 JavaScript MVVM 框架和
AngularJS 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选
择。即将发布的 AngularJS 2.0将会专注于移动开发,相信 IONIC一定会取得不错的成就 。 - 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