Blog

Blog

PHODAL

HTML5打造原生应用——Ionic框架简介与Ionic Hello World

试了试用Ionic框架打造了两个应用,然后在Google Play上架了。

更有意思的是这是在一周的业余时间内完成的三个应用中的两个,接着让我们看看这个框架如何实现高效地开发。

Ionic 框架

Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”。该框架提供了很多基本的移动用户界面范例,例如像列表(lists)、标签页栏(tab bars)和触发开关(toggle switches)这样的简单条目。它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单。

官网地简介上说了下面的一些优点:

  • Performance obsessed
  • Angular & Ionic
  • Native focused
  • Beautifully designed
  • A powerful CLI
  • Fun to learn
  • Built by nerds (like you)

简单地来说就是:

  • 性能比用jQuery构建好
  • 基于Angluar JS
  • 更加原生化
  • 设计精美
  • 更大地CLI
  • 学习乐趣
  • 为极客而构建

Ionic Hello World

安装Ionic

1.安装Node.js

2.安装Cordova和Ionic

$ npm install -g cordova ionic

3.创建项目,官方给了三个不同类型的基础项目:

  • 空白应用
  • Tabs应用
  • 滑动菜单应用

对应的创建方式有:

1) 空白应用

$ ionic start myApp blank

2) Tabs应用

$ionic start myApp tabs

3)滑动菜单应用

 $ ionic start myApp sidemenu

4.运行

$ cd myApp
$ ionic platform add android
$ ionic run android

接着我们就可以看到一个应用就生成了。

关于我

Github: @phodal     微博:@phodal     知乎:@phodal    

微信公众号(Phodal)

围观我的Github Idea墙, 也许,你会遇到心仪的项目

QQ技术交流群: 321689806

新书《全栈应用开发:精益实践》

这不是一本深入前端、后台、运维、设计、分析等各个领域的书籍。本书以实践的方式,将这一系列的领域及理论知识结合到一起,来帮助读者构建全栈Web 开发的知识体系,并辅以精益及敏捷的思想,来一步步开发Web 应用:从创建一个UI 原型到编写出静态的前端页面;从静态的前端页面到带后台的应用,并部署应用;从Web 后台开发API 到开发移动Web 应用。在这个过程中,我们还将介绍一些相辅相成的步骤:使用构建系统来加速Web 应用的开发;为应用添加数据分析工具来改进产品;使用分析工具来改善应用的性能;通过自动化部署来加快上线流程;从而帮助读者开发出一个真正可用的全栈 Web 应用。同时,我们也将帮助读者把这些步骤应用到现有的系统上,改进现有系统的开发流程。

comment

Feeds

RSS / Atom

最近文章

关于作者

Phodal Huang

Developer, Consultant, Writer, Designer

ThoughtWorks 高级咨询师

工程师 / 咨询师 / 作家 / 设计学徒

开源深度爱好者

出版有《自己动手设计物联网》、《全栈应用开发:精益实践》

联系我: h@phodal.com

微信公众号: 与我沟通

标签