之前一直跟Linux驅動打交道，上層應用幾乎為零，業余時間也不是很多，所以博客也不會寫的非常詳細，大家有問題盡管評論哦, 我有空會及時回復!
摘要
上一篇文章主要介紹了ionic的開發環境配置， 以及如何創建運行一個app。這篇文章主要搭建wechat的外殼，介紹一個ionic項目的標准目錄結構，header標簽的使用，以及頁面之間的切換。先看完成的效果
強烈建議,做ionic之前把angularJS入門過一遍, 還有ui-router, 至少要了解個大概, 不然真做不下去
項目的目錄結構
當我們創建一個blank項目的時候，目錄結構是下面這個樣子：
├── bower.json
├── config.xml
├── gulpfile.js
├── hooks
├── ionic.project
├── package.json
├── plugins
├── README.md
├── scss
└── www
那我們的工作目錄，就主要集中在www目錄中，相信大家看到css，js，index.html都比較熟悉，這里不准備詳細介紹目錄結構，只說一下一個AngularJs項目的常用的目錄結構吧。
大部分情況下，我們會把一個應用的控制器，指令，路由，服務分別放在獨立文件中，然后在app.js中注入.
所以創建一個blank項目后，先在www/js目錄下創建四個文件controllers.js,directives.js,routes.js,services.js，並在www/js/app.js中引用進來
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/services.js"></script>
<script src="js/directives.js"></script>
最后我們還需要在www下創建一個目錄templates,用來存放各個模板，模板簡單點說，就是把我們看到的界面拆開，分成一小個一小個的view，方便我們管理和復用
所以最后我們項目的目錄結構看起來應該是這樣的：
├── css
│ └── style.css
├── img
│ └── ionic.png
├── index.html
├── js
│ ├── app.js
│ ├── controllers.js
│ ├── directives.js
│ ├── routes.js
│ └── services.js
├── lib
│ └── ionic
└── templates
頁面頭部
其實創建ionic的應用，界面部分有兩種模式，可以使用純CSS創建，也可以使用AnjularJS指令模式創建.
當然還是推薦大家使用指令模式，AngularJS的優點和學習路線可以參考這篇文章
ionic中創建一個頭部非常簡單
<ion-header-bar align-title="center" class="bar-dark">
<h1 class="title">Title!</h1>
</ion-header-bar>
AngularJS一個神奇的地方就是，可以在html中使用自己定義的標簽，這里的ion-header-bar就是一個官方定義好的指令，表示這是一個header，同時指令也可以有自己的屬性，bar-dark表示一個黑色的header,另外官方還有其它八種顏色，可以點這里
可以看到這已經跟微信的header很像了，還需要兩個圖標，我們可以放兩個button圖標
<ion-header-bar align-title="left" class="bar-dark">
<div class="h1 title">微信(16)</div>
<div class="buttons">
<button class="button no-animation button-icon icon ion-android-search">
</button>
<button class="button no-animation button-icon icon ion-android-add">
</button>
</div>
</ion-header-bar>
這里的ion-android-search和ion-android-add其實是兩個icon font,官方還有更多的圖標，點這里
到這里header就有模有樣了，看到這，相信大家已經躍躍欲試了，其它組件的使用大同小異，把官方docs過一遍，很快就會了
不過我得吐槽一句，官方的文檔寫的太粗糙了，像這里的<div class="button">官方就沒有介紹，大家可以去掉看看，界面變成啥樣了- -!!
模板和路由
首先我們先在templates目錄下創建三個文件tabs.html, tab-message.html, tab-frends.html
//tabs.html
<ion-tabs class="tabs-icon-top tabs-color-active-balanced">
<ion-tab title="微信" icon-on="ion-ios-chatbubble" icon-off="ion-ios-chatbubble-outline" ui-sref="tab.message">
<ion-nav-view animation="slide-left-right" name="tab-message"></ion-nav-view>
</ion-tab>
<ion-tab title="通訊錄" icon-on="ion-ios-people" icon-off="ion-ios-people-outline" ui-sref="tab.friends">
<ion-nav-view animation="slide-left-right" name="tab-friends"></ion-nav-view>
</ion-tab>
<ion-tab title="發現" icon-on="ion-ios-paperplane" icon-off="ion-ios-paperplane-outline" ui-sref="tab.find">
<ion-nav-view animation="slide-left-right" name="tab-find"></ion-nav-view>
</ion-tab>
<ion-tab title="我" icon-off="ion-ios-person-outline" icon-on="ion-ios-person" href="#/tab/setting">
<ion-nav-view animation="slide-left-right" name="tab-setting"></ion-nav-view>
</ion-tab>
</ion-tabs>
//tab-message.html
<ion-view>
<ion-content>
<h1>消息頁面</h1>
</ion-content>
</ion-view>
//tab-friends.html
<ion-view>
<ion-content>
<h1>通訊錄頁面</h1>
</ion-content>
</ion-view>
這三個模板一看就知道，一個是底部導航tabs，一個是消息界面，一個是通訊錄界面，那他們應該如何放到界面中？如何實現跳轉？
我覺得有必要先理一下他們三者的關系，tabs模板應該是直接放置在index.html中的，消息界面和通訊錄應該放置在tabs模板中的。
所以剩下的就是通過某種方式，按他們的關系，把他們安置好，並能實現頁面切換。主角來了ui-router! ui-router是一個AngularJS的路由框架，它通過狀態機制來組織你項目的各個部分，比自帶$route service好用多了，更多介紹請點這里
下面來看看,ionic中ui-router是如何使用的
首先模板是通過ion-nav-view來嵌入到界面中的, 也就是說有這個標簽的地方,ui-router就會根據狀態把對應的模板放置到這個標簽中. 可以看到index.html和tabs.html中都有這個標簽. 到時候對應的模板就要放置到這些位置.
模板位置安排好了, 再來看看如何放置和跳轉的. 先在js/routes.js文件中添加這些代碼:
//這里聲明了一個模塊, 名字叫wechat.routes, 等會要在app.js中注入這個模塊, 才會生效
angular.module('wechat.routes', [])
.config(function($stateProvider, $urlRouterProvider) {
//默認狀態是tab.message
$urlRouterProvider.otherwise("/tab/message");
$stateProvider
//如果是tab狀態被激活, 加載tabs.html模板, 注意這里的abstract: true, 表示tab只有在子狀態顯示的時候, 它才顯示, 它本身是無法主動被激活的
.state("tab", {
url: "/tab",
abstract: true,
templateUrl: "templates/tabs.html",
})
//tab.message狀態被激活,會顯示tab-message.html模板, tab.message狀態是在tabs.html中的ui-sref中設置的. 同時注意views中的tab-message名字, 這個也需要跟tabs.html中的ion-nav-view中的name一致哦
.state('tab.message', {
url: '/message',
views: {
'tab-message': {
templateUrl: 'templates/tab-message.html',
}
}
})
.state('tab.friends', {
url: '/friends',
views: {
'tab-friends': {
templateUrl: 'templates/tab-friends.html',
}
}
})
還有tab-friends.html和tab-setting.html大家自己加一下. 最后別忘了在app.js中注入這個模塊:
angular.module('wechat', ['ionic', 'wechat.routes'])
//這個地方的config不能少哦, 不然安卓平台的tabs會跑到頂部的
.config(['$ionicConfigProvider', function($ionicConfigProvider) {
$ionicConfigProvider.tabs.position('bottom'); // other values: top
}])
ok, 趕緊運行ionic serve在電腦上欣賞一下吧~
最后
其實這個功能看起來很簡單, 但還有很多細節我沒說, 比如如何添加滑動切換? 比如安裝到手機, tabs跟瀏覽器上效果不一樣, 有個黑邊...大家可以嘗試改改, 有問題, 盡管評論, 我有時間會及時回答的~