移动应用开发笔记2

 开始前的准备

一、

创建空模板   进入项目目录，ionic  serve
用webstorm打开此项目

二、

home page HTML      page.ts
spec.ts是测试用的  可以删除
删除tlink.json 定义关于格式上的要求如空格 tab等，双向绑定
三个文件构成一个Component 

home.page.html中的代码如下：

<ion-header>
  <ion-toolbar>
    <ion-title>
      我的第一个app
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding ion-text-center">
    <ion-text style="font-size:3rem">{{delayTime}}</ion-text>
    <ion-range color="danger" pin="true" [(ngModel)]="delayTime"></ion-range>
    <ion-button (click)="start()" [disabled]="running" >开始</ion-button>
    <ion-button (click)="stop()" color="danger" [disabled]="!running">停止</ion-button>

    <p>上面是一个声音控制器</p>

  </div>
</ion-content>

home.page.ts中的代码如下：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  delayTime:number = 10;
  timer =null;
  running=false;
  start():void{
    if(this.delayTime==100) return;//等于100的时候开始也没用
    if(this.running==true) return;
    this.running=true;
  this.timer=setInterval(
      ()=>this.tick(),//这里有一个坑，handler和timeout不能自己输入，输入后面的会自动跳出来，哈哈 神奇吧
      1000
  );
}
  stop():void{
    if(this.running==false) return;
    this.running=false;
    clearInterval(this.timer);
}
tick(){
    this.delayTime++
  if(this.delayTime==100){
    clearInterval(this.timer);
  }
}
}