ionic 初学者引导(二)

上一篇把ionic的大概介绍讲解了,这一篇我们开始来具体的开发

1. 创建一个空的ionic项目

  1. 全局安装 ionic , cordovanpm 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的使用以及部分结尾相关工作

我来评几句
登录后评论

已发表评论数()

相关站点

热门文章