How does uniapp distinguish between Apple and Android?

In front-end development, it is often necessary to handle different operating systems differently, which requires us to judge the operating system of the current device. In the cross-platform development framework uniapp, how to determine whether the current device is Apple or Android? Let me give you a brief introduction below.

First of all, we need to understand how uniapp is cross-platform. uniapp is developed based on vue.js and adopts excellent front-end design ideas and technologies. On the basis of vue.js, some cross-platform extensions are added to form a set of UI framework that can be used across platforms. Uniapp developers only need to develop in one set of codes to generate running codes for various platforms (including but not limited to WeChat mini-programs, Alipay mini-programs, H5, App, etc.) at the same time.

Then let’s introduce how to determine the operating system of the current device in uniapp.

1. Use ua to determine
ua refers to User Agent, which is part of the browser's HTTP request header and is used to transmit information about its own browser and operating system to the server. In uniapp, we can obtain the current device information through uni.getSystemInfoSync(), including the device's UA information. We can match the UA information through regular expressions to infer the operating system of the current device.

The code is implemented as follows:

let ua = uni.getSystemInfoSync().platform;
if(/ios/i.test(ua)){
  // 苹果
} else if(/android/i.test(ua)){
  // 安卓
} else {
  // 其他
}

2. Use the API provided by uni-app

In uniapp, there is also a uni.getSystemInfoSync() The API can directly obtain the manufacturer and operating system information of the current device. We only need to judge the value of platform to determine the operating system of the current device.

The code is implemented as follows:

let platform = uni.getSystemInfoSync().platform;
if(platform === 'ios'){
  // 苹果
} else if(platform === 'android'){
  // 安卓
} else {
  // 其他
}

3. Use the $platform parameter of uniapp

In uniapp, there is a $platform global parameter, which will be based on the operating system of the current device. Automatically changes, we can directly judge the value of this parameter to determine the operating system of the current device.

The code is implemented as follows:

let platform = uni.getStorageSync('$platform');
if(platform === 'ios'){
  // 苹果
} else if(platform === 'android'){
  // 安卓
}

It should be noted that if it is currently running on a platform other than the WeChat applet, the $platform parameter may be an empty string.

Summary:

The above are the three methods to determine the current device operating system in uniapp. We can choose the appropriate method to use according to our actual situation. When developing applications for different platforms, different adaptation processes for different operating systems can help us better optimize the user experience and improve the stability and usability of the application.

The above is the detailed content of How does uniapp distinguish between Apple and Android?. For more information, please follow other related articles on the PHP Chinese website!