ionic2简单分析

Angular2是一个全新的框架，它从ReactJS以及其余web移动框架借鉴了很多经验和优势，巨大的改进使得开 发体验和性能已经超越了Angular1，并且Ionic2不管是从UI交互效果和跨平台的差别性都优于Ionic1

1. 安装使用

ionic2的安装运行基本和前版本的ionic基本一致，很是简单。

npm install -g ionic # 安装ionic工具集

ionic start projectName --v2 # --v2表示使用ionic2 + angular2的组合方式建立项目，不然使用ionic + angular建立项目，此时ionic会下载所须要的相关包

cd projectName # 进入建立的项目名称目录

ionic serve # 启用浏览器调试应用页面，这时经过浏览器打开默认端口页面http://localhost:8100/#/tab/dash就能够打开应用页面了

2. 和ionic的区别

ionic2是创建在angular 2上的，angular 2推荐使用typescript进行项目的开发，因此到了ionic2，就能够这样来开发咱们的项目了。通常状况下，咱们建立应用完成后，www/目录为咱们页面的源代码。其目录结构以下：

+ www/
    + css/
    + img/
    + js/
    + lib/
    + templates/
    + index.html
    + manifest.json
    + service-worker.js

咱们以www/js/app.js为例。

// 入口JavaScript文件，配置页面路由与加载的视图
// ionic版本写法 .config(function($stateProvider, $urlRouterProvider) { $stateProvider.state('tab', { url: '/tab', abstract: true, templateUrl: 'templates/tabs.html' }).controller('MainCtrl', function($scope){ $scope.data ={ text: 'Hello World' } } ) }); // ionic 2写法 @Component({ templateUrl:'main/main.html' }); export class MainCmp { constructor(){ this.data ={ text: 'Hello World' } } }

templates/tabs.html的内容以下。

<ion-content ng-controller="MainCtrl"> <ion-item> </ion-item> </ion-content>

ionic2里面里能够这样来适应原来的版本：

<ion-content ng-controller="MainCtrl as main"> <ion-item> </ion-item> </ion-content>

值得注意的是，这里 <ion-content> 等为ionic-angular提供的组件模块，它相似于Webcomponent的方式，能被angular识别解析。通俗的理解就是一个相似bootstrap的UI组件库。

三、组件

ionic2除了提供统一便捷式APP打包的解决方案，还提供了一个用于移动端的UI组件库。其实相似的组件库有不少，bootstrap、frozenui、wui等等，可是与其它框架提供UI组件不一样的是，ionic2提供的组件规范是面向将来Webcomponent的方式实现的。

例如对于一个对话框组件，通常的UI框架可能这样来实现，相信相似的框架你们多少用过。这里以frozenui为例，通常经过对元素添加不一样的class名称来控制组件的样式和显示，而像 ui-dialog 这些类名是UI库统必定义好的。

<div class="ui-dialog"> <div class="ui-dialog-cnt"> <header class="ui-dialog-hd ui-border-b"> <h3>新手任务</h3> <i class="ui-dialog-close" data-role="button"></i> </header> <div class="ui-dialog-bd"> <h4>标题标题</h4> <div>这是标题的内容！</div> </div> <div class="ui-dialog-ft"> <button type="button" data-role="button">取消</button> <button type="button" data-role="button">开通</button> </div> </div> </div> <script class="demo-script"> $(".ui-dialog").dialog("show"); </script>

可是使用ionic2，你可能会这样来使用，在这里，咱们没有去对模块元素添加一些样式的类，由于angular2将自定义组件标签 ion-header 对应的CSS已经经过Webcomponent的形式引入了，那么咱们只用管怎样使用结构层结构就能够了，可是这里注意的是 primary block 等类名没有添加到class中。

<ion-header> <ion-navbar> <ion-title>Confirm</ion-title> </ion-navbar> </ion-header> <ion-content padding> <button primary block (click)="doConfirm()">确认对话框</button> </ion-content> <script> import { AlertController } from 'ionic-angular'; export class MyPage { constructor(public alertCtrl: AlertController) {} showConfirm() { let confirm = this.alertCtrl.create({ title: '标题标题', message: '这是标题的内容', buttons: [{ text: '取消', handler: () => { console.log('取消'); } }, { text: '肯定', handler: () => { console.log('A肯定'); } }] }); confirm.present(); } } </script>

其它的相关组件的方式相似，同时你也能够去自定义遵循Webcomponent的element 组件。

更多API: http://ionicframework.com/docs/v2/components/#alert-prompt

4.模板的语法结构

ionic2的模板语法与Ionic1很是类似，可是看起来又有点古怪，其实Ionic2的模板语法更为简洁。咱们来看一下对比。

• ionic1：

<img ng-src="{{photo.image}}" />

• ionic2：

<img [src]="photo.image" />

咱们看一下 事件调用：

• ionic1：

<button ng-click="doSomething()">

• ionic2：

<button (click)="doSomething()">

5.它仅仅是javascript而已

ionic1和angular1都有一些特定的语法，可是追其根本只不过是javascript

可是从使用上，EM6/ TS可以让你避免不少问题，好比说：

• jsvascript：

this.someData = null; var me = this; doSomething(function(data){ me.someData = data; });

看到了么？你问了使用this指针，不得不在函数外面做为变量me的引用，可是你使用了EM6:

this.someData = null; doSomething((data) => { this.someData = data; })

六、native交互

固然，ionic2还提供了与Native客户端的相互调用能力，前端相关的一套JavaScript调用库被称为Ionic Native。若是在你的APP须要调用Native调用能力。现须要安装引入对应的模块，一边在分析打包时引入。

npm install ionic-native --save

调用时就能够这样来使用。

import {Geolocation} from 'ionic-native'; Geolocation.getCurrentPosition().then(pos => { console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude); }); let watch = Geolocation.watchPosition().subscribe(pos => { console.log('lat: ' + pos.coords.latitude + ', lon: ' + pos.coords.longitude); }); // to stop watching watch.unsubscribe();

使用ionic2也可使用ES6+的方式来实现。

// ES6 / TypeScript / Ionic 2 / Angular 2
import {Camera} from 'ionic-native'; this.platform().then(() => { Camera.getPicture().then( res => console.log("We have taken a picture!"), err => console.error("Error taking picture", err) ); });

具体更多API: http://ionicframework.com/docs/v2/native/

七、主题与图标

若是你须要改变ionic2 UI组件库的显示风格，你也能够自定义本身的APP样式。方法也很简单，ionic2 的UI组件库样式引用了通用的样式变量，在 app/theme/app.variables.scss 里面修改响应的颜色和字体值就能够了。这点和其它UI框架是同样的。固然你也能够修改保存多个主题风格的变量文件，以供选择使用。

$colors: ( primary: #387ef5; secondary: #32db64; danger: #f53d3d; light: #f4f4f4; dark: #222; );

对于图标的话就没什么讲的了，和fontawsome同样，ionic2给了UI框架自带的可选图标，你们能够根据下面的文档说明选择使用。

图标参考: http://ionicframework.com/docs/v2/ionicons/

八、总结

总结来看，ionic2不只为咱们提供了打包前端页面应用的解决方案，还为咱们提供了一整套的UI组件库，并且组件均使用Web Component规范来实现，开发体验有了较好的改善。

更多API: http://ionicframework.com/docs/v2/