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

本文详细介绍了Ionic框架,一个基于AngularJS和Sass的轻量级H5跨平台移动应用开发框架。相较于jqMobi和Sencha Touch,Ionic具有运行速度快、代码维护性好等优势。通过SASS构建应用,提供丰富的UI组件,支持AngularJS特性,且与Angular 2.0紧密集成。此外,文章还讨论了Ionic的优缺点,如学习成本低、组件强大、支持Cordova插件,但也存在版本兼容性问题和性能优化挑战。文中分享了Ionic的创建应用、运行调试的技巧,并解答了常见问题,如jsonp跨域、阻尼回弹效果、数据共享、视图更新等。
摘要由CSDN通过智能技术生成

进入正题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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值