不忘初心

永遠(yuǎn)懷揣一顆學(xué)習(xí)之心，小白終會(huì)變大神

最近體驗(yàn)了一下時(shí)下很流行的前端開發(fā)框架ionic，以假亂真的頁面和流暢的運(yùn)行速度直逼原生應(yīng)用，親不自禁的愛上了它，下面來簡(jiǎn)單介紹下ionic。

Ionic是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。

通過 SASS 構(gòu)建應(yīng)用程序，Ionic提供了很多 UI 組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。 ionic使用 JavaScript MVVM 框架和 AngularJS 來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定，使用ionic成為 Web 和移動(dòng)開發(fā)者的共同選擇。Ionic是一個(gè)專注于用WEB開發(fā)技術(shù)，基于HTML5創(chuàng)建類似于手機(jī)平臺(tái)原生應(yīng)用的一個(gè)開發(fā)框架。Ionic框架的目的是從web的角度開發(fā)手機(jī)應(yīng)用，基于cordova（原PhoneGap）的編譯平臺(tái)，可以實(shí)現(xiàn)編譯成各個(gè)平臺(tái)的應(yīng)用程序。

---------------------我是一條華麗的分割線---------------------

本例是在win10系統(tǒng)下搭建的一個(gè)android應(yīng)用實(shí)例，待拿下macbook pro再更新ionic的ios實(shí)例。

1.首先，你需要安裝node.js，因?yàn)?ionic CLI 是基于 Node.js 開發(fā)的，需要 Node.js runtime 才能跑起來，你直接下載后沒用（前端沒有個(gè)node.js怎么出來混）

登陸Node.js官網(wǎng)，下載適合你電腦的版本，有時(shí)候會(huì)比較慢，貢獻(xiàn)一個(gè)我已經(jīng)下載好的，4.4.4版本的百度云鏈接，提取碼：k4zu，拿走不謝。下載后正常安裝即可，我第一次安裝node.js時(shí)，沒有自動(dòng)添加到環(huán)境變量，后來重新安裝了一次才成功，即使沒有自動(dòng)添加拿也都不是事兒，手動(dòng)添加即可，自行百度！

node -v

2.安裝完node.js后，你便可以使用其集成的包管理工具npm（node package manager），安裝ionic和cordova。

$ npm install -g cordova ionic

打開命令窗口，進(jìn)入任何一個(gè)目錄，執(zhí)行上面的命令，需要注意的是：-g是在全局下添加cordova和ionic，g是global全局的意思，會(huì)保存到“c：\用戶\AppData\Roaming\npm\node_modules目錄下，AppData為隱藏文件，需要顯示隱藏文件才可以看到；如果你想自定義路徑安裝，在命令窗口進(jìn)入你自定義的路徑，去掉-g再執(zhí)行命令就可以了。”下載安裝比較慢，請(qǐng)耐心等待。（可翻墻或使用淘寶鏡像）

ionic

ionic和cordova文件

3.準(zhǔn)備工作做好了以后，就該新建一個(gè)ionic_app了，勝利成果就在眼前了，保持清醒和淡定，go on~~~

可以使用ionic官方提供的幾個(gè)app實(shí)例，有空白，帶有標(biāo)簽和滑動(dòng)菜單三個(gè)可選，我選擇的是帶有標(biāo)簽的那個(gè)，打開命令窗口，進(jìn)入你計(jì)劃存放的文件目錄，執(zhí)行命令ionic start myApp tabs，ionic會(huì)從github上下載文件到本地。下載完成后，目錄機(jī)構(gòu)如下圖，app的源代碼存在于www文件中，包括樣式和js，可手動(dòng)修改嘗試。

官方實(shí)例

代碼文件

• hooks //google之后這個(gè)目錄應(yīng)該是在編譯cordova時(shí)自定義的腳本命令，方便整合到我們的編譯系統(tǒng)和版本控制系統(tǒng)中
• plugins //cordova插件的目錄，插件的安裝下一節(jié)詳述
• scss //scss文件，發(fā)布時(shí)編譯這個(gè)目錄下的文件輸出到www的css目錄中
• www //我們的開發(fā)目錄，頁面、樣式、腳本和圖片都放在這個(gè)目錄下
• --css
• --img
• --js
• --lib
• --index.html
• bower.json //bower配置文件
• config.xml //Ionic的配置文件 ?可以配置app的id，名稱、描述起始頁和一起其他配置
• gulpfile.js //gulp構(gòu)建工具的執(zhí)行文件，在這個(gè)文件中創(chuàng)建任務(wù)實(shí)現(xiàn)編譯scss，css、js優(yōu)化等
• ionic.project //Ionic的項(xiàng)目文件可以配置Ionic命令中l(wèi)ivereload的監(jiān)控文件
• package.json //npm配置文件

4.Last But Not Least，運(yùn)行或者調(diào)試app，有瀏覽器，安卓模擬器和真機(jī)三種方式可供我們選擇。

（1）直接在瀏覽器運(yùn)行ionic_app：這是最快也是最方便的運(yùn)行方式，打開命令窗口，進(jìn)入www坐在目錄，執(zhí)行ionic serve，首次執(zhí)行，會(huì)讓你選擇服務(wù)器地址，一般選擇localhost，此時(shí)你的app就會(huì)顯示在瀏覽器中，按f12，打開手機(jī)模式，就可以運(yùn)行你的app了，有一點(diǎn)：瀏覽器是熱部署的方式，當(dāng)你修改完代碼，點(diǎn)擊保存后，瀏覽器就會(huì)重新啟動(dòng)服務(wù)，獲取最新的代碼，你的修改立刻就會(huì)展現(xiàn)出來。

瀏覽器運(yùn)行效果

進(jìn)入www所在目錄，執(zhí)行以下命令：

ionic platform add android （添加android平臺(tái)） ionic build android （生成android的apk文件） ionic emulate android （在模擬器或者真機(jī)上運(yùn)行）

生成apk文件和運(yùn)行以后，這兩步可以合并成ionic run android一個(gè)命令，當(dāng)修改程序代碼后，執(zhí)行這一個(gè)命令查看即可。

Genymotion模擬器

（3）使用手機(jī)運(yùn)行ionic_app：在使用模擬器運(yùn)行ionic_app步驟中執(zhí)行完那幾行創(chuàng)建運(yùn)行代碼后，使用數(shù)據(jù)線連接電腦，打開USB調(diào)試模式，修改連接方式為“媒體設(shè)備（MTP）”模式，測(cè)試手機(jī)為魅族

執(zhí)行ionic run android命令，如果報(bào)錯(cuò)，說明手機(jī)連接沒有成功，可多次拔插進(jìn)行嘗試

失敗報(bào)錯(cuò)

安裝提示和安裝成功

真機(jī)運(yùn)行

但是運(yùn)行在Android真機(jī)上，會(huì)出現(xiàn)標(biāo)簽欄置于頂部的問題。將下面的代碼復(fù)制粘貼到app.js的config配置下，標(biāo)簽欄就會(huì)乖乖的出現(xiàn)在底部了。。。

$ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left');
$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');

標(biāo)簽顯示在Android機(jī)底部

好了，以上就是搭建一個(gè)簡(jiǎn)單的app的過程，其中可能有不規(guī)范的地方，望大家指出，共同交流，一起學(xué)習(xí)，轉(zhuǎn)載請(qǐng)注明出處http://www.lxweimin.com/p/3a8d7e23ed79

ionic學(xué)習(xí)，我在路上。。。