32版本ionic学习笔记

Posted on   |     |  

基于32位的ionic学习笔记

作为一个受瞩目的跨平台开发App开发框架，ionic是一个专注于用WEB开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。
发现网上关于32位的学习资料还是挺少的，而且其相对于之前版本还是有一定差异的，其与angular2一起用。这里的内容均基于32版本的。

一、生命周期

当页面加载完

1
2
3
onPageLoaded(){
  console.log("page 1 page loaded")
  }

当页面即将进入的时候

1
2
3
onPageWillEnter(){
  console.log("page 1 will enter")
  }

当页面已经进入的时候

1
2
3
onPageDidEnter(){
  console.log("page 1 did enter")
  }

当页面即将离开的时候

1
2
3
onPageWillLeave(){
  console.log("page 1 will leave")
  }

当页面已经离开的时候

1
2
3
onPageDidLeave(){
  console.log("page 1 did leave")
  }

从DOM中移除的时候执行生命周期 

1
2
3
onPageWillUnload(){
  
  }

从DOM中移除完成时执行的生命周期 

1
2
3
onPageDidUnload(){
  	
  }

二、下面我们来说一些常用的组件，需要注意的是在我们使用这些组件之前需要将其引入到页面里。

1
import {Page,NavController,Loading,Alert,Toast,Modal,ViewController} from 'ionic-angular';

Tab控件

图标的使用

图标地址：http://ionicframework.com/docs/v2/ionicons/
使用方法直接复制，粘贴到tab控件的tabIcon上。

1
<ion-tab [root]="tab1Root" tabTitle="Home" **tabIcon="appstore"**></ion-tab>

消息提醒小图标及其样式设置：

1
<ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="appstore" **tabBadge="3"  tabBadgeStyle="danger"**></ion-tab>

这里面的颜色设置采用变量的方法，颜色变量定义在themes文件夹下的app.variables.scss里面。可以自行定义需要的颜色。直接写颜色是不好使的！！！

设置默认加载的Tab.

1
2
3
4
5
<ion-tabs ＃mainTabs **selectedIndex="2"**>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="appstore"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

动态加载tab

应用场景：如果用户未登录则家在登录tab，如果已经登陆则选择加载数据的Tab给用户看。

1
2
3
4
5
6
 onPageDidEnter(){
    //在进入之后我们动态的选定某一个Tab
    let tabs=this.app.getComponent("mainTabs");//获取tab控件
    tabs.select(2);//选择控件索引值
  }
}

当然在此之前要构造app，并将app作为参数传入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
export class TabsPage {
  @ViewChild('mainTabs') tabRef: Tabs;
  private tab1Root: any;
  private tab2Root: any;
  private tab3Root: any;
  constructor() {
    // this tells the tabs component which Pages
    // should be each tab's root Page
    this.tab1Root = HomePage;
    this.tab2Root = AboutPage;
    this.tab3Root = ContactPage;
  }
    
  ionViewDidEnter(){
  this.tabRef.select(2);
  }
}

button组件

按钮颜色只需将颜色变量写在标签内就可以了，按钮样式同样将样式值直接写在标签上就可以了。其中outline样式为线框样式，clear样式为只有文字的按钮样式,round为带圆角的按钮样式。
按钮长度一般情况下为自适应，可以自行设置，其中block为占满一行，small为小尺寸的，large为大尺寸的。

1
2
3
4
5
6
7
<button gray>button</button>
<button outline danger>outline button</button>
<button clear danger>clear button</button>
<button round danger>round button</button>
<button block danger>block button</button>
<button small danger>small button</button>
<button large danger>large button</button>

带图标的按钮只许加入如下标签即可。

1
2
3
4
<button>
  <ion-icon name="home"></ion-icon>
  主页
</button>

input控件

这里来说几种常用的input的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<ion-content padding>//padding 内留白
  <ion-list>
  <ion-item>
  //input中可以用placeholder来显示提示信息
  <ion-input type="text" placeholder="用户名"></ion-input>
  </ion-item>
   <ion-item>
   //也可以用label形式显示
  <ion-label>密&nbsp;&nbsp;码</ion-label>
  <ion-input type="password" ></ion-input>
  </ion-item>
  <ion-item>
  //floating形式显示则为输入时提示信息字体缩小上浮。
  <ion-label floating>验证信息</ion-label>
  <ion-input type="text" ></ion-input>
  </ion-item>
   <ion-item>
   //stacked形式为提示信息始终上浮状态
  <ion-label stacked>兴趣</ion-label>
  <ion-input type="text" ></ion-input>
  </ion-item>
  </ion-list>
  <button block>登录</button>
</ion-content>

