如何使用 Ionic 4 检测平台

Posted 2023-03-13

【中文标题】如何使用 Ionic 4 检测平台

【英文标题】：How to detect platform using Ionic 4

【发布时间】：2019-01-19 20:09:08

【问题描述】：

如何使用 Ionic 4 检测浏览器和移动网络平台，因为当我在桌面浏览器中尝试使用以下代码时，它并未处于 'core' 状态。

if (this.platform.is('core')) 
    alert('core platform');
   else 
    alert('something else');
  

当我在 chrome 开发人员工具中进行调试时，它显示 'android' 平台，如下图所示。

谁能帮我在 Ionic 4 中检测平台，或者有什么替代方法？

【问题讨论】：

你能发布完整的代码吗？

@PradnyaSinalkar 我已经编辑了我的问题。

桌面浏览器平台？能举个例子吗？

我想问如何使用 Ionic 4 检测核心 OR 浏览器平台？

【参考方案1】：

以下链接可能对您有所帮助：https://forum.ionicframework.com/t/how-to-determine-if-browser-or-app/89149/16

或者你可以使用以下方法：

public isDesktop() 
    let platforms = this.plt.platforms();
    if(platforms[0] == "core" || platforms[0] == "mobileweb") 
        return true;
     else 
        return false;
    

【讨论】：

感谢您的回答。您能告诉我如何在 Ionic 4 中检测“mobileweb”平台吗？

调试时，我在浏览器中获得了“android”平台。我已经用快照更新了我的问题。

您正在连接安卓设备，然后在检查模式下调试？

您应该提到您的代码是针对 IONIC 3 的，并且您提供的链接指向 IONIC 3+4

你到底是怎么在 IONIC 4 中导入这个的？

【参考方案2】：

您使用的逻辑是正确的逻辑。

问题在于 ionic 4，它返回错误的值。

Bug 已发布在 ionic repo 上：https://github.com/ionic-team/ionic/issues/15165

与以 ['android'] 形式出现的平台相关的另一个问题也是一个错误，此处也已报告：https://github.com/ionic-team/ionic/issues/15051

【参考方案3】：

目前 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');
             
      

【讨论】：

你是怎么导入的？

我已经添加了示例代码，你可以参考上面的。

【参考方案4】：

Ionic-4 平台特定值

goto-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.     |

【参考方案5】：

要检测网络平台，您应该使用 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);
  

通过调用checkBrowserPlatform()可以知道当前浏览器的名字。

【参考方案6】：

对于我的用例，我想要区分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';
    
  

【讨论】：

原生和浏览器有什么区别？谢谢

【参考方案7】：

离子 4 / 电容器

我写过这样的服务：

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，所以如果它在device 上，它会给出true，否则false。

【参考方案8】：

如果有人还在 ionic4/cordova 上苦苦挣扎，我使用

解决了它

import Device from '@ionic-native/device/ngx'

只需将其添加到您的 app.modules 中，然后在需要查找的任何地方运行 this.device.platform 即可，给出一个想法，此简单代码在 web 和 apk 上的输出

console.log(this.platform.platforms());
console.log(this.device.platform);

这是：

Running on web (desktop and mobile)
["android", "phablet", "cordova", "mobile", "hybrid"]
browser

Running android local (apk)
["android", "cordova", "desktop", "hybrid"]
Android

现在我可以正确使用浏览器或移动设备的插件了，在我的例子中是图像加载和裁剪。

完整的解释可以在https://www.damirscorner.com/blog/posts/20171124-DetectingWhereIonicAppIsRunning.html找到

【参考方案9】：

只需这样做： 首次导入

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