ionic的学习

# 配置ionic cordova：

用node -v检查是否安装node，

//-g是全局安装

1.首先安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org  
安装成功使用cnpm -v 测试版本

2.安装ionic cordoava：

cnpm i -g ionic cordova

安装完成使用ionic -v 测试版本
如果出现Dependency warning错误，则说明cordova 没有安装好 ，
重新执行cnpm i -g cordova安装，使用cordova --version测试版本```

3.一些常用命令

ionic serve  使app跑起来

ionic  g  page  新建页面

富文本

 <p  [innerHTML]="params"></p>

image.png

ion-item

文本不会换行问题，利用CSS white-space 属性：

normal  默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap    保留空白符序列，但是正常地进行换行。
pre-line    合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值。

路由传参：

可以使用NavParams（从头部传递参数）获取到其他页面传至本页面的值，例如列表页传参至详情页

list.ts

this.navCtrl.push(DetailPage, {
    key1: value1,
    key2: value2
});

detail.ts

constructor(public navParams: NavParams) {
        const data = this.navParams.data;
        const value1 = this.navParams.get(‘key1‘);
        const value2 = this.navParams.get(‘key2‘);
    }

上拉加载组件： ion-infinite-scroll

image.png

concat()

image.png
image.png

input数据双向绑定：

①、使用[(ngModel)]进行双向数据绑定：

home.html：

<ion-content>
  <ion-input type="text" [(ngModel)]="myInput"></ion-input>
  <button ion-button (click)="logInput()">提交输入</button>
</ion-content>

home.ts:

export class HomePage {
  myInput:string;
  logInput(){
     console.log(this.myInput);
  }
}

②使用Form Builder一次处理多个用户输入:

Form Builder是Angular 2提供的一个服务。使用它可以一次处理多个输入，而且可以对用户输入进行验证，比如检查用户输入的Email地址是否合法。
1.修改home.html模板文件，添加一个form表单，代码参考如下：

<ion-content>
  <form [formGroup]="myForm" (submit)="saveForm($event)">
    <ion-item>
       <ion-label stacked>Field 1</ion-label>
       <ion-input formControlName="field1" type="text"></ion-input>
    </ion-item>
    <ion-item>
       <ion-label stacked>Field 2</ion-label>
       <ion-input formControlName="field2" type="text"></ion-input>
    </ion-item>
    <ion-item>
       <ion-label stacked>Field 3</ion-label>
       <ion-input formControlName="field3" type="text"></ion-input>
    </ion-item>
    <button ion-button type="submit">提交</button>
  </form>
</ion-content>

2.修改home.ts类文件，对表单初始化，接收用户提交的数据，代码参考如下：

import { FormBuilder,FormGroup,Validators } from '@angular/forms';
export class HomePage {
  public myForm:FormGroup;
  constructor(public formBuilder:FormBuilder) {
     this.myForm=this.formBuilder.group({
         field1:['',Validators.required],
         field2:[''],
         field3:['']
     });
  }
  saveForm(event){
    event.preventDefault();
    console.log(this.myForm.value);
  }
}

本地存储：

①ionic自带本地存储

app.module.ts

import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  imports: [
    IonicStorageModule.forRoot()
  ],
})

接着注入到您的任何组件或页面中，例如
login.ts

import { Storage } from '@ionic/storage';
export class MyApp {
  constructor(private storage: Storage) { }
//存储
  storage.set('name', 'Max');
//取值
  storage.get('age').then((val) => {
//val为异步，无法取出，只能在此方法中使用，也不能赋值在方法外使用
    console.log('Your age is', val);
  });
}

②js原生存储

一、关闭电脑时删除

//存到本地
localStorage.setItem('token',res.datas);
//从本地取值
localStorage.getItem('token');

二、关闭页面时删除

//存到本地
sessionStorage.setItem('token',res.datas);
//从本地取值
sessionStorage.getItem('token');