ionic学习笔记

一 Ionic环境安装
1、首先安装jdk, 其次安装 android sdk
2、安装node.js
3、接着安装ionic CLI
cnpm install -g ionic cordova
4、开始ionic项目
ionic start ionic3app

选择tabs

ctrl+c退出npm install
cd ionic3app
cnpm install
也可以
npm install --registry=https://registry.npm.taobao.org

另：
npm config set registry https://registry.npm.taobao.org
当你替换之后，在不使用VPN或代理的情况下，通过NPM安装包就会速度很快了。

二 项目结构
src/index.html是app的入口
app.module.ts是入口模块
入口模块的入口页面 MyApp 对应的是app.component.ts

三 常用记录
命令提示符下 ionic -help可以查看 ionic-cli的帮助

新建一个页面 ionic g page list
当然新建完成以后，还要在app.module.ts中加入引用

ionic generate
ionic generate component
ionic generate directive
ionic generate page
ionic generate pipe
ionic generate provider
ionic generate tabs
ionic generate component foo
ionic generate page Login
ionic generate pipe MyFilterPipe

四 组件使用和遇到的问题记录
1、Ionic Slides的使用问题
a、滑过之后不会自动播放 b、切换页面后再切回来也不再自动播了
解决办法
http://blog.csdn.net/bangrenzhuce/article/details/69316937

<ion-slides #slider pager="true" loop="true"
                autoplay="3000" (ionSlideAutoplayStop)="autoPlay()">
      <ion-slide>
        <ion-thumbnail class="top"
                       [ngStyle]="{ 'background-image': 'url(' + 'http://files.ovdream.com/1453095464864.jpg' + ')'}">
        </ion-thumbnail>
      </ion-slide>
      ...
</ion-slides>

ts代码：

import { Component, ViewChild } from '@angular/core';
import { NavController, Slides } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild('slider') slides: Slides;
  constructor(public navCtrl: NavController) {

  }
  //页面进入时启动自动播放  
  ionViewDidEnter() {
    this.slides.startAutoplay();
  }

  //页面离开时停止自动播放 
  ionViewDidLeave() {
    this.slides.stopAutoplay();
  }
  ionViewDidLoad() {
    // this.startLoading(this.loadingCtrl);
    this.getNews();
    //这个属性是在swiper的文档中看到的
    /*
      用户操作swiper之后，是否禁止autoplay。默认为true：停止。
      如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
      操作包括触碰，拖动，点击pagination等
    */
    this.slides.autoplayDisableOnInteraction = false;
  }
  autoPlay() {
    this.slides.startAutoplay();
  }
}

2、In App Browser Native的使用
要使用Native首先： https://ionicframework.com/docs/native/#Add_Plugins_to_Your_App_Module
cnpm install @ionic-native/core --save

安装： ionic cordova plugin add cordova-plugin-inappbrowser
cnpm install --save @ionic-native/in-app-browser
接着要在NgModule中引入这个Native,如Camera

...

import { Camera } from '@ionic-native/camera';

...

@NgModule({
  ...

  providers: [
    ...
    Camera
    ...
  ]
  ...
})
export class AppModule { }

3、Ionic中强制使用IOS样式
在app.module.ts里面设置

...
imports: [
    HttpModule,
    JsonpModule,
    BrowserModule,
    IonicModule.forRoot(MyApp,{
      tabsHideOnSubPages:"true",  //在子页面时隐藏tab
      backButtonText: '',
      iconMode: 'ios', // 强制使用ios的icon以及样式
      mode: 'ios'
    })
  ],
...

4、全局隐藏滚动条,在app/app.scss下增加样式
// 隐藏所有页面上的滚动条
::-webkit-scrollbar {
display: none;
}