smart-screen-demo-web/src/services/framework/platform-service.ts

import { $commonService } from "@/services/framework/dependency-injection-service";
import { obj } from "@/types";

export const PlatformService = {
  install(app: any) {
    app.config.globalProperties.$platformService = new PlatformServiceClass();
    $commonService.$dependencyInjectionService.provideFun(
      "$platformService",
      app.config.globalProperties.$platformService
    );
  },
};

class PlatformServiceClass {
  platformInfo: any;
  deviceInfo: any;

  constructor() {
    // // 调试代码
    // console.log("this.getBrowserInfo", this.getBrowserInfo());
    this.init();
  }

  private init() {
    this.getDeviceInfo();
  }

  ////////////////////////////////////////////////////////////////////////////////////////////////
  private getBrowserInfo() {
    // console.log("navigator.userAgent==========",navigator.userAgent);
    return {
      userAgent: navigator.userAgent,

      // 渲染屏幕宽高等信息
      deviceWidth: window.screen.width,
      deviceHeight: window.screen.height,
      screenWidth: window.innerWidth,
      screenHeight: window.innerHeight,
      devicePixelRatio: window.devicePixelRatio, // 缩放比例

      // 运行平台
      isAndroid: this.getIsAndroid(),
      isIOS: this.getIsIos(),
      isWeb: !this.getIsAndroid() && !this.getIsIos(),

      // 手机Native 插件支持
      hasNative: this.hasNative(),
    };
  }

  // ios 判断
  private getIsIos() {
    return (
      navigator.userAgent.toLowerCase().includes("iphone") ||
      navigator.userAgent.toLowerCase().includes("ipad")
    );
    /*    return navigator.userAgent.toLowerCase().includes("safari")
          && !navigator.userAgent.toLowerCase().includes("chrome");*/
  }

  private getIsAndroid() {
    return navigator.userAgent.toLowerCase().includes("android");
  }

  // 判断是否有native
  private hasNative() {
    if (!window.native.nativeApi && !window.webkit) {
      return false;
    }
    return true;
  }

  //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // 获取硬件信息
  async getDeviceInfo() {
    this.platformInfo = this.getBrowserInfo();

    console.warn("this.platformInfo==========", this.platformInfo);

    if (this.platformInfo.isIOS) {
      // @ts-ignore
      window.document.querySelector("body").classList.add("is-ios");
    }

    if (this.platformInfo.isAndroid) {
      // @ts-ignore
      window.document.querySelector("body").classList.add("is-android");
      // console.log("this.platformInfo.safeAreaInsetTop + \"px\"",this.platformInfo.safeAreaInsetTop + "px")

      const value = await this.getSafeAreaInsetTop();
      document.body.style.setProperty(
        "--is-android-safe-area-inset-top",
        value + "px"
      );
    }
  }

  // 返回px值
  async getSafeAreaInsetTop() {
    return new Promise<any>((resolve) => {
      if (this.platformInfo.isIOS) {
        const value = getComputedStyle(document.documentElement)
          .getPropertyValue("--safe-area-inset-top0")
          .replace("px", "");
        resolve(value);
      } else if (this.platformInfo.isAndroid) {
        $commonService.$jsBridgeService.device(null, (result: any) => {
          // console.log("result.data.data.statusBarHeight",result.data.data.statusBarHeight);
          resolve(
            +result.data.data.statusBarHeight /
              this.platformInfo.devicePixelRatio
          );
        });
      }
    });
  }

  getSafeAreaInsetBottom() {
    return new Promise<any>((resolve) => {
      if (this.platformInfo.isIOS) {
        const value = getComputedStyle(document.documentElement)
          .getPropertyValue("--safe-area-inset-bottom0")
          .replace("px", "");
        resolve(value);
      }
      resolve(0);
    });
  }

  /////////////////////////////////////////////////////////////////////////////////////////
  // 判断当前运行平台 todo 可考虑使用最新的 this.platformInfo
  getAppPlatForm(): "Android" | "IOS" | "Web" {
    console.log(navigator.userAgent);

    const isAndroid = navigator.userAgent.match(/android/gi); //判断是否是 android终端
    const isIOS = !navigator.userAgent.match(/\(i[^;]+;( U;)?Mac OS X/); //判断是否是 iOS终端
    // console.log("是否是Android：" + isAndroid); //true,false
    // console.log("是否是iOS：" + isIOS);

    if (isAndroid) {
      return "Android";
    } else if (isIOS) {
      return "IOS";
    }

    return "Web";
  }
}