IONIC学习笔记.docVIP

ionic简介 中文文档教程： http://www.ionic.wang/js_doc-index.html 官方教程： /docs/api/ Hybrid vs. Others 介绍 要开发手机App，目前有三种方式： 原生/Native：使用原生SDK开发App。优点不用说，当你有足够的资源，这是最理想的方式；缺点是对不同的 平台要分别开发，成本高、周期长。 原生脚本/NativeScript：将原生API封装成JavaScript接口，这有点像前端的nodejs。NativeScript方式 与原生相比性能损失不大（据称只有10%左右），优点是开发语言统一使用JavaScript，缺点是 要针对不同的平台分别开发。 混合/Hybrid：使用web技术开发App，使用Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发， 避免了不同平台原生开发体系的学习，上手快、效率高；缺点是性能上有一定损失。 ionic属于hybrid开发模式，本质上是将移动web应用与浏览器打包,优点和缺点都很明显。 是否采用这种模式，需要根据具体情况综合考虑。 不过在大多数场景下，如果你已经具备一定的web开发经验，采用这种方式进入移动App开发领域，还是不错的一个选择。 毕竟，将产品低成本地开发出来并更快地推向市场，有时是最重要的事情。 !DOCTYPE html html head meta name=viewport content=initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height link rel=stylesheet type=text/css href=ionic.min.css /head body img src=img/logo.png /body /html ionic 介绍 ionic是一个强大的_混合式/hybrid_HTML5移动开发框架，特点是使用标准的HTML、 CSS和JavaScript，开发跨平台（目前支持：Android、iOS，计划支持：Windows Phone、Firefox OS） 的原生App应用： ionic主要包括三个部分： CSS框架 - 提供原生_App质感的CSS样式模拟_。ionic这部分的实现使用了ionicons图标样式库。 JavaScript框架 - 提供移动Web应用开发框架。ionic基于AngularJS基础框架开发，因此 自然地遵循AngularJS的框架约束；此外，ionic使用AngularJS UI Router实现前端路由。 命令行/CLI - 命令行工具集用来简化应用的开发、构造和仿真运行。ionic命令行工具使用了 Cordova，依赖于平台SDK（Android iOS）实现将移动web项目打包成原生app。 由于ionic使用了HTML5和CSS3的一些新规范，所以要求 iOS7+/ Android4.1+。 在低于这些版本的手机上使用ionic开发的应用，有时会发生莫名其妙的问题。 !DOCTYPE html html head meta name=viewport content=initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height link rel=stylesheet type=text/css href=ionic.min.css /head body img src=img/logo.png /body /html CSS框架 介绍 如果你对AngularJS这样的东西不感兴趣，可以只使用ionic的CSS框架：直接在HTML中引入 ionic.css就可以了。 ionic的CSS框架主要提供预定义的CSS类，来帮助我们快速构建适用于手机端的UI。 ionic的预定义CSS类主要分四个方面： 基本布局类 ionic将手机页面的布局模式基本抽象为三块：头、内容、尾。基本布局类提供了 这几个区域的CSS类。 颜色和图标类 ionic定义了几个配色方案CSS类，并使用ionicons提供的字体图标类。 界面组件类 ionic定义了丰富的界面组件CSS类，让HTML元素看起来像移动平台的UI组件。 栅格系统类 和Bootstrap一样，ionic也提供了栅格系统。不过ionic的实现是基于CSS3的FlexBox 模型，更为灵活。!DOCTYPE html html head meta name=viewport content=initial-scale=1,