IONIC APP 开发记录（基于Angular）持续更新

IONIC APP 开发记录 1、IONIC背景及组件自定义颜色2、ion-tabs3、ion-alert4、ionic 原生 api —— Network5、Subject（Angular）6、location.href（Angular）

---

1、IONIC背景及组件自定义颜色

ionic 的样式文件中有9个默认的颜色主题：
primary、secondary、tertiary、success、
warning、danger、dark、medium、light

因项目原因现在需要提供新的颜色主题

文件位置：src -> assets -> theme -> variables.scss

//示例
:root {
	  .ion-color-basics {
	    --ion-color-base: linear-gradient(180deg, #050D19 0%, #2A679D 100%); //背景颜色
	    --ion-color-base-rgb: linear-gradient(180deg, #050D19 0%, #2A679D 100%);
	    --ion-color-contrast: linear-gradient(180deg, #050D19 0%, #2A679D 100%);//参照颜色，就是不选中的时候的颜色
	    --ion-color-contrast-rgb: linear-gradient(180deg, #050D19 0%, #2A679D 100%);
	    --ion-color-shade: linear-gradient(180deg, #050D19 0%, #2A679D 100%);
	    --ion-color-tint: linear-gradient(180deg, #050D19 0%, #2A679D 100%);
	  }
  }

使用：用于ionic 标签的 color 属性

 
 <ion-content color="basics">ion-content>

2、ion-tabs

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="schedule">
      <ion-icon name="calendar">ion-icon>
      <ion-label>Scheduleion-label>
    ion-tab-button>
  ion-tab-bar>
ion-tabs>

import { Routes } from '@angular/router';
import { TabsPage } from './tabs-page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'schedule',
        children: [
          {
            path: '',
            loadChildren: '../schedule/schedule.module#ScheduleModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/app/tabs/schedule',
        pathMatch: 'full'
      }
    ]
  }
];

slot属性表示tab位于页面上方或下方当与 Angular 的路由器一起使用时，ion-tab-button 的 tab 属性是对路由路径的引用ionic 自带方法
onTabsDidChange ：当导航完成转换到新组件时执行
ionTabsWillChange：当导航即将转换到新组件时执行

---

3、ion-alert

//示例：
import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';

@Component({
  selector: 'alert-example',
  templateUrl: 'alert-example.html',
  styleUrls: ['./alert-example.css'],
})
export class AlertExample {

  constructor(public alertController: AlertController) {}

  async presentAlert() {
    const alert = await this.alertController.create({
      cssClass: 'my-custom-class',
      header: 'Alert',
      subHeader: 'Subtitle',
      message: 'This is an alert message.',
      buttons: [
        {
          text: 'Cancel',
          role: 'cancel',
          cssClass: 'secondary',
          id: 'cancel-button',
          handler: (blah) => {
            console.log('Confirm Cancel: blah');
          }
        }, {
          text: 'Okay',
          id: 'confirm-button',
          handler: () => {
            console.log('Confirm Okay');
          }
        }
      ]
    });

    await alert.present();
	}
}

d出框样式在全局样式文件 global.scss 中修改，在 cssClass 属性后使用定义的类名

---

4、ionic 原生 api —— Network

使用前先手动安装插件，命令如下
npm install cordova-plugin-network-information
npm install @awesome-cordova-plugins/network

    this.network.onDisconnect().subscribe(async () => {
      const alert = await this.alertController.create({
        header: '提示',
        message: '网络已断开连接',
        cssClass: 'my-custom-class',
        buttons: [
          { text: '确认' },
        ],
      });
      await alert.present();
    });
    
    this.network.onConnect().subscribe(async () => {
      const alert = await this.alertController.create({
        header: '提示',
        message: '网络已重新连接',
        cssClass: 'my-custom-class',
        buttons: [
          { text: '确认' },
        ],
      });
      await alert.present();
    });
  }

onDisconnect()：设备识别到网络断开连接时触发
onConnect()：设备识别到网络连接成功时触发

---

5、Subject（Angular）

Subject	发射行为
AsyncSubject	不论订阅发生在什么时候，只会发射最后一个数据
BehaviorSubject	发送订阅之前一个数据和订阅之后的全部数据
ReplaySubject	不论订阅发生在什么时候，都发射全部数据
PublishSubject	发送订阅之后全部数据

---

6、location.href（Angular） 获取当前页网址

---

最后更新日：
小袁笔记 ———— 2022-05-11