试了试用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

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

HTML5打造原生应用——Ionic框架简介与Ionic Hello World的更多相关文章

  1. HTML5游戏开发引擎Pixi.js完全入门手册(一)框架简介及框架结构分析,作者思路剖析

    前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...

  2. Angularjs和Ionic框架搭建webApp

    本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jia ...

  3. 玩玩小程序:使用 WebApi 交互打造原生的微信小程序 - 图灵小书架

    使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...

  4. ionic框架

    ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 An ...

  5. MVC系列——MVC源码学习:打造自己的MVC框架(四:了解神奇的视图引擎)

    前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...

  6. Yaf零基础学习总结1-Yaf框架简介

    从今天开始,给大家讲解下yaf框架,讲解之前肯定要了解下yaf是个什么东西,当然,从标题我们已经知道yaf是个PHP框架了,也许大家对于PHP框架并不陌生,一般PHP程序员用过的框架至少有一两个吧,国 ...

  7. [重磅] 让HTML5达到原生的体验 系列之中的一个 避免切页白屏

    非常多人都想.甚至曾使用HTML5开发跨平台App.而且想达到原生App的体验. 最后的结果都是无奈的放弃.HTML5貌似美好,但坑太多.想做到原生App的体验差点儿不可为. 也曾有过著名的faceb ...

  8. 轻量级ORM框架 QX_Frame.Bantina(一、框架简介)

    轻量级ORM框架QX_Frame.Bantina系列讲解(开源) 一.框架简介 http://www.cnblogs.com/qixiaoyizhan/p/7417467.html 二.框架使用方式介 ...

  9. APP自动化框架LazyAndroid使用手册(1)--框架简介

    作者:cryanimal  QQ:164166060 APP自动化简介 APP自动化,即通过自动化的方式,对APP施行一系列的仿按键输入.触摸屏输入.手势输入等操作,以达到对APP的功能进行自动化测试 ...

随机推荐

  1. pyinstaller打包exe文件,运行时一闪而过

    pyinstaller打包exe文件出现命令窗口一闪而过 原因:exe运行过程中出错了,解决这些错误就可以了 解决方法: 通过 cd path >> xxx.exe 在命令行中运行exe文 ...

  2. C# Tab键TabIndex使用问题(顺序,不起作用,跳过某个元素等问题)

    C#.net语言,winform程序.一个画面中有多个控件,但是在添加的时候顺序是错的,所以现在想改Tab顺序,需要用到TabIndex ,如何设置控件TabIndex 1.选中窗口控件-右键-属性, ...

  3. Tableau绘图一热图、日历图、人口金字塔、标靶图、凹凸图、帕累托图

    Tableau绘图一热图.日历图.人口金字塔.标靶图.凹凸图.帕累托图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一.热图 例子:示例超市 可以通过更改颜色来改 ...

  4. Lesson A puma at large

    新概念三 Lesson 1 A puma at large 词汇: 1. spot 易混淆: recognize v. [认出], identify v. [识别sb/sth的身份] v. 看出,发现 ...

  5. Navicat for MySQL 安装软件和破解补丁

    软件 链接:https://pan.baidu.com/s/1e8gpbyWM7ISrWpMwsw-MNg 提取码:fag3 安装好 Navicat  将破解文件放到安装目录下,然后双节运行 是的,你 ...

  6. 2021-08-02(console、comfrim)

    1.console对象 1.输出信息: console.info()别名 console.log(); 2.复合类型表格展示 console.table(obj) || console.table(A ...

  7. 物理机迁移至vmware

    使用用vmware vcenter converter standalone将物理机迁移到虚拟机. 6.2版本下载地址如下: https://www.filehorse.com/download-vm ...

  8. Swagger整合Jwt授权配置

    Swagger整合Jwt授权配置 欢迎关注博主公众号「Java大师」, 专注于分享Java领域干货文章http://www.javaman.cn/sb2/swagger-jwt 一.Swagger入门 ...

  9. pycharm远程调试、开发(详细操作)

    如果仅是远程开发,新建 ssh Interpreter 并 apply tools -> deployment -> browser remote host 即可 1.服务器侧准备 准备调 ...

  10. ctf之Flask_fileUpload

    启动环境,显示如图: 直接f12产看源码信息: 大致意思是:使用python编写文件然后以图片格式上传系统会以ipython格式解析,就可获取flag. 编写python代码: import os o ...