基于ionic2 的移动app开发过程《4》
来源:互联网 发布:mssql 查询语句 编辑:程序博客网 时间:2024/05/22 00:49
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中定义的,其定义如下:
- 工作界面
这些是工作界面的功能
工作界面的功能部分在另一片博客中讲述
- 基于ionic2 的移动app开发过程《4》
- 基于ionic2 的移动app开发过程《1》
- 基于ionic2 的移动app开发过程《2》
- 基于ionic2 的移动app开发过程《3》
- 基于ionic2 的移动app开发过程《5》
- 基于ionic2 的移动app开发过程《6》
- 基于Ionic2 的移动app开发<1>( 环境搭建)
- 基于Ionic2 的移动app开发<2>(从项目的新建到打包)
- 移动APP开发过程
- 移动APP开发过程[思索]
- 基于HTML5的Hybrid App成为企业移动开发首选
- 基于HTML5的Hybrid App成为企业移动开发首选
- 基于Html5的移动端APP开发框架
- 使用ionic开发移动app的过程中经验总结
- 基于CrossApp开发的漫画类移动App《动漫之家》V1.4源码下载
- 基于HTML5移动app开发教程一
- [转]移动APP开发过程总结
- ionic2开发之app.component.ts
- linux-sys_文件系统
- c++学习:多态(一)
- JQ中bind绑定多个事件类型
- centos 安装jdk 所遇问题
- 机器学习技法课程学习笔记15 -- Matrix Factorization
- 基于ionic2 的移动app开发过程《4》
- iOS11关于隐藏导航栏后带有scrollView界面出现,下移问题
- ubuntu14.04 nuttx开发环境的搭建
- 手动卸载删除ActiveX控件。
- 移动端开发技术浅析
- ios11调用系用相册崩溃
- 广州数控车床M代码指令讲解
- uiautomator简介
- MySQL 优化参考