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;
}