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  新建页面

富文本

image.png

ion-item

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

normal  默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的  标签。
nowrap  文本不会换行，文本会在在同一行上继续，直到遇到 
 标签为止。
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：

  
  


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

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

  
    
       Field 1
       
    
    
       Field 2
       
    
    
       Field 3
       
    
    
  


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');