复宏汉霖(Angular5 + Ionic3 + TS)

背景: 新接手复宏汉霖项目,记一下需要前期熟悉的东西,方便后期维护.首次开始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>标签包起来,就是页面的内容

1. 继续往下看,发现了<ion-icon>`<h2>标签用来展示头像和姓名.用<div>`稍微调整了下布局.
2. 继续往下看,发现了<ion-list>标签包裹的内容.对照页面看.果然有修改手势密码,关于,客服热线等一个个item.这样的item用list标签是最合适的.没毛病.里面就是用一个个div把头像和文字写到一排.然后设置了一个点击方法.
3. 继续往下看,在<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 模板文件.

1. templateUrl:'setup.html'这个名字很熟悉就不多解释了.就是我刚刚分析的HTML页面的文件名.
2. selector: 'page-setup'是一个公共组件,可以共用组件内的样式,逻辑,等所有内容.

• 下面看下SetupPage类里面有哪些东西.

1. 定义页面所需的变量 : currentStaff: any;看名字理解为当前的人员信息,类型为any
2. 定义页面所需的变量 : selectedStaff: any;看名字理解为选择的人员信息,类型为any
3. constructor页面初始化的时候注入依赖,依赖里面有一些下面要用到的方法.
4. toProfile,changePassword等方法的注释介绍的很清楚了.是用来做什么的.这里说一下this.navCtrl.push的意思是页面跳转.里面的两个参数:一是跳转的页面路由二是带过去的参数.this.navCtrl就是刚刚注入的NavController依赖,this.navCtrl.push的.push就是NavController里面的方法.
5. 修改手势密码的方法里面用到了一个方法叫做this.modalCtrl.create是用来在页面上层浮现一个model.传参也是两个参数,一个页面路由一个传递的参数.
6. 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官网