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模版，好比：

一、     ionic start blankApp blank。建立包含标题栏的App

 

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