基于ionic2 的移动app开发过程《4》

7.基于ionic2 的实例应用

功能需求

账号登录验证；
四个主界面的切换，分别为消息，工作，联系人和我的。消息功能需要显示全部消息并且可以查看具体信息；联系人用来显示全部人员，仅仅用来展示； ‘我的’用来显示个人资料信息；工作部分不公开；
消息推送；

功能实现

• 登录界面

首先新建一个登陆的视图，使用 Ionic –g page login 可以生成一个page,这个page包括
Login.ts,login.html，login.scss文件，然后我们在已经生成的模板中添加我们自己的代码
Login.html

FormControlName属性类似于form的name属性，ngSubmit是表单提交时的函数，formGroup绑定到一个FromGroup类型的对象，这些值在login.ts文件中都已经声明了
为了使用form功能，我们要引入forms库

在构造器中可以为form表单对象传入参数

这就要求这两个字段都是必填字段

信息填写完后是怎样提交的呢？
首先要将获取到的用户名和密码等信息作为参数传递到后台，后台检测用户信息的正确性并响应信息，如果用户信息正确，就跳转到主界面，否则反馈错误信息

• tabs界面

用户登录后是怎样进行页面跳转的呢？
Ionic 2中页面跳转类似于简单的栈操作，如果要进入一个视图，就调用this.navCtrl.push()方法，将目标视图压入栈中，导航到一个界面后会显示一个返回键.可以返回到之前的界面

这样就将页面跳转到到了TabsPage，关于tabs已在 前面介绍，这里不再赘述

• 消息功能

消息 的获取是在ts文件中进行的，首先请求后台，后台会查询相应的信息并返回响应，然后在ts中解析返回值并赋值给变量，因为变量是可以在界面中访问的，这样就实现了前后台的交互

VirtualScroll类似于可以下拉刷新的列表，每次只显示一部分，其中virtualScroll值是要循环的数组，在每一个item中有一个*virtualItem属性，这个属性指定一个变量代指数组中的每一条记录(个人感觉这里就相当于java 中的for-each语句),然后将记录中的字段读取出来。

• 联系人功能

  联系人功能只进行数据的显示，类似于前面的消息功能，所以这里不再深入讲解
  其一般步骤是:
  先请求后台从后台获取数据，然后从后台返回值中提取有用的信息，再通过数据绑定功能将信息再前台显示出来

• 个人信息功能

这个主要是用来显示用户基本信息和注销登录

这里的user 和quit函数都是在class中定义的，其定义如下：

• 工作界面

这些是工作界面的功能

工作界面的功能部分在另一片博客中讲述