# 配置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');
