使用Ionic2开发跨平台App（一）

最近出于公司的需要，使用Ionic2框架来开发跨平台App，这一系列权当做个笔记，方便以后查看。

首先大家可以根据下图进行配置环境：

这里关于环境的配置，就不多说了，网上有很多相关的文档，按照文档说明即可。

这篇博客主要用来展示，如何利用Ionic2进行项目的搭建，以及如何实现页面传值（类似于Android中Activity中的利用intent传值）。

好了，我们先看下效果图，这里使用chrome（谷歌浏览器）进行测试：

大致实现思路：

1、通过命令下载混合App模板
2、开始写第一个界面以及界面上事件的处理
3、写第二个界面以及接收值

好啦。开始撸码：

首先通过命令行下载模板：

PS E:\chenfei> ionic start demo2
? What starter would you like to use: (Use arrow keys)
> tabs ............... ionic-angular A starting project with a simple tabbed interface
  blank .............. ionic-angular A blank starter project
  sidemenu ........... ionic-angular A starting project with a side menu with navigation in the content area
  super .............. ionic-angular A starting project complete with pre-built pages, providers and best practices for
 Ionic development.
  conference ......... ionic-angular A project that demonstrates a realworld application
  tutorial ........... ionic-angular A tutorial based project that goes along with the Ionic documentation
  aws ................ ionic-angular AWS Mobile Hub Starter

 这里默认是tabs模板，也就是有底部导航栏的模板。在这个例子中我们可以通过指定-bank进行下载空的模板，下载完成之后，我们可以在webstorm的命令行中通过：

ionic serve指令，来启动服务。

第二步：

以下是混合App的目录结构：

关于目录结构不是本文的重点，有不懂的小伙伴可以谷歌或者百度。

这里将页面建在pages下面，个人感觉类似Android中的Activity，在这里进行相关页面的绘制：

其中，布局代码如下，也就是利用一些html5标签以及ionic封装的一些组件：

<ion-header>
  <ion-navbar>
    <ion-title>
      基础页面
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <p>
    你好啊
  </p>
  <button ion-button (click)="gotowPage()">点击我，去第二个界面</button>
</ion-content>

对应的ts文件如下：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {UsersPage} from "../users/users";
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {//export是指表示此类可以被引用
  constructor(public navCtrl: NavController) {//构造函数，以及变量的声明
  }
  gotowPage(){//自定义的跳转方法不含参数
    this.navCtrl.push(UsersPage);
  }
}

千万不要忘了在app.module.ts中进行配置：

这样，就可以完成简单的页面跳转了。

第三步：

完成页面的跳转以及参数的传递，主要看以下两行代码：

<button ion-button (click)="lookDetal({sex:'女',age:'18'})">查看详情</button>

在ts文件中的代码：

  lookDetal(data:{sex:string,age:string}){
    this.navCtr.push(DetalPage,data);
  }

通过这种方式可以附带参数跳转到第二个页面中。

这里主要看一下DetalPage页面中的ts文件，

export class DetalPage {
  data: { sex: string, age: string };
  constructor(private parms: NavParams) {
  this.data=this.parms.data;
  }
}

这样就可以将数据取出并且初始化第二个页面上了，好了本文实现了页面的跳转，以及数据的传递，关于ionic2其它的知识，会在之后的文章中陆续写出。