最近出于公司的需要,使用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其它的知识,会在之后的文章中陆续写出。