说完样式，再来说一下angular2.js绑定数据和添加事件，以点击事件为例：

1
2
3
4
5
6
7
//绑定数据
<ion-item>
    <ion-label>用户名</ion-label>
    <ion-input type="text" [(ngModel)]='user.username'></ion-input>
</ion-item>
//添加事件
<button block (click)="showInfro()">登录</button>

这里需要注意的是32版本中的ionic中this初始化方式有改变：

1
2
3
4
public user = {
		username:'',
		password:''
	}

loading组件

注意初始化，3秒后使其消失

1
2
3
4
5
6
7
8
let loading=Loading.create({
        content:"正在登录...",
        duration:3000
      });
      this.nav.present(loading);
      setTimeout(()=>{
        loading.dismiss();
      },3000);

Alert组件

用法和loading组件相似

1
2
3
4
5
6
7
let alertUserNameError=Alert.create({
          title:"inoicpro",
          subTitle:"用户名输入有误",
          buttons:['Dismiss']
        });
        this.nav.present(alertUserNameError);

Toast组件（用于输入校验的错误提醒）

基本用法和loading一样。

1
2
3
4
5
6
7
8
9
10
let toast=Toast.create({
          message:'用户名输入有误',
          duration:2000,
          position:'top'
          
        });
        toast.onDismiss(()=>{
          console.log("Dismissed toast");
        });
        this.nav.present(toast);

Grid布局

基本写法如下,在uon-row中通过center 或baseline来控制它里面内容的垂直对齐方式。在ion-col标签中用width-10来控制宽度，表示占10%的宽度，offset-25表示偏移。

1
2
3
4
5
<ion-grid>
  <ion-row center>
    <ion-col width-10 offset-25>This column will take 10% of space</ion-col>
  </ion-row>
</ion-grid>

Modal组件

可以通过modal组件跳转页面，modal层为新页面。
通过点击按钮触发register事件从而建立modal。

首先我们需要创建新的页面register.html以及register.ts文件

我们以import方式将新的modal页面引入

然后在ragister.ts文件里进行对modaly新页面的一些操作。

原页面.ts文件里需要添加的代码：

1
import {Register } from '../contact/register';

1
2
3
4
register(){
      var modal=Modal.create(Register);
      this.nav.present(modal);
    }

新html页面里的代码如下，

＊start为此标签现实的位置，在开头，end表示在结尾。但在安卓平台下，若为start则位置在右侧，iOS与之相反在左侧。

＊showWhen属性代表在哪个平台下显示次块内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ion-header>
  <ion-navbar primary>
    <ion-title>
      用户中心
    </ion-title>
    <ion-buttons start>
    <button (click)=dismiss() >
      <span showWhen="ios">取消</span>
      <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
    </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>
<ion-content padding>
  
</ion-content>

需要注意的是内容要包裹在ion-content标签内，否则页面是透明的，与原页面同时出现。

新的.ts文件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import {Component} from '@angular/core';
import {Page,NavController,Loading,Alert,Toast,Modal,ViewController} from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/contact/register.html'
})
export class Register {
	constructor(public viewCtrl: ViewController) {}
	 dismiss(){
	 	this.viewCtrl.dismiss();
	 	//alert("y");
	 }
}

这里需要注意的是export引入的class与前面import引入的名字要保持一致！均为Register。

Toolbar组件

该组件是位于页面顶部的标题部分，可以设置它的颜色。

1
2
3
<ion-toolbar primary>
  <ion-title>Toolbar</ion-title>
</ion-toolbar>

card组件

利用card我们可以写出类似微博那样的布局。下面代码为比较完整的一个布局结构。
ion-avatar标签来存放头像，并给其item-left属性这样就可以左浮动。
在评论和点赞的按钮出需要注意的是一定要清一下浮动，设置clear属性。否则按钮会紧挨在一起。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<ion-card>
    <ion-item>
      <ion-avatar item-left>
      <img src="../img/1.png" style="width:40px;height:40px;border-radius:50%" >
      </ion-avatar>
       <h2>哈哈哈哈</h2>
       <p>来自新浪微博</p>
       <p>我又发布了一辆新车，上天入地</p>
    </ion-item>
    <img src="../img/2.png" />
    <ion-card-content>
      <p>我在此发布了一条微博</p>
    </ion-card-content>
    <ion-item href="#">
     <button primary clear >
       <ion-icon name="thumbs-up" ></ion-icon>
       <div>1111赞</div>
       <ion-icon name="text"></ion-icon>
       <div>600</div>
     </button>
     <ion-note item-right>一小时前</ion-note>
    </ion-item>
  </ion-card>

最后效果为：
image description

坚持原创技术分享，您的支持将鼓励我继续创作！
Fork me on GitHub