原生移動app框架inoic功能研究
本篇只側重框架提供的功能和能力的研究，請關注后續實際部署使用體驗。
一、inoic是什么？
inoic是一個可以使用Web技術以hybird方式開發移動app的前端開源框架。
二、inoic框架特點
1. 利用web技術開發移動app。
ionic提供了一套HTML、CSS、JS的類庫。我們可以使用其提供的CSS組件和工具構建具有良好交互性的app。
2. 關注性能
ionic框架以更少的DOM操作，零JQuery和硬件加速過度，在現代最新的移動設備上性能表現優越。
3.Angular
ionic基於Angular創建了一套最合開發豐富健壯的app的強大SDK。ionic與Angular完美融合，提供了適合專業化app開發的核心架構。
4.關注原生
ionic對當下流行的原生移動開發SDKs進行抽象，並利用Apache Cordova或者Phonegap編譯，使開發人員只關注自己的代碼，而不用針對IOS和Android開發多套原生app。可以實現開發一次，任意部署。
5.UI設計精美
UI干凈、簡單、實用。其提供了流行的移動組件、結構、交互規范、漂亮的皮膚。
6.功能強大的CLI
一個命令可以完成創建、構建、測試、部署ionic app到任意平台。
7.學習有趣
只需要學習HTML、CSS、JS、AngularJS。
8.提供專業原型工具
使用Creator可以通過簡單的拖拽創建真正的ionic app。其可以導出干凈、立即可用的ionic代碼，甚至是IOS和Android二進制文件。網站提供了在線體驗，但是可能是國內網絡的原因，登錄后無法進行操作。
9.提供了啟動、構建、測試和部署的專業化工具Lab，但是打開頁面無法進行下載。
10.提供了一個應用市場,可以上傳app和插件，但是市場頁面沒有東西，沒有活力。
三、ionic依賴的底層技術
ionic僅僅是開發hibrid移動app的前端框架，其依賴一些底層的技術框架
1. 其依賴apache Cordova或者Phonegap提供的原生SDK訪問能力，並依賴其將ionic app編譯部署。
2.Sass，其核心css是使用Sass編寫，可以利用Sass對Css功能的增強能力，以及靈活易於維護的能力，
同時保障了ionic框架的css擴展能力。
3.Angularjs，其通過angularjs對apache Cordova提供的原生SDK接口進行封裝(稱為ngAngular)，同時其也依賴angularjs提供的動畫、觸控系統、ui交互功能，同時angularjs的核心架構也是基於angularjs的MVC模式構建的。
四、瀏覽器兼容性
ionic重點關注原生或者hibird移動app，而不是移動web站點。其更關注特定平台提供的Web View控件的兼容性。對於1.2.4版本的ionic支持IOS7+和Android4.1+的UIWebView。
五、開源協議
基於MIT協議，可以免費用於個人和商業項目。
六、技術支撐
ionic是一個叫Drifty公司的三個人員開發的，該公司還有Codiqa和Jetstrap兩個移動產品。哦蓋過了
七、ionic提供的CSS組件
框架提供了豐富多樣的CSS組件包括Header、Content、Footer、Buttons、List、Cards、Forms、Toggle、CheckBox、RadioButton、Grid等
八、平台相關定制
1.平台相關類
ionic提供了平台設備類和平台OS版本類以方便我們修改或者擴展現有樣式。ionic會在app啟動的時候在body里添加相關的平台類。
平台設備相關類如下
平台OS版本類如下
2.使用CSS直接自定義平台相關樣式
針對android自定義bar-header的文本樣式。
.platform-android .bar-header { text-transform: uppercase; }
3.使用angular直接自定義平台相關樣式ionic通過ionic.Platform暴露平台相關類，我們可以在控制器中獲取平台類
.controller('AppCtrl', function($scope) {
$scope.platform = ionic.Platform.platform();
})
我們也可以在html元素中使用平台類控制元素的樣式，比如控制標簽在android的時候顯示一種樣式，其他系統的時候顯示另外一種樣式。
<ion-tabs class="tabs-stable" ng-class="{'tabs-positive': platform == 'android', 'tabs-icon-top': platform != 'android'}"> <!-- ion-tab directives go here --> </ion-tabs>
根據平台加載不同模板.state('tab', {
url: "/tab",
abstract: true,
controller: 'AppCtrl',
templateUrl: function() {
if (ionic.Platform.isAndroid()) {
return "templates/home-android.html";
}
return "templates/home.html";
}
})
4.使用merge文件夾加載不同的文件
merges/ ios/ index.html css/ platform.css js/ app.js android/ index.html css/ platform.css js/ app.js
九、JS組件
ionic提供的css組件是通過基於angular實現的control實現用戶交互功能的。可以簡單看下list的用法
<ion-list ng-controller="MyCtrl" show-delete="shouldShowDelete" show-reorder="shouldShowReorder" can-swipe="listCanSwipe"> <ion-item ng-repeat="item in items" class="item-thumbnail-left"> <img ng-src="{{item.img}}"> <h2>{{item.title}}</h2> <p>{{item.description}}</p> <ion-option-button class="button-positive" ng-click="share(item)"> Share </ion-option-button> <ion-option-button class="button-assertive" ng-click="edit(item)"> Edit </ion-option-button> <ion-delete-button class="ion-minus-circled" ng-click="items.splice($index, 1)"> </ion-delete-button> <ion-reorder-button class="ion-navicon" on-reorder="reorderItem(item, $fromIndex, $toIndex)"> </ion-reorder-button> </ion-item> </ion-list>
app.controller('MyCtrl', function($scope) {
$scope.shouldShowDelete = false;
$scope.shouldShowReorder = false;
$scope.listCanSwipe = true
});
十、開發流程
1.創建項目
--創建
$ ionic start todo blank--添加平台$ ionic platform add ios$ ionic platform add android--測試$ ionic build ios$ ionic emulate ios2.創建簡單的html頁面3.測試程序瀏覽器中測試$ ionic serve模擬器測試$ ionic build ios$ ionic emulate ios手機瀏覽器測試物理設備原生測試$ ionic run android4.重復進行功能開發和測試5.發布app--生成$ cordova build --release android--簽名$ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000$ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name$ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk