Ionic模版的使用
Hybird HTML5 App(移动应用开发)之4.Ionic模版的使用
在Windows系统下使Ionic模版,可以使用之前安装的Git工具中的Git Bash。在Mac系统中可以直接使用系统自带的命令工具。在Windows系统中安装Git后,从开始菜单中找到Git文件下的Git Bash工具并打开。下面通过命令来创建App。
cd e:/work/Ionic
通过cd命令进入自定义的项目位置
ionic start defaultApp tabs
通过ionic命令生成一个以tabs为模版的App,其中defaultApp是App的项目名,tabs是Ionic的默认模板名,即使不输入tabs,创建的App仍然是基于tabs的项目。
cd e:/work/Ionic/defaultApp
ionic serve
进入App项目的根目录,输入ionic serve命令来运行应用程序,浏览器会自动打开并预览tabs模版的App。浏览器预览的效果如下:
退出启动的应用程序:
在Git Bash中输入q ,就可以退出已经启动的应用程序。
其实,通过命令我们还可以使用其他的Ionic模版,比如:
1、 ionic start blankApp blank。创建包含标题栏的App
2、 ionic start sideApp sidemenu。创建包含侧边栏的App
应用程序主视图。
打开应用程序的侧边栏。
在GitHub上有很多模版的类型,查考链接:https://github.com/driftyco/ionic-cli
可以发现。Named template、Github Repo和Codepen是比较常用的类型。前面使用的tabs、sidemenu和blank属于Named template。 而且Named template还会随时间推移,逐渐增加。你可以根据这些模版的名字,把模版下载到本地。
下面为你介绍另外一种下载Ionic模版的方法。
打开链接:http://codepen.io/ionic/pens/public/,
在网站中,可以看到很多Ionic模版,点击一个模版进入,效果图如下:
复制浏览器的链接,可以使用该链接把模版下载到本地。下载的命令如下:
ionic start navApp http://codepen.io/ionic/pen/QwamEW
下载到本地后,就可以在浏览器中查看应用程序的效果了。如下图:
了解如何下载Ionic模版后,那么这些模版在Android 和 IOS上显示的效果是什么的呢?下面我来看一下:
以defaultApp项目为例,使cd命令进入该项目的根目录,然后在使用命令:ionic serve –l
就可以查看应用程序在Android和IOS设备中的效果,如下:
可以看到,浏览器以一种不同的有趣的方式打开了App。展示了IOS和Android两种不同设备上的App的呈现视图。两者的不同之处可以很明显的看出:IOS的菜单在页面的底部,而Android的菜单位于页面的顶部。在真实的移动设备上,它们各自的App也会有这样不同的呈现。不同的页面和不同的模板App,浏览器呈现都可能会有不同,Ionic会为我们处理这些不同。以默认模版为例,你可以使用特殊的配置,可以两个平台的菜单位置保持一致。在后续的内容中会涉及到这个部分内容。好了,今天就写这么多。明天继续!详细内容可点击链接http://pan.baidu.com/s/1kTXZNuf进入云盘查看。
Ionic模版的使用的更多相关文章
- ionic模版引擎及循环
首先来个官方文档:http://ionicframework.com/docs/api/directive/ionList/ 1)ionic模型引擎的定界符是双大括号 {{}} 2)要使用什么模版变量 ...
- 用vs2015 编译 web app ionic
1.要下载https://git-for-windows.github.io/ 2.下载ionic模版
- Ionic 常见问题及解决方案
前言 Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案. 一些常识与技巧 list 有延迟,可以在ion-cont ...
- ionic本质
ionic本质一开发工具,ionic项目目录里在大堆东西,一堆插件(plugins),还有一堆npm包(node_modules),其实都是骗人的-( ̄▽ ̄-)~ 什么nodejs,npm只是为了解决 ...
- ionic笔记
ionic教程网站:http://www.ionic.wang/ 1.ui-router路由简介 https://blog.csdn.net/mcpang/article/details/551015 ...
- ZH奶酪:Ionic中(弹出式窗口)的$ionicModal使用方法
Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用Ja ...
- Ionic 2 + 手动搭建开发环境教程 【转】
ionic简介 为什么选用ionic: 彻底开源且免费 性能优异 基于红的发紫的AngularJs 漂亮的UI 强大的命令行(基于更热门的nodejs) 开发团队非常活跃. ngCordova,将主流 ...
- ionic框架使用步骤
nodejs下载:https://npm.taobao.org/mirrors/node一.全局安装ionic: npm install -g cordova ionic 如果安装失败: npm in ...
- ionic使用的一些技巧
使用ionic总结: 1.全局禁用缓存的方法是: $ionicConfigProvider.views.maxCache(0); 2. 在不同的用户输入场景下,需要显示不同的键盘模式以方便用户输入, ...
随机推荐
- Android_如何隐藏应用程序的图标
接下来我要说的这种方法可以隐藏图标,同是也可以正常启动运行. 在manifest的入口activity里面intent-filter中设置<data></data>元素. 比如 ...
- Android Studio常用设置
Android Studio显示行号 File-->Setting(Ctrl+Alt+S),选择Editor-->General-->Appearance,右侧勾选Show lin ...
- JavaScript -- 数组Array
-----021-ActiveXObject.html----- <!DOCTYPE html> <html> <head> <meta http-equiv ...
- Linux系列:Ubuntu/fedora实用小技巧—禁止自动锁屏、设置免密码自动登录、免密码执行sudo操作
首先声明:该文虽以Ubuntu 13.04为例,同样适用于Fedora 17(已测试),但在较低版本的Ubuntu下可能有所差异,具体看后面的注意事项. 技巧目录: 解决Ubuntu下每隔几分钟自动锁 ...
- 23-hadoop-hive的DDL和DML操作
跟mysql类似, hive也有 DDL, 和 DML操作 数据类型: https://cwiki.apache.org/confluence/display/Hive/LanguageManual+ ...
- IC 设计中DFT的Boundary Scan功能
在很大规模的IC设计中,往往会有一些各种各样的bug出现,不论是在前期design的过程,还是在post silicon流片回来chip的flaw,都会导致chip的功能的失败,时钟频率无法达到期望频 ...
- Docker基础教程(常用命令篇)
1.查看docker信息 # 查看docker版本 $docker version # 显示docker系统的信息 $docker info 2.启动容器 # 交互式 $docker run -it ...
- 【LeetCode题解】25_k个一组翻转链表(Reverse-Nodes-in-k-Group)
目录 描述 解法一:迭代 思路 Java 实现 Python 实现 复杂度分析 解法二:递归(不满足空间复杂度) 思路 Java 实现 Python 实现 复杂度分析 更多 LeetCode 题解笔记 ...
- vue-cli + element-ui + webpack 新建项目
1.进入项目目录 2.全局安装vue-cli 输入命令:npm install vue-cli -g 若报错:ENOENT: no such file or directory, access.... ...
- (微信小程序)一 : 初识微信小程序
首先看过angularjs的同学们在看微信小程序的创始文件应该不算很陌生吧. 需要看的 先是文件目录 看完这个目录..得知 ( 一 ) pages 他存放于多个页面 如 index ,log ...