ionic 初學者引導（二）
摘要：
上一篇把ionic的大概介紹講解了，這一篇我們開始來具體的開發
1. 建立一個空的ionic專案
全域性安裝 ionic , cordova ； npm install -g ionic cordova
建立空專案demo ionic st...
上一篇把ionic的大概介紹講解了，這一篇我們開始來具體的開發
1. 建立一個空的ionic專案
- 全域性安裝
ionic,cordova；npm install -g ionic cordova - 建立空專案demo
ionic start demo blank；這個blank不固定，具體可以看CLI中的相關命令 -
ionic serve執行專案。會預設開啟瀏覽器，這時就可以看到預設頁面了
2. 寫一個tab底部
- 在home頁面根據
components裡面的tab元件寫 - 再建立首頁和我的的頁面。命令
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. 寫首頁列表
- 在首頁寫相關頁面佈局調整樣式。這裡使用的是
ionic卡片列表式，上拉載入(一般使用list做列表，要根據自己的實際用途，想要的效果選擇) - 使用了easyMock模擬伺服器返回資料（實際開發使用具體介面）。使用命令
ionic g providers inter-ser建立一個介面服務，在這裡面統一寫介面對接。（實際開發中建議增加一個http處理serve，可以對介面訪問前做攔截處理，對返回後的資料做統一處理比如返回錯誤處理，異常處理等等）。寫http請求需要在app.module.ts全域性引入HttpClientModule。 - 介面資料對接
- 繼續寫我的頁面和上傳頭像頁面
部分程式碼如下：
.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的使用以及部分結尾相關工作