背景: 新接手复宏汉霖我的项目,记一下须要后期相熟的货色,不便前期保护.首次开始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官网