共计 2060 个字符，预计需要花费 6 分钟才能阅读完成。
上一篇把 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.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 的使用以及部分结尾相关工作
