不忘初心

永遠懷揣一顆學習之心，小白終會變大神

最近體驗了一下時下很流行的前端開發框架ionic，以假亂真的頁面和流暢的運行速度直逼原生應用，親不自禁的愛上了它，下面來簡單介紹下ionic。

Ionic是目前最有潛力的一款 HTML5 手機應用開發框架。

通過 SASS 構建應用程序，Ionic提供了很多 UI 組件來幫助開發者開發強大的應用。 ionic使用 JavaScript MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定，使用ionic成為 Web 和移動開發者的共同選擇。Ionic是一個專注于用WEB開發技術，基于HTML5創建類似于手機平臺原生應用的一個開發框架。Ionic框架的目的是從web的角度開發手機應用，基于cordova（原PhoneGap）的編譯平臺，可以實現編譯成各個平臺的應用程序。

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

本例是在win10系統下搭建的一個android應用實例，待拿下macbook pro再更新ionic的ios實例。

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

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

node -v

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

$ npm install -g cordova ionic

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

ionic

ionic和cordova文件

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

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

官方實例

代碼文件

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

4.Last But Not Least，運行或者調試app，有瀏覽器，安卓模擬器和真機三種方式可供我們選擇。

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

瀏覽器運行效果

進入www所在目錄，執行以下命令：

ionic platform add android （添加android平臺） ionic build android （生成android的apk文件） ionic emulate android （在模擬器或者真機上運行）

生成apk文件和運行以后，這兩步可以合并成ionic run android一個命令，當修改程序代碼后，執行這一個命令查看即可。

Genymotion模擬器

（3）使用手機運行ionic_app：在使用模擬器運行ionic_app步驟中執行完那幾行創建運行代碼后，使用數據線連接電腦，打開USB調試模式，修改連接方式為“媒體設備（MTP）”模式，測試手機為魅族

執行ionic run android命令，如果報錯，說明手機連接沒有成功，可多次拔插進行嘗試

失敗報錯

安裝提示和安裝成功

真機運行

但是運行在Android真機上，會出現標簽欄置于頂部的問題。將下面的代碼復制粘貼到app.js的config配置下，標簽欄就會乖乖的出現在底部了。。。

$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');

標簽顯示在Android機底部

好了，以上就是搭建一個簡單的app的過程，其中可能有不規范的地方，望大家指出，共同交流，一起學習，轉載請注明出處http://www.lxweimin.com/p/3a8d7e23ed79

ionic學習，我在路上。。。