移動app框架inoic功能研究

原生移動app框架inoic功能研究

本篇只側重框架提供的功能和能力的研究，請關注後續實際部署使用體驗。

1、inoic是什麼？

inoic是一個可使用Web技術以hybird方式開發移動app的前端開源框架。

2、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和插件，可是市場頁面沒有東西，沒有活力。

3、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模式構建的。

4、瀏覽器兼容性

ionic重點關注原生或者hibird移動app，而不是移動web站點。其更關注特定平臺提供的Web View控件的兼容性。對於1.2.4版本的ionic支持IOS7+和Android4.1+的UIWebView。

5、開源協議

基於MIT協議，能夠免費用於我的和商業項目。

6、技術支撐

ionic是一個叫Drifty公司的三我的員開發的，該公司還有Codiqa和Jetstrap兩個移動產品。哦蓋過了

7、ionic提供的CSS組件

框架提供了豐富多樣的CSS組件包括Header、Content、Footer、Buttons、List、Cards、Forms、Toggle、CheckBox、RadioButton、Grid等

8、平臺相關定製

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

 

9、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
});

10、開發流程

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