背景: 新接手复宏汉霖项目,记一下需要前期熟悉的东西,方便后期维护.首次开始Angular+ionic项目.给自己打气!加油!文章有点长,需要耐心看~~
先放张图片,安抚一下眼睛.
打包地址的位置:
两个都要替换对应的地址再进行打包.ios打包需要苹果电脑.
先熟悉一个简单的个人设置页面:
页面实际图如下:
看一下页面文件夹的目录结构:
setup.html : 页面
setup.scss : css样式
setup.ts : 处理逻辑
setup.module.ts : model层
staff.service.ts : services层
我发现这个项目它们是把service都放在一起的.我之前写的其他项目是每个文件夹下有自己的service....
来研究一下个人设置
这个页面是怎么画出来的:
先研究下页面实现HTML:
来看下人家的代码是怎么写的:
- 第一部分发现了
<ion-header>
`<ion-title>`的标签.从名字看理解就是写title的标签.果然找到了系统设置四个字.就是页面的头部位置. - 第二部分,整体用
<ion-content>
标签包起来,就是页面的内容
- 继续往下看,发现了
<ion-icon>
`<h2>标签用来展示头像和姓名.用
<div>`稍微调整了下布局. - 继续往下看,发现了
<ion-list>
标签包裹的内容.对照页面看.果然有修改手势密码
,关于
,客服热线
等一个个item.这样的item用list标签是最合适的.没毛病.里面就是用一个个div
把头像和文字写到一排.然后设置了一个点击方法. - 继续往下看,在
<ion-list>
结束标签后面.写了一个div
标签.用来绘制页面底部的注销账号
的位置.div里面包个button
,加个点击事件就好了.
- 这样一条条理出来整个页面的布局就清晰可见了.
setup.html内容:
<ion-header>
<ion-navbar color="sky">
<ion-title>系统设置</ion-title>
</ion-navbar>
</ion-header>
<ion-content class="gray-bg">
<div class="setting-top" padding-top>
<ion-item tappable (tap)="toProfile()">
<ion-icon item-start>
<img src="assets/icon/avatar_duel_126.png" width="50">
</ion-icon>
<h2>{{currentStaff?.UserName}}</h2>
<p></p>
</ion-item>
</div>
<ion-list>
<button ion-item (click)="changeGestureCode()">
<ion-icon item-start>
<img src="assets/icon/pattern_yellow_58.png" width="30">
</ion-icon>
<h3>修改手势密码</h3>
</button>
<button ion-item (click)="aboutPage()">
<ion-icon item-start>
<img src="assets/icon/info_blue_58.png" width="30">
</ion-icon>
<h3>关于</h3>
</button>
<button ion-item (click)="ToCallNumber()">
<ion-icon item-start>
<img src="assets/icon/phone_green_58.png" width="30">
</ion-icon>
<h3>客服热线 <span class="color-blue">400-XXX-0800</span></h3>
</button>
</ion-list>
<div padding>
<button ion-button block color="danger" (click)="logout()">注销账号</button>
</div>
</ion-content>
研究完HTML页面后,下一步就要看,点击事件的背后做了什么事情.
先来看下逻辑页面的处理:
- 顶部引入了页面所需的装饰器.组件.
service
等内容. @IonicPage()
空装饰器@Component({ selector: 'page-setup',templateUrl: 'setup.html',})
公共组件和该组件的 HTML 模板文件.
templateUrl:'setup.html'
这个名字很熟悉就不多解释了.就是我刚刚分析的HTML页面的文件名.selector: 'page-setup'
是一个公共组件,可以共用组件内的样式,逻辑,等所有内容.
- 下面看下
SetupPage
类里面有哪些东西.
- 定义页面所需的变量 :
currentStaff: any;
看名字理解为当前的人员信息,类型为any
- 定义页面所需的变量 :
selectedStaff: any;
看名字理解为选择的人员信息,类型为any
constructor
页面初始化的时候注入依赖,依赖里面有一些下面要用到的方法.toProfile
,changePassword
等方法的注释介绍的很清楚了.是用来做什么的.这里说一下this.navCtrl.push
的意思是页面跳转.里面的两个参数:一是跳转的页面路由二是带过去的参数.this.navCtrl
就是刚刚注入的NavController
依赖,this.navCtrl.push
的.push
就是NavController
里面的方法.修改手势密码
的方法里面用到了一个方法叫做this.modalCtrl.create
是用来在页面上层浮现一个model.传参也是两个参数,一个页面路由一个传递的参数.ionViewDidEnter
方法是在constructor
之后执行的.相当于在页面初始化之后去获取一些人员信息用来展示.
setup.ts 内容:
import {Component} from '@angular/core';
import {IonicPage, ModalController, NavController, NavParams, Platform} from 'ionic-angular';
import {AlertService} from "../../../providers/util/alert.service";
import {StaffService} from "../../../services/staff.service";
import {JPush} from '@jiguang-ionic/jpush';
@IonicPage()
@Component({
selector: 'page-setup',
templateUrl: 'setup.html',
})
export class SetupPage {
currentStaff: any;
selectedStaff: any;
constructor(public navCtrl: NavController,
public navParams: NavParams,
public staffService: StaffService,
public jPush: JPush,
public platform: Platform,
public alertService: AlertService,
public modalCtrl: ModalController) {
}
//查看个人信息
toProfile() {
this.navCtrl.push('StaffProfilePage', {});
}
//修改密码
changePassword() {
this.navCtrl.push('ChangePasswordPage', {});
}
//关于页面
aboutPage() {
this.navCtrl.push('AboutPage', {});
}
/***
* 拨打客服热线
*/
ToCallNumber = () => {
document.location.href = "tel:400-xxx-0800"
};
/**
* 修改手势密码
*/
changeGestureCode = () => {
let modal = this.modalCtrl.create("GesturePage", {type: "modify", cssClass: 'gesture-modal'});
modal.present();
};
/**
* 获取当前用户信息
*/
getStaffInfo = () => this.staffService.GetStaffInfo().then((info) => {
this.currentStaff = info;
});
/**
* 注销
*/
logout = () => this.alertService.presentAlertWithCallback("请确认", "是否确认注销").then((status) => {
if (status) {
this.navCtrl.setRoot("LoginPage").then(() => {
this.selectedStaff = null;
localStorage.clear();
if (this.platform.is('cordova')) {
this.jPush.deleteAlias({sequence: 1}); // 注销极光别名
}
});
// 403 后跳到登录
// this.staffService.GetStaffMobileIndexModel().then(() => this.navCtrl.setRoot("LoginPage"))
}
});
ionViewDidEnter() {
this.getStaffInfo()
}
}
setup.scss 内容:
page-setup {
.scroll-content {
-webkit-overflow-scrolling: auto;
}
.setting-top {
background: url("../assets/imgs/settings_bg.png") center no-repeat;
height: 20vh;
width: 100%;
background-size: 100% 100%;
.item-md, .item-ios {
background-color: transparent;
ion-icon[item-start] + .item-inner {
margin-left: 12px;
}
&.item-block {
.item-inner {
border-bottom: none;
color: #fff;
p {
color: #fff;
}
}
}
}
}
.header-ios .toolbar-background-ios {
border-color: $color-nav;
}
}
现在用的方法介绍完了来介绍一下页面的model
@NgModule
是Angular的的根模块,称为元数据.这个里面有逻辑页面需要用到的模块,管道等内容.imports
里面的IonicPageModule.forChild(SetupPage)
就是用来连接你的逻辑(SetupPage)页面.可以往回看.你的setup.ts
的类名就是叫SetupPage
.
setup.module.ts 内容:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SetupPage } from './setup';
import {SharedModule} from "../../../app/shared.module";
@NgModule({
declarations: [],
imports: [
IonicPageModule.forChild(SetupPage),
SharedModule
],
})
export class SetupPageModule {}
现在看一下最后的service层:
service
层就是用来连接后端接口的返回值的.- 在
setup.ts
逻辑文件的上方可以看到有import {StaffService} from "../../../services/staff.service";
的导入.这样导入后就可以用this.staffService.GetStaffInfo().then((info) => {...});
去获取后端返回的当前用户信息.
staff.service.ts 部分方法内容:
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from "rxjs";
@Injectable()
export class StaffService {
constructor(public http: HttpClient) {
}
/**
* 获取当前用户的信息
* @constructor
*/
GetStaffInfo = () => new Promise((resolve, reject) =>
this.http.get('api/Staff/GetCurrentStaffInfo')
.subscribe(res => {
resolve(res);
}, (err) => {
//reject(err);
})
);
....
}
总结
今天认识了一下复宏汉霖我的
页面的实现.从html-scss-model-serivce
.页面到样式到逻辑到接口返回值简单的了解了一下.大致知道了页面是怎么实现的.后期还需要经常光顾官网深刻了解:
Angular官网
Ionic3官网