簡(jiǎn)介
ionic是一個(gè)強(qiáng)大的混合式/hybrid HTML5移動(dòng)開(kāi)發(fā)框架，特點(diǎn)是使用標(biāo)準(zhǔn)的HTML咙崎、CSS和JavaScript优幸，開(kāi)發(fā)跨平臺(tái)的應(yīng)用。
官網(wǎng)：http://ionicframework.com/ 打開(kāi)稍慢褪猛，但是沒(méi)有被墻劈伴。
ionic特點(diǎn)：漂亮的界面 追求性能 專(zhuān)注原生 免費(fèi)開(kāi)源
既然是開(kāi)源的，就不得不提一下它的源代碼地址：
已經(jīng)有2萬(wàn)個(gè)star握爷。
環(huán)境搭建
-
下載 Node.js
上面的鏈接是Node的官網(wǎng)跛璧，當(dāng)然也可以去中文網(wǎng)站下載，選擇對(duì)應(yīng)的平臺(tái)和版本進(jìn)行下載新啼。
ps：作者用的是mac電腦追城，也推薦用mac電腦進(jìn)行以后的開(kāi)發(fā)操作，各種命令用起來(lái)比較方便燥撞。
-
安裝Node.js
mac版本的Node.js下載下來(lái)的直接就是一個(gè)dmg的安裝包座柱，一直點(diǎn)下一步就能順利安裝成功迷帜。
安裝完成后，打開(kāi)終端輸入node -v ,出現(xiàn)版本號(hào)即為安裝成功色洞，如下圖戏锹。
查看node版本號(hào) -
安裝cordova和ionic
node安裝成功后，打開(kāi)終端火诸，執(zhí)行 npm install -g cordova ionic 命令锦针，如果出現(xiàn)無(wú)法寫(xiě)入的權(quán)限，則執(zhí)行sudo npm install -g cordova ionic 輸入mac登錄密碼以管理員身份進(jìn)行下載安裝置蜀。該下載過(guò)程可能比較緩慢奈搜，花費(fèi)較長(zhǎng)的時(shí)間。安裝完成后盯荤，分別執(zhí)行ionic -v 和cordova -v出現(xiàn)相應(yīng)的版本號(hào)馋吗，即為安裝成功。
-
安裝Android SDK
下載安裝Android SDK這里不再多說(shuō)
-
配置相關(guān)環(huán)境變量
筆者開(kāi)始是在.bash_profile文件中配置ANDROID_HOME 秋秤，但是在做相關(guān)操作的時(shí)候卻好像沒(méi)有按照這個(gè)配置的路徑去找sdk宏粤，報(bào)找不到相應(yīng)sdk的錯(cuò)誤，所以參考了facebook上React Native的配置灼卢，又在.bashrc中進(jìn)行了相同的配置商架。 如果找不到這2個(gè)文件，可以通過(guò)vi命令創(chuàng)建文件芥玉，然后將相應(yīng)的配置寫(xiě)入保存蛇摸，然后執(zhí)行
source .bash_profile和source .bashrc 即可。
創(chuàng)建ionic項(xiàng)目
相關(guān)的配置完成后灿巧，打開(kāi)終端赶袄，在相應(yīng)的目錄下執(zhí)行
ionic start myApp tabs
即可創(chuàng)建一個(gè)帶tab頁(yè)的項(xiàng)目，當(dāng)然也可以創(chuàng)建其他風(fēng)格的抠藕，如下
ionic start myApp blank 創(chuàng)建一個(gè)空白的項(xiàng)目
ionic start myApp sidemenu 創(chuàng)建一個(gè)帶側(cè)滑欄的項(xiàng)目
如下圖即為完整的項(xiàng)目目錄：
編譯項(xiàng)目
進(jìn)入項(xiàng)目目錄饿肺，終端下執(zhí)行
ionic platform add android
然后執(zhí)行
ionic build android
即可進(jìn)行編譯，android采用的是gradle進(jìn)行編譯盾似，第一次可能要去下載gradle敬辣，過(guò)程比較慢，花費(fèi)較長(zhǎng)時(shí)間零院。
等待溉跃，等待，出現(xiàn) BUILD SUCCESSFUL 即為編譯成功告抄。
調(diào)試運(yùn)行
還在當(dāng)前項(xiàng)目目錄下撰茎，執(zhí)行如下命令
ionic emulate android
即可在模擬器上運(yùn)行，如果沒(méi)有模擬器可能會(huì)報(bào)錯(cuò)打洼。
這里重點(diǎn)說(shuō)明以下如何安裝到真機(jī)上龄糊。
需要執(zhí)行如下命令
ionic run --target=56112d22 android
說(shuō)明：等號(hào)后面的是手機(jī)的標(biāo)識(shí)碼逆粹，可以通過(guò)adb devices獲取到，當(dāng)然前提是手機(jī)通過(guò)usb數(shù)據(jù)線(xiàn)連接到電腦上炫惩。
運(yùn)行效果圖如下：
默認(rèn)的情況下僻弹，tab是在上面的，上圖是筆者改過(guò)之后的效果他嚷，如何將tab欄從頂部移到底部呢蹋绽？
參考鏈接：http://bbs.phonegap100.com/thread-1495-1-1.html
上面的鏈接中可能說(shuō)的不是很清楚，筆者是進(jìn)行如下操作的爸舒，找到
myApp/www/js/app.js 文件（ps：myApp是項(xiàng)目名稱(chēng)）
打開(kāi)app.js蟋字，找到第24行稿蹲，添加如下代碼
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('bottom');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
})
貼上改完之后完整的app.js代碼
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.services' is found in services.js
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
})
.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {
$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('bottom');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back');
$ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
})
.config(function ($stateProvider, $urlRouterProvider) {
// Ionic uses AngularUI Router which uses the concept of states
// Learn more here: https://github.com/angular-ui/ui-router
// Set up the various states which the app can be in.
// Each state's controller can be found in controllers.js
$stateProvider
// setup an abstract state for the tabs directive
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'templates/tabs.html'
})
// Each tab has its own nav history stack:
.state('tab.dash', {
url: '/dash',
views: {
'tab-dash': {
templateUrl: 'templates/tab-dash.html',
controller: 'DashCtrl'
}
}
})
.state('tab.chats', {
url: '/chats',
views: {
'tab-chats': {
templateUrl: 'templates/tab-chats.html',
controller: 'ChatsCtrl'
}
}
})
.state('tab.chat-detail', {
url: '/chats/:chatId',
views: {
'tab-chats': {
templateUrl: 'templates/chat-detail.html',
controller: 'ChatDetailCtrl'
}
}
})
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/tab/dash');
});
改完之后扭勉，再次運(yùn)行，tab欄就移到了底部苛聘。
至此涂炎，整個(gè)ionic項(xiàng)目從創(chuàng)建到運(yùn)行就都完成了。
WebStorm開(kāi)發(fā)
用webstorm打開(kāi)整個(gè)項(xiàng)目设哗，目錄結(jié)構(gòu)如下：
添加運(yùn)行的module唱捣，如下圖配置，即可直接在webstorm中運(yùn)行ionic項(xiàng)目网梢，部署到真機(jī)上
就醬Ｕ痃浴！战虏！
參考鏈接:
