共计 5599 个字符，预计需要花费 14 分钟才能阅读完成。
背景: 新接手复宏汉霖我的项目, 记一下须要后期相熟的货色, 不便前期保护. 首次开始 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 官网
正文完