【Ionic入门】-Ionic简介

太过爱你忘了你带给我的痛 2022-07-27 14:42 280阅读 0赞

![Center][]

## Ionic介绍: ##

[ I**onic**][I_onic]是一个强大的混合式/hybrid HTML5移动开发框架，特点是使用标准的HTML、CSS和JavaScript，开发跨平台应用.

Ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点

Ionic 关注外观和体验，以及和应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发.

![Center 1][]

##  Ionic主要部分： ##

**CSS 框架** \- 提供原生App质感的CSS样式模拟. Ionic这部分的实现使用了Ionicons图标样式库.

JavaScript 框架\- 提供移动 Web 应用开发框架. Ionic 基于 AngularJS 基础框架开发，因此，在遵循

AngularJS的框架约束之外，Ionic还是用了AngularJS UI Router实现前端路由.

**命令行 /CLI** \- 命令行工具集用来简化应用的开发、构造和仿真运行。Ionic 命令行工具使用了Cordova,依赖

于平台SDK（Android & iOS）实现将移动 web 项目打包成原生 app.

##  Ionic特点: ##

1.ionic 基于Angular语法，简单易学.

2.ionic 是一个轻量级框架.

3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护.

4.ionic 提供了漂亮的设计，通过[SASS][]构建应用程序，它提供了很多UI组件来帮助开发者开发强大的应用.

5.ionic 专注原生，让你看不出混合应用和原生的区别.

6.ionic 提供了强大的命令行工具.

7.ionic 性能优越，运行速度快.

## 扩展知识: ##

[SASS][]:(Syntactically Awesome StyleSheets ) 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用[变量][Link 1]、[嵌套规则][Link 2]、 [mixins][]、[导入][Link 3]等众多功能， 并且完全兼容 CSS 语法.

![Center 2][]

[AngularJS][]:为了克服HTML在构建应用上的不足而设计的.

![Center 3][]

**[ ][Link 4]****[Cordova][Link 4]**:驱动PhoneGap的核心引擎

![Center 4][]

本篇主要介绍了Ionic,和主要的几大部分知识点,以及Ionic的特点.扩展部分知识,没有进行深入了解,在这里也只

是知道有这么个东西,深入的学习还需要进一步.

接下来的博客,会通过实例去介绍Ionic的CSS库及它的JS库和命令行等新鲜知识.

![Center 5][]

[Center]: /images/20220727/154954190da3477087b4110fd88a4bf1.png
[I_onic]: http://ionicframework.com/
[Center 1]: /images/20220727/50e6dfe456ef4f6693ca7eabaf806ca9.png
[SASS]: http://sass.bootcss.com/docs/sass-reference/
[Link 1]: http://sass.bootcss.com/docs/sass-reference/#variables_
[Link 2]: http://sass.bootcss.com/docs/sass-reference/#nested_rules
[mixins]: http://sass.bootcss.com/docs/sass-reference/#mixins
[Link 3]: http://sass.bootcss.com/docs/sass-reference/#import
[Center 2]: /images/20220727/7bbd348eb7e64e58838798ac0df903df.png
[AngularJS]: http://docs.angularjs.cn/api
[Center 3]: /images/20220727/065af4897f1b4acaab662650e1e61f13.png
[Link 4]: http://write.blog.csdn.net/postedit
[Center 4]: /images/20220727/9623d04ca2184346ad56000bf5f60170.png
[Center 5]: /images/20220727/62015aecc4594f5e9cc61e5fe71a17ab.png