ionic2中文教程

ionic的设计初衷是帮助web程序员以较低的学习成本上手app开发,这种混合开发模式使得制作app就像构建一个网站那样简单。ionic的核心技术是web开发中常用的html+css+javascript,这些技术已经存在了20多年,至今依然茁壮成长。

使用过ionic的程序员一定会发现,简单的web技术可以生成非常强大的app应用,甚至几段简洁的代码就可以调用原生的touchId,这一切得益于ionic的简约化设计。

ionic第一版的成功促进了第二版的到来,ionic2基于angular2开发。ionic2几乎修改了第一版中的每一个模块,开发者更容易上手。

ionic2安装和初始化

和ionic1一样,你可以通过命令行或者图形化工具来安装和构建ionic2,同时可以在浏览器中测试ionic2程序。在生成ionic2程序之前需要通过命令行安装ionic2的最新发布版程序,看起来像下面这样:

npm install -g ionic cordova

下面我们通过一段指令生成一个ionic2项目:

ionic start cutePuppyPics

接下来我们需要在浏览器中运行cutePuppyPics:

cd cutePuppyPics 
ionic serve

下面我们将上述demo打包成安卓和苹果项目并运行。

苹果环境如下:

ionic platform add ios
ionic emulate ios

安卓环境如下:

ionic platform add android
ionic run android

ionic程序迁移

ionic2是基于angular2开发的,本文上述有所涉及。虽然v2版程序的语法已经大变样了,但是框架理念仍然和v1版一样。ionic2中保留了v1版中控制器和视图的概念,但是v2版的程序更加简明。

ionic1:

.config(function($stateProvider){  
    $stateProvider.state('main', {    
        url: '/',    
        templateUrl: 'templates/main.html',    
        controller: 'MainCtrl'  
    })
}) 
.controller('MainCtrl', function(){ })

ionic2:

@Page({  
    templateUrl:'main/main.html'
})
export class MainCmp {  constructor(){   }}

当然ionic2也做了其他的改进,如页面导航(监控历史状态的组件)改动非常巨大,但该组件将变得更加灵活,用起来更像是原生程序。

那么如何将ionic1的程序升级到v2版本呢?这里我们提及angular1.x中的一个特性—controllerAs语法,在控制器中使用as语法可以让ionic1中的所有$scope替换为this,看起来像下面这样。

带$scope的语法:

<ion-content ng-controller="MainCtrl">  
    <ion-item>    
        {{data.text}}  
    </ion-item>
</ion-content>
.controller('MainCtrl', function($scope){  
    $scope.data ={    
        text: 'Hello World'  
    }
})

controllerAs语法:

<ion-content ng-controller="MainCtrl as main">  
    <ion-item>    
        {{main.data.text}}  
    </ion-item>
</ion-content>
.controller('MainCtrl', function(){  
    this.data ={    
        text: 'Hello World'  
    }
})

做了上述改变之后,我们再来介绍一下typescript。typescript是javascript的超集,也就意味着所有正确的javascript程序都是正确的typescript程序,typescript仅仅是对当前es5语法的扩充(增加了es6的特性)。由此我们可以知道,ionic1的程序都能在ionic2的框架下运行,当然我们可以逐步将语法转为typescript(这样我们的程序将更加健壮)。我们可以非常方便地将controllerAs语法转为typescript语句。

.controller('MainCtrl', function(){  
    this.data ={    
        text: 'Hello World'  
    }
})
export class MainCtrl{  
    constructor(){    
        this.data ={      
            text: 'Hello World'    
        }  
    }
}

ionic1的项目结构遵循的是相同文件后缀归类,而ionic2是基于组件构建的,因此一个文件夹中存的往往是组件的html+css+js。

ionic1项目结构:

    |-www/    
    |    
    |--js/    
    |--|-app.js    
    |--|-HomeCtrl.js    
    |--|-DetailCtrl.js    
    |    
    |--templates/    
    |--|-Home.html    
    |--|-Detail.html    
    |    
    |-index.html

ionic2项目结构:

    |-www/
    |
    |--Home/
    |--|-HomeCtrl.js
    |--|-Home.html
    |
    |--Detail/
    |--|-DetailCtrl.js
    |--|-Detail.html
    |
    |-index.html
    |-app.js