4.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会为我们处理这些不同。以默认模版为例，你可以使用特殊的配置，可以两个平台的菜单位置保持一致。在后续的内容中会涉及到这个部分内容。好了，今天就写这么多。明天继续！详细内容可点击链接进入云盘查看。