Ionic模版的使用

时间:2022-05-18 11:46:55

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。浏览器预览的效果如下:
Ionic模版的使用

退出启动的应用程序:
在Git Bash中输入q ,就可以退出已经启动的应用程序。
Ionic模版的使用

其实,通过命令我们还可以使用其他的Ionic模版,比如:
1、 ionic start blankApp blank。创建包含标题栏的App
Ionic模版的使用
2、 ionic start sideApp sidemenu。创建包含侧边栏的App
应用程序主视图。 Ionic模版的使用
打开应用程序的侧边栏。 Ionic模版的使用

在GitHub上有很多模版的类型,查考链接:https://github.com/driftyco/ionic-cliIonic模版的使用

可以发现。Named template、Github Repo和Codepen是比较常用的类型。前面使用的tabs、sidemenu和blank属于Named template。 而且Named template还会随时间推移,逐渐增加。你可以根据这些模版的名字,把模版下载到本地。

下面为你介绍另外一种下载Ionic模版的方法。
打开链接:http://codepen.io/ionic/pens/public/
Ionic模版的使用
在网站中,可以看到很多Ionic模版,点击一个模版进入,效果图如下:
Ionic模版的使用

复制浏览器的链接,可以使用该链接把模版下载到本地。下载的命令如下:
ionic start navApp http://codepen.io/ionic/pen/QwamEW
下载到本地后,就可以在浏览器中查看应用程序的效果了。如下图:
Ionic模版的使用

了解如何下载Ionic模版后,那么这些模版在Android 和 IOS上显示的效果是什么的呢?下面我来看一下:
以defaultApp项目为例,使cd命令进入该项目的根目录,然后在使用命令:ionic serve –l
就可以查看应用程序在Android和IOS设备中的效果,如下:
Ionic模版的使用
可以看到,浏览器以一种不同的有趣的方式打开了App。展示了IOS和Android两种不同设备上的App的呈现视图。两者的不同之处可以很明显的看出:IOS的菜单在页面的底部,而Android的菜单位于页面的顶部。在真实的移动设备上,它们各自的App也会有这样不同的呈现。不同的页面和不同的模板App,浏览器呈现都可能会有不同,Ionic会为我们处理这些不同。以默认模版为例,你可以使用特殊的配置,可以两个平台的菜单位置保持一致。在后续的内容中会涉及到这个部分内容。好了,今天就写这么多。明天继续!详细内容可点击链接http://pan.baidu.com/s/1kTXZNuf进入云盘查看。