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

一 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常用技巧

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下的运行情况，一般功能的调试推荐用这种方式。