# 配置ionic cordova：
用node -v檢查是否安裝node怎棱，
//-g是全局安裝
1.首先安裝cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
安裝成功使用cnpm -v 測(cè)試版本
2.安裝ionic cordoava：
cnpm i -g ionic cordova
安裝完成使用ionic -v 測(cè)試版本
如果出現(xiàn)Dependency warning錯(cuò)誤，則說明cordova 沒有安裝好 帆赢，
重新執(zhí)行cnpm i -g cordova安裝趴捅，使用cordova --version測(cè)試版本```
3.一些常用命令
ionic serve 使app跑起來
ionic g page 新建頁(yè)面
富文本
<p [innerHTML]="params"></p>
image.png
ion-item
文本不會(huì)換行問題紊搪，利用CSS white-space 屬性：
normal 默認(rèn)贪嫂∧桶妫空白會(huì)被瀏覽器忽略祠够。
pre 空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的 <pre> 標(biāo)簽粪牲。
nowrap 文本不會(huì)換行古瓤，文本會(huì)在在同一行上繼續(xù)，直到遇到 <br> 標(biāo)簽為止腺阳。
pre-wrap 保留空白符序列落君，但是正常地進(jìn)行換行。
pre-line 合并空白符序列亭引，但是保留換行符绎速。
inherit 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。
路由傳參：
可以使用NavParams（從頭部傳遞參數(shù)）獲取到其他頁(yè)面?zhèn)髦帘卷?yè)面的值焙蚓，例如列表頁(yè)傳參至詳情頁(yè)
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數(shù)據(jù)雙向綁定：
①纹冤、使用[(ngModel)]進(jìn)行雙向數(shù)據(jù)綁定：
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一次處理多個(gè)用戶輸入:
Form Builder是Angular 2提供的一個(gè)服務(wù)。使用它可以一次處理多個(gè)輸入购公，而且可以對(duì)用戶輸入進(jìn)行驗(yàn)證萌京，比如檢查用戶輸入的Email地址是否合法。
1.修改home.html模板文件宏浩，添加一個(gè)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類文件，對(duì)表單初始化绘闷，接收用戶提交的數(shù)據(jù)橡庞，代碼參考如下：
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);
}
}
本地存儲(chǔ)：
①ionic自帶本地存儲(chǔ)
app.module.ts
import { IonicStorageModule } from '@ionic/storage';
@NgModule({
imports: [
IonicStorageModule.forRoot()
],
})
接著注入到您的任何組件或頁(yè)面中，例如
login.ts
import { Storage } from '@ionic/storage';
export class MyApp {
constructor(private storage: Storage) { }
//存儲(chǔ)
storage.set('name', 'Max');
//取值
storage.get('age').then((val) => {
//val為異步印蔗，無法取出扒最，只能在此方法中使用，也不能賦值在方法外使用
console.log('Your age is', val);
});
}
②js原生存儲(chǔ)
一华嘹、關(guān)閉電腦時(shí)刪除
//存到本地
localStorage.setItem('token',res.datas);
//從本地取值
localStorage.getItem('token');
二吧趣、關(guān)閉頁(yè)面時(shí)刪除
//存到本地
sessionStorage.setItem('token',res.datas);
//從本地取值
sessionStorage.getItem('token');
