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的使用以及部分结尾相关工作