标签：
本篇只侧重框架提供的功能和能力的研究，请关注后续实际部署使用体验。
一、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 ios
2.创建简单的html页面
3.测试程序
浏览器中测试
$ ionic serve
模拟器测试
$ ionic build ios
$ ionic emulate ios
手机浏览器测试
物理设备原生测试
$ ionic run android
4.重复进行功能开发和测试
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
标签：
原文地址：http://www.cnblogs.com/jayruan/p/5224002.html
