使用Ionic框架开发Hybird应用

什么是Ionic

Ionic是一个强大的HTML5 原生应用(Native App)开发框架,帮助你用HTML,CSS和JavaScript构建具有原生味道的移动应用;

Ionic是一个高级HTML5混合式移动应用开发框架,同时也是一个开源的前端框架;

Ionic注重的是视觉效果和用户体验,所以使用了AngularJS来构建很各种酷的效果;

Ionic是类似Bootstrap概念的WebApp框架,提供了Hybrid App的基础CSS,UI控件,工程架构和最佳实践。

Ionic的优势

  • 性能优异
  • 基于红的发紫AngularJs
  • 漂亮的UI
  • 强大的命令行(基于更热门的NodeJS)
  • 开发团队非常活跃,
  • 相关配套非常齐全:
  • 相对充足的学习资料,Learn Iconic,The Iconic book
  • ngcordova,将主流的Cordova API或者Cordova插件封装为AngularJS扩展,使用非常方便。
  • 开源免费的webfont icon库ionicons,基本满足你icon需求。
  • 甚至最近开发出的可视化开发工具Ionic Creator
  • 最后便是至关重要的,异常活跃的在线社区。

谈谈 Hybrid app

Ionic+Cordova的组合是一个跨平台的移动开发框架,属于HybirdApp开发模式。其中Ionic是一个前端框架,集成了AngularJs在里面,有很好很漂亮的UI控件。Cordova本身就是一个跨平台的移动开发框架,可以将应用打包成各个平台下的应用。他们之间的关系可以用下面的图展示:

从网下图,可以很直观的看出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来实现模块化开发,组织代码.

安装Cordova和Ionic

如果你想要开始Ionic开发,你需要先安装Node.js。

在Win系统中:
npm install -g cordova ionic
在Mac中,需要加上sudo:
sudo npm install -g cordova ionic
安装完后在cmd或者终端输入ionic:

这样就表示安装成功。

开始一个Ionic App

Ionic官网http://ionicframework.com为开发者提供了多个开发模板,如:

空白模板(Black app):
ionic start myApp blank
tabs模板 :
ionic start myApp tabs
sidemenu模板:
ionic start myApp sidemenu

开始创建一个工程:

ionic start myApp1 tabs

运行

cd myApp1
ionic cordova platform add ios
ionic cordova build ios
ionic cordova emulate ios
然后再输入下面这串命令行,继续刷屏:
sudo npm install -g ios-sim
然后继续输入:
ionic cordova emulate ios
就会弹出模拟器了。

我推荐大家使用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.ionicframework.com/docs/components/#header

参考

Ionic+Cordova开发环境搭建 http://blog.csdn.net/gameloft9/article/details/50923615
使用ionic框架开发移动hybrid应用 https://segmentfault.com/a/1190000002688632
ionic react-native和native开发移动app那个好 ? http://www.phonegap100.com/article-486-1.html
ionic工作室 http://www.ionic.wang
ionic china http://ionic-china.com/index.html

文章目录
  1. 1. 什么是Ionic
  2. 2. Ionic的优势
  3. 3. 谈谈 Hybrid app
  4. 4. 安装Cordova和Ionic
  5. 5. 开始一个Ionic App
  6. 6. 开始创建一个工程:
  7. 7. 运行
  8. 8. Ionic插件安装与卸载
  9. 9. 参考