什么是ionic
Ionic 是一个强大的HTML5 原生应用(native app) 开发框架,帮助你用HTMLL ,css 和javascript 构建具有原生味道的移动应用(mobile apps)
Ionic 是一个高级HTML5 混合式移动应用开发框架,同时也是一个开源的前端框架。
ionic 注重的是视觉效果和用户体验,所以使用了 AngularJS 来构建很各种酷的效果。
Ionic 是类似Bootstrap 概念的WebApp 框架,提供了 Hybrid App 的 基础css ,UI 控件,工程架构和最佳 实践
ionic的优势
Ionic 的优势非常显著:
谈谈 Hybrid app
从网上盗来的一张图,可以很直观的看出Native app 、Web app 和Hybrid app 三者之间的区别
1)Native APP :Native Code编程,代码编译之后以2 进制或者字节码的形式运行在OS上,直接调用OS 的Device API;
2)Web APP ,以HTML+JS+CSS等WEB技术编程,代码运行在浏览器中,通过浏览器来调用Device API(取决于HTML5未来的支持能力):
3)Hybrid APP ,部分代码以WEB 技术编程,部分代码由某些Native Container承担(例如PhonGAP 插件,BAE插件),其目的是在HTML5尚未完全支持Device API 和Network API 的目前阶段,承担这部分职责。
总体来讲,Hybrid App 是同时采用网页语言与程序语言进行开发,通过不同的应用商店进行打包与分发,应用的特性更接近原生应用而且又区别与Web应用。但是在开发过程中同时使用了网页语言,所以开发成本与难度大大降低。也就是说Hybrid App 兼具了Native App 与Web App 两者的诸多优点。
Hybrid App 有以下的特性:
开发时可能不采用或者大部分不采用原生语言,但是却有所有原生应用的特性;
架构方案会和原生有出入,基本由工具而定;
具有跨平台特性;
一般开发相对原生开发的方式要简单。
工具方面,我们可以使用Angular.js用于双向数据绑定和网络请求以及视图管理等工作,使用require.js 来实现模块化开发,帮你组织代码。使用jade 模板引擎,关于jade 这篇文章介绍得挺好的:http://segmentfault.com/a/1190000000357534
谈谈ionic和react native
最近,Fackbook 开源了react native ,其宣传 “Learning once, write anywhere” 。
ionic 除了提供css 框架以外,还提供js UI 库,ionic 遵循了mvc 的设计模式
React Native 可以基于用来构建用户界面的React.js 来开发iOS 和Android 原生应用。
React Native 使你能够运用 js 和 React 的相关知识,基于本地平台构建世界级的应用。
React Native 关注的焦点是开发者能够高效地开发所有相关平台的应用 - 学习一样东西就可以做任何事情。
js框架选择原则
需要使用大量UI 控件,表单密集型的应用
jQuery Mobile
? Sencha Touch
? Ionic
UI较单一 ,注重性能,注重页面特效的应用(淘宝的)
使用多个小型js库
? zepto.js作为底层库,兼容jquery语法
? 使用sea.js进行模块的管理和发布
? 使用backbone.js为基础的MVC架构,用来剥离应用的数据部分
? 使用underscore.js做为前端模板引擎(或使用juicer)
安装cordova和ionic
如果你想要开始Ionic 开发,你需要先安装 Node.js 。
在win 系统中:
npm install -g cordova ionic
在Mac 中,需要加上sudo :
sudo npm install -g cordova ionic
安装完后在cmd 或者终端输入ionic :
这样就表示安装成功啦。
开始一个ionic app
ionic 官网为开发者提供了多个开发模板,如:
空白模板(Black app):
ionic start myApp blank
tabs模板 :
ionic start myApp tabs
sidemenu模板:
ionic start myApp sidemenu
开始创建一个工程:
ionic start myIonicApp tabs
这边最后填写y 确定后,会自动跳转到官网注册一个账号的
运行
$ cd myIonicApp
$ ionic platform add ios
$ ionic build ios
$ ionic emulate ios
以上输完之后貌似会提示一个错误,如果正常的话是会出现一个ios 的模拟器的
然后再输入下面这串命令行,继续刷屏:
$ sudo npm install -g ios-sim
然后继续输入:
$ ionic emulate ios
就会弹出模拟器了。
关于更多命令只需在终端输入ionic :
在这里,我推荐大家使用 $ ionic serve 命令来使用电脑浏览器调试,如图:
ionic插件安装与卸载
使用下面的命令查询、安装、卸载插件:
ionic plugin list //列出所有已安装插件
ionic plugin remove 插件名 //先根据上面的list列出插件,然后根据插件名卸载
ionic plugin add 插件地址 //这个插件地址可以是github的项目地址,也可以是一个文件夹路径
ionic –help //查看帮助文件
ionic 项目托管平台地址: https://github.com/driftyco/ionic/
css组件:http://www./docs/components/#header
react 中文索引:http://nav./
移动端手势导图
|