上一篇把ionic的大概介绍讲解了，这一篇我们开始来具体的开发这个demo只写了三个页面，一个列表一个个人中心，主要介绍组件和Cordova的使用,成图如下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.tsexport 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。接口数据对接继续写我的页面和上传头像页面部分代码如下：.tsionViewWillEnter() { 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的使用以及部分结尾相关工作