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會爲咱們處理這些不一樣。以默認模版爲例，你可使用特殊的配置，能夠兩個平臺的菜單位置保持一致。在後續的內容中會涉及到這個部份內容。好了，今天就寫這麼多。明天繼續！詳細內容可點擊連接http://pan.baidu.com/s/1kTXZNuf進入雲盤查看。

來源： <http://ionichina.com/topic/568f520458c6c76d17fde144>

 

來自爲知筆記(Wiz)