根据我的使用情况,我想要一种可以区分 native
和 browser
平台的工具。也就是说,我的应用程序是在浏览器还是本地移动设备上运行。这是我设计的服务:
import { Injectable } from '@angular/core';
import {Platform} from '@ionic/angular';
type CurrentPlatform = 'browser' | 'native';
@Injectable({
providedIn: 'root'
})
export class CurrentPlatformService {
private _currentPlatform: CurrentPlatform;
constructor(private platform: Platform) {
this.setCurrentPlatform();
}
get currentPlatform() {
return this._currentPlatform;
}
isNative() {
return this._currentPlatform === 'native';
}
isBrowser() {
return this._currentPlatform === 'browser';
}
private setCurrentPlatform() {
// Are we on mobile platform? Yes if platform is ios or android, but not desktop or mobileweb, no otherwise
if (
this.platform.is('ios')
|| this.platform.is('android')
&& !( this.platform.is('desktop') || this.platform.is('mobileweb') ) ) {
this._currentPlatform = 'mobile';
} else {
this._currentPlatform = 'browser';
}
}
}
目前Ionic 4支持平台检测。以下代码适用于我。
import { Platform } from '@ionic/angular';
...
constructor(private platform: Platform) {}
...
ngOnInit() {
this.platform.ready().then(() => {
if (this.platform.is('android')) {
console.log('android');
} else if (this.platform.is('ios')) {
console.log('ios');
} else {
//fallback to browser APIs or
console.log('The platform is not supported');
}
}}
public isDesktop() {
let platforms = this.plt.platforms();
if(platforms[0] == "core" || platforms[0] == "mobileweb") {
return true;
} else {
return false;
}
}
Ionic-4平台特定值
前往- node_modules@ionic\angular\dist\providers\platform.d.ts
Platform Name | Description |
* | android | on a device running Android. |
* | cordova | on a device running Cordova. |
* | ios | on a device running iOS. |
* | ipad | on an iPad device. |
* | iphone | on an iPhone device. |
* | phablet | on a phablet device. |
* | tablet | on a tablet device. |
* | electron | in Electron on a desktop device. |
* | pwa | as a PWA app. |
* | mobile | on a mobile device. |
* | desktop | on a desktop device. |
* | hybrid | is a cordova or capacitor app. |
import {Device} from '@ionic-native/device/ngx'
只需将它添加到您的app.modules中,并在需要找到它的任何地方运行this.device.platform,以给出一个想法,从这个简单的代码在Web和APK上的输出
console.log(this.platform.platforms());
console.log(this.device.platform);
is this:
Running on web (desktop and mobile)
["android", "phablet", "cordova", "mobile", "hybrid"]
browser
Running android local (apk)
["android", "cordova", "desktop", "hybrid"]
Android
只需要这样做: 首先导入
import {Platform } from 'ionic-angular';
// >> Then init the platform like this:
private platform: Platform,
if(this.platform.is('ios')==true){
//ios PlatForm
}else{
//Android PlatForm
}
如果您在 Cordova 中使用 Ionic,获取平台的最准确方法是从 window 对象
获取 cordova.platformId
。请参见以下内容:
在类组件之外声明窗口
declare let window: any
然后使用下面的代码检查平台:
// 桌面和移动(iOS、Android 和 Windows)浏览器平台
const isBrowserPlatform = window.cordova.platformId === 'browser'
// iOS 平台
const isIOSPlatform = window.cordova.platformId === 'ios'
// Android 平台
const isAndroidPlatform = window.cordova.platformId === 'android'
如果要检测 Web 平台,您应该使用 Bowser。我在 Ionic 4 中使用它来检测浏览器平台,即它是 Safari 还是 Chrome。
步骤 1:您需要在项目中安装 Bowser。
npm install bowser@2.7.0 --save-exact
步骤2:然后您需要在想要使用它的.ts页面中导入它。假设是home.ts
import Bowser from "bowser";
步骤3:然后您需要编写登录以检查浏览器平台,放在home.ts的一个函数中。
checkBrowserPlatform() {
const browser = Bowser.getParser(window.navigator.userAgent);
const browserName = browser.getBrowserName();
console.log(browserName);
}
Ionic 4 / Capacitor
我已经编写了一个类似于以下的服务:
detect-platform.service.ts
import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { find } from 'lodash';
@Injectable({
providedIn: 'root'
})
export class DetectPlatformService {
isDevice: boolean = false;
constructor(
private platform: Platform, ) { }
setPlatform(): void {
const platforms: string[] = this.platform.platforms();
const platform: string = find(platforms, (p: string) => {
return p === 'capacitor';
});
this.isDevice = platform ? true : false;
}
}
注意:由于我使用Ionic 4/Capacitor
,如果在设备
上运行,则返回true
,否则返回false
。