ionic 初學者引導（二）

上一篇把ionic的大概介紹講解了，這一篇咱們開始來具體的開發
這個demo只寫了三個頁面，一個列表一個我的中心，主要介紹組件和Cordova的使用,成圖以下

1. 建立一個空的ionic項目

1. 全局安裝ionic,cordova；npm install -g ionic cordova
2. 建立空項目demo ionic start demo blank；這個blank不固定，具體能夠看CLI中的相關命令
3. ionic serve運行項目。會默認打開瀏覽器，這時就能夠看到默認頁面了

2. 寫一個tab底部

1. 在home頁面根據components 裏面的tab組件寫
2. 再建立首頁和個人的頁面。命令ionic g page index,ionic g page my

相關代碼以下

home.html
 <ion-tabs>
   <ion-tab tabIcon="home" [root]="index" tabTitle='首頁'></ion-tab>
   <ion-tab tabIcon="person" [root]="my" tabTitle='個人'></ion-tab>
 </ion-tabs>
home.ts
export class HomePage {
  index = 'IndexPage'
  my = 'MyPage'
  constructor(public navCtrl: NavController) {
  }
}

3. 寫首頁列表

1. 在首頁寫相關頁面佈局調整樣式。這裏使用的是ionic卡片列表式，上拉加載(通常使用list作列表，要根據本身的實際用途，想要的效果選擇)
2. 使用了easyMock模擬服務器返回數據（實際開發使用具體接口）。使用命令ionic g providers inter-ser建立一個接口服務，在這裏面統一寫接口對接。（實際開發中建議增長一個http處理serve，能夠對接口訪問前作攔截處理，對返回後的數據作統一處理好比返回錯誤處理，異常處理等等）。寫http請求須要在app.module.ts全局引入HttpClientModule。
3. 接口數據對接
4. 繼續寫個人頁面和上傳頭像頁面

部分代碼以下：

.ts
ionViewWillEnter() {
        this.loaded = false
        this.list = []
        this.params.pageNum = 1
        this.setLoader()
        this.getData()
    }
    getData() {
        if (this.loading) return
        this.inter.getJokeList(this.params).subscribe((data) => {
            this.loaded = true
            this.list = this.list.concat(data['data'])
            this.total = data['total']
            if (this.params.pageNum === 1) this.loader.dismiss()
            if (this.params.pageNum > 1) this.infiniteScroll.complete()
        })
    }
    doInfinite(infiniteScroll) {
        if (this.list.length < this.total) {
            this.infiniteScroll = infiniteScroll
            this.params.pageNum++
            this.getData()
        } else {
            infiniteScroll.enable(false)
        }
    }

    /**
     * 這種類型的方法建議寫成全局方法
     */
    setLoader() {
        this.loader = this.loadingCtrl.create({
            content: '加載中...',
            spinner: 'ios-small'
        })
        this.loader.present()
    }
.html
<div *ngIf="loaded && list.length > 0">
    <div *ngFor="let item of list">
      <ion-card>
        <ion-card-header>
          {{item.title}}
        </ion-card-header>
        <ion-card-content>
          {{item.content}}
        </ion-card-content>
        <p class="update-time">{{item.updateTime}}</p>
      </ion-card>
    </div>
  </div>
  <div class="no-data" *ngIf="loaded && list.length === 0">暫無數據</div>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content loadingText="加載中..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>

本章小結

這章主要操做的仍是webview,不涉及到移動設備的，基本能夠在瀏覽器上完成。接下來的一章大概說一下Cordova的使用以及部分結尾相關工做