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
接着我们就可以看到一个应用就生成了。
HTML5打造原生应用——Ionic框架简介与Ionic Hello World的更多相关文章
- HTML5游戏开发引擎Pixi.js完全入门手册(一)框架简介及框架结构分析,作者思路剖析
前言: 最近无聊在淘宝弄了个小店,打算做一个兼职.遇到一个客户,要我帮忙拷贝一个html5游戏.. 我这人有一个习惯,拿到自己没见过的东西.都会去研究一番.去网上查了下发现,资料都是英文版.感觉极度不 ...
- Angularjs和Ionic框架搭建webApp
本文原创版权归 简书作者 噜啦啦噜啦啦噜啦噜啦噜 所有,转载请联系作者获得授权,并于文章开头标注原创作者及出处,以示尊重! 文/噜啦啦噜啦啦噜啦噜啦噜(简书作者)原文链接:http://www.jia ...
- 玩玩小程序:使用 WebApi 交互打造原生的微信小程序 - 图灵小书架
使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...
- ionic框架
ionic 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaScript MVVM 框架和 An ...
- MVC系列——MVC源码学习:打造自己的MVC框架(四:了解神奇的视图引擎)
前言:通过之前的三篇介绍,我们基本上完成了从请求发出到路由匹配.再到控制器的激活,再到Action的执行这些个过程.今天还是趁热打铁,将我们的View也来完善下,也让整个系列相对完整,博主不希望烂尾. ...
- Yaf零基础学习总结1-Yaf框架简介
从今天开始,给大家讲解下yaf框架,讲解之前肯定要了解下yaf是个什么东西,当然,从标题我们已经知道yaf是个PHP框架了,也许大家对于PHP框架并不陌生,一般PHP程序员用过的框架至少有一两个吧,国 ...
- [重磅] 让HTML5达到原生的体验 系列之中的一个 避免切页白屏
非常多人都想.甚至曾使用HTML5开发跨平台App.而且想达到原生App的体验. 最后的结果都是无奈的放弃.HTML5貌似美好,但坑太多.想做到原生App的体验差点儿不可为. 也曾有过著名的faceb ...
- 轻量级ORM框架 QX_Frame.Bantina(一、框架简介)
轻量级ORM框架QX_Frame.Bantina系列讲解(开源) 一.框架简介 http://www.cnblogs.com/qixiaoyizhan/p/7417467.html 二.框架使用方式介 ...
- APP自动化框架LazyAndroid使用手册(1)--框架简介
作者:cryanimal QQ:164166060 APP自动化简介 APP自动化,即通过自动化的方式,对APP施行一系列的仿按键输入.触摸屏输入.手势输入等操作,以达到对APP的功能进行自动化测试 ...
随机推荐
- WPS:多组件模式与整合模式的调节
首页 设置中心 切换窗口管理模式 多组件和整合模式
- 虚拟机服务启动失败报错npm ERR! code ELIFECYCLE
可能是由于node_modules模块中缺失或者某些东西冲突引起的,我们可以使用如下的方法解决这个: rm -rf node_modules 删除,不询问 rm package-lock.json 删 ...
- 国产化之Arm64 CPU+银河麒麟系统安装.NetCore
背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟,银河麒麟就是一个Linux发行版,数据库使用达梦V8,这个数据库很多概念和Oracle相似,CPU平台的范围:龙芯.飞腾.鲲鹏等. ...
- 基于NopCommerce框架开发的微信小程序UrShop
Urshop小程序商城 介绍 UrShop小程序商城 2.0发布啦,发布地址https://gitee.com/urselect/urshop UrShop 根据NopCommerce框架开发的,基于 ...
- linux作业--第十二周
1.主从复制及主主复制的实现 2.xtrabackup实现全量+增量+binlog恢复库 3.MyCAT实现MySQL读写分离 4.ansible常用模块介绍
- 5. 堪比JMeter的.Net压测工具 - Crank 实战篇 - 接口以及场景压测
目录 堪比JMeter的.Net压测工具 - Crank 入门篇 堪比JMeter的.Net压测工具 - Crank 进阶篇 - 认识yml 堪比JMeter的.Net压测工具 - Crank 进阶篇 ...
- 手写 Vue2 系列 之 编译器
前言 接下来就要正式进入手写 Vue2 系列了.这里不会从零开始,会基于 lyn-vue 直接进行升级,所以如果你没有阅读过 手写 Vue 系列 之 Vue1.x,请先从这篇文章开始,按照顺序进行学习 ...
- CF1548B题解
在日报上面看到的,发现 NOIP 模拟赛考过这个 trick( 首先我们把题目要求的条件这么写: \[a_i=x_i \times m+k \] 那么我们要找到满足条件的数组,差分后的数组一定都是 \ ...
- Go值类型和引用类型+作用域+空白标识符+常量
值类型和引用类型 所有像 int.float.bool 和 string 这些基本类型都属于值类型,使用这些类型的变量直接指向存在内存中的值: 当使用等号 = 将一个变量的值赋值给另一个变量时,如:j ...
- python 之 matplotlib 练习
import numpy as npimport matplotlib.pyplot as plt x = np.linspace(0,10,1000)# 自变量y = np.sin(x) + 1 # ...