移动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