Ionic Framework学习(二)

1.Utilities
(1)Config 配置
用法:
①全局:        

import { IonicModule } from '@ionic/angular';
    
    @NgModule({
      ...
      imports: [
        BrowserModule,
        IonicModule.forRoot({
          rippleEffect: false,
          mode: 'md'
        }),
        AppRoutingModule
      ],
      ...
    })

②定制动画   

 import { IonicModule } from '@ionic/angular';

    @NgModule({
      ...
      imports: [
        BrowserModule,
        IonicModule.forRoot({
          toastEnter: (AnimationC: Animation, baseEl: ShadowRoot, position: string): Promise<Animation> => {
            const baseAnimation = new AnimationC();

            const wrapperAnimation = new AnimationC();

            const hostEl = (baseEl.host || baseEl) as HTMLElement;
            const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;

            wrapperAnimation.addElement(wrapperEl);

            const bottom = `calc(8px + var(--ion-safe-area-bottom, 0px))`;
            const top = `calc(8px + var(--ion-safe-area-top, 0px))`;

            switch (position) {
              case 'top':
                wrapperEl.style.top = top;
                wrapperEl.style.opacity = 1;
                wrapperAnimation.fromTo('transform', `translateY(-${hostEl.clientHeight}px)`, 'translateY(10px)')
                break;
              case 'middle':
                const topPosition = Math.floor(
                  hostEl.clientHeight / 2 - wrapperEl.clientHeight / 2
                );
                wrapperEl.style.top = `${topPosition}px`;
                wrapperAnimation.fromTo('opacity', 0.01, 1);
                break;
              default:
                wrapperEl.style.bottom = bottom;
                wrapperAnimation.fromTo('opacity', 0.01, 1);
                break;
            }
            return Promise.resolve(baseAnimation
              .addElement(hostEl)
              .easing('cubic-bezier(.36,.66,.04,1)')
              .duration(400)
              .add(wrapperAnimation));
          },
        }),
        AppRoutingModule
      ],
      ...
    })

按组件    

import { Component } from '@angular/core';
    import { Config } from '@ionic/angular';
    @Component({...})
    export class HomePage {
      constructor(private config: Config) {
        const text = this.config.get('backButtonText');
        this.config.set('backButtonIcon', 'home');
      }
    }

