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((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((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"; } }