配置选项
Config                    Type                Description
actionSheetEnter        AnimationBuilder    为所有人提供自定义输入动画ion-action-sheet，覆盖默认的“动画”。
actionSheetLeave        AnimationBuilder    为所有人提供自定义假动画ion-action-sheet，覆盖默认的“动画”。
alertEnter                AnimationBuilder    为所有人提供自定义输入动画ion-alert，覆盖默认的“动画”。
alertLeave                AnimationBuilder    为所有人提供自定义假动画ion-alert，覆盖默认的“动画”。
animated                boolean                如果true，Ionic将启用应用程序中的所有动画和过渡。
backButtonIcon            string                覆盖所有<ion-back-button>组件中的默认图标。
backButtonText            string                覆盖所有<ion-back-button>组件中的默认文本。
hardwareBackButton        boolean                如果true，Ionic将响应Android设备中的硬件后退按钮。
infiniteLoadingSpinner    SpinnerTypes        覆盖所有<ion-infinite-scroll-content>组件中的默认微调器类型.
loadingEnter            AnimationBuilder    为所有人提供自定义输入动画ion-loading，覆盖默认的“动画”。
loadingLeave            AnimationBuilder    为所有人提供自定义假动画ion-loading，覆盖默认的“动画”。
loadingSpinner            SpinnerTypes        覆盖所有ion-loading叠加层的默认微调器。
menuIcon                string                覆盖所有<ion-menu-button>组件中的默认图标。
menuType                string                覆盖所有<ion-menu>组件的默认菜单类型。
modalEnter                AnimationBuilder    为所有人提供自定义输入动画ion-modal，覆盖默认的“动画”。
modalLeave                AnimationBuilder    为所有人提供自定义假动画ion-modal，覆盖默认的“动画”。
mode                    Mode                该模式确定要用于整个应用程序的平台样式。
navAnimation            AnimationBuilder    覆盖所有应用程序ion-nav和ion-router-outlet整个应用程序的默认“动画” 。
pickerEnter                AnimationBuilder    为所有人提供自定义输入动画ion-picker，覆盖默认的“动画”。
pickerLeave                AnimationBuilder    为所有人提供自定义假动画ion-picker，覆盖默认的“动画”。
popoverEnter            AnimationBuilder    为所有人提供自定义输入动画ion-popover，覆盖默认的“动画”。
popoverLeave            AnimationBuilder    为所有人提供自定义假动画ion-popover，覆盖默认的“动画”。
refreshingIcon            string                覆盖所有<ion-refresh-content>组件中的默认图标。
refreshingSpinner        SpinnerTypes        覆盖所有<ion-refresh-content>组件中的默认微调器类型。
spinner                    SpinnerTypes        覆盖所有<ion-spinner>组件中的默认微调器.
statusTap                boolean                如果true单击或点击状态栏将导致内容滚动到顶部。
swipeBackEnabled        boolean                如果true，Ionic将在整个应用程序中启用“向后滑动”手势。
tabButtonLayout            TabButtonLayout        覆盖ion-bar-button整个应用程序中的所有默认“布局” 。
toastEnter                AnimationBuilder    为所有人提供自定义输入动画ion-toast，覆盖默认的“动画”。
toastLeave                AnimationBuilder    为所有人提供自定义假动画ion-toast，覆盖默认的“动画”。(2).Platform 平台
用法:    

import { Platform } from '@ionic/angular';

    @Component({...})
    export MyPage {
      constructor(public plt: Platform) {

      }
    }

方法:
is(platformName: Platforms) => boolean
根据用户所在的平台，is(platformName)将返回true或false。注意:同一个应用可以为多个平台名称返回true.
platforms() => string[]
根据您所使用的设备，platforms可以返回多个值。每个可能的值都是平台的层次结构
ready() => Promise<string>
在平台准备好并且可以调用本机功能时返回承诺。如果应用程序在Web浏览器中运行，那么当DOM准备就绪时，promise将解决。
isRTL() => boolean
如果此应用程序使用从右向左的语言方向，则返回true
isLandscape() => boolean
如果应用处于横向模式，则返回true。
isPortrait() => boolean
如果应用处于纵向模式，则返回true。
width() => number
使用获取平台视口的宽度window.innerWidth。
height() => number
使用获取平台视口的高度window.innerHeight。    
url() => string
获取当前网址。    
testUserAgent(expression: string) => boolean
如果表达式包含在用户代理字符串中，则返回true。    

2.渐进式Web应用程序
(1)使应用程序成为PWA(添加软件包)    

ng add @angular/pwa

添加此包后，运行ionic build --prod该www目录即可作为PWA进行部署。
注:默认情况下，该@angular/pwa软件包附带了应用程序图标的Angular徽标。请务必更新清单以使用正确的应用名称，并替换图标。
如果将应用程序部署到其他渠道（如Cordova或Electron），则可以"serviceWorker": true从angular.json文件中删除该标志。可以通过运行生成服务工作者：

ionic build --prod --service-worker

(2)Firebase 
安装:   

 npm install -g firebase-tools

安装Firebase CLI后firebase init，在项目中运行。这将生成firebase.json配置文件并配置应用程序以进行部署。
最后需要的是确保正确设置缓存标头。为此，将以下代码段添加firebase.json到托管属性的文件中：   

 "headers": [
      {
        "source": "/build/app/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "public, max-age=31536000"
          }
        ]
      },
      {
        "source": "sw.js",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache"
          }
        ]
      }
    ]

部署:    

firebase deploy