【uniapp】获取系统信息

悠悠 2023-09-28 21:33 1阅读 0赞

#### 目录 ####

*   *  写在前面
     *  系统信息的概念
     *   *  uni.getSystemInfo
         *  uni.getSystemInfoSync

### 写在前面 ###

上节中我们讲到小程序的request请求以及上传文件操作，掌握了小程序基本的控件使用，这节我们要来探讨小程序获取系统信息，识别当前环境

### 系统信息的概念 ###

uni-app提供了异步(**`uni.getSystemInfo`**)和同步((**`uni.getSystemInfoSync`**)的2个API获取系统信息。

系统信息返回的内容非常多，各操作系统、各家小程序、各浏览器对它们的定义也不相同。uni-app里重新梳理了这些概念，同时为了向下兼容也保留了这些平台原来的概念，但不推荐使用。

按照运行环境层级排序，从底层向上，uni-app有6个概念：

`device：运行应用的设备，如iphone、huawei`  
`os：设备的操作系统，如 ios、andriod、windows、mac、linux`  
`rom：基于操作系统的定制，Android系统特有概念，如miui、鸿蒙`  
`host：运行应用的宿主程序，即OS和应用之间的运行环境，如浏览器、微信等小程序宿主、集成uniMPSDK的App。uni-app直接开发的app没有host概念`  
`uni：uni-app框架相关的信息，如uni-app框架的编译器版本、运行时版本`  
`app：开发者的应用相关的信息，如应用名称、版本`

#### uni.getSystemInfo ####

**调用代码示例**

uni.getSystemInfo({
        
    	success: function (res) {
        
    		console.log(res.appName)
    	}
    });

官方给的文档一大堆，我们直接进行演示

第一步，在新建的uniapp项目中的index.vue文件里面增加一个按钮（通过点击事件触发getSystemInfo接口）  
代码：

<view style="height: 10rpx;"></view>
    <button type="primary" style="width: 500rpx;" @click="get_system">获取系统信息</button>

![在这里插入图片描述][e12dbb8f8bd64083a13c4d6f42adce91.png]  
第二步，在methods中写入js代码

get_system:function(){
        
    			console.log("获取系统信息");
    			uni.getSystemInfo({
        
    				success(res) {
        
    					console.log(res);
    				}
    			})
    		},

第三步，编译后点击查看控制栏输出的信息  
![在这里插入图片描述][d803b6278ade483f9f453a992f581fb5.png]  
看一下全部的信息

{
        
    	"SDKVersion": "",
    	"appId": "__UNI__3FCF801",
    	"appLanguage": "zh-Hans",
    	"appName": "demo",
    	"appVersion": "1.0.0",
    	"appVersionCode": "100",
    	"browserName": "safari",
    	"browserVersion": "11.0",
    	"deviceId": "16612229772388048514",
    	"deviceModel": "iPhone",
    	"deviceOrientation": "portrait",
    	"devicePixelRatio": 2,
    	"deviceType": "phone",
    	"errMsg": "getSystemInfo:ok",
    	"hostLanguage": "zh-CN",
    	"hostName": "safari",
    	"hostVersion": "11.0",
    	"language": "zh-CN",
    	"model": "iPhone",
    	"osName": "ios",
    	"osVersion": "11.0",
    	"pixelRatio": 2,
    	"platform": "ios",
    	"safeArea": {
        
    		"bottom": 667,
    		"height": 667,
    		"left": 0,
    		"right": 375,
    		"top": 0,
    		"width": 375
    	},
    	"safeAreaInsets": {
        
    		"bottom": 0,
    		"left": 0,
    		"right": 0,
    		"top": 0
    	},
    	"screenHeight": 667,
    	"screenWidth": 375,
    	"statusBarHeight": 0,
    	"system": "iOS 11.0",
    	"ua": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1 HBuilderX",
    	"uniCompileVersion": "3.5.3",
    	"uniPlatform": "web",
    	"uniRuntimeVersion": "3.5.3",
    	"version": "",
    	"windowBottom": 0,
    	"windowHeight": 623,
    	"windowTop": 44,
    	"windowWidth": 375
    }

看到这里很多小伙伴会问这些参数有啥用？  
`可以用来识别安卓、苹果、pc端用户，如果在api接口能力不同的情况下，可以做分类处理`  
`可以识别当前屏幕宽度、高度用来渲染页面窗口`  
`等等`

#### uni.getSystemInfoSync ####

与getSystemInfo不同的是

getSystemInfoSync直接使用即可

console.log("获取系统信息");
    			var data=uni.getSystemInfoSync()
    			console.log(data);

返回的数据一样，需要开发者自己处理

{
        
    	"SDKVersion": "",
    	"appId": "__UNI__3FCF801",
    	"appLanguage": "zh-Hans",
    	"appName": "demo",
    	"appVersion": "1.0.0",
    	"appVersionCode": "100",
    	"browserName": "safari",
    	"browserVersion": "11.0",
    	"deviceId": "16612229772388048514",
    	"deviceModel": "iPhone",
    	"deviceOrientation": "portrait",
    	"devicePixelRatio": 2,
    	"deviceType": "phone",
    	"hostLanguage": "zh-CN",
    	"hostName": "safari",
    	"hostVersion": "11.0",
    	"language": "zh-CN",
    	"model": "iPhone",
    	"osName": "ios",
    	"osVersion": "11.0",
    	"pixelRatio": 2,
    	"platform": "ios",
    	"safeArea": {
        
    		"bottom": 667,
    		"height": 667,
    		"left": 0,
    		"right": 375,
    		"top": 0,
    		"width": 375
    	},
    	"safeAreaInsets": {
        
    		"bottom": 0,
    		"left": 0,
    		"right": 0,
    		"top": 0
    	},
    	"screenHeight": 667,
    	"screenWidth": 375,
    	"statusBarHeight": 0,
    	"system": "iOS 11.0",
    	"ua": "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1 HBuilderX",
    	"uniCompileVersion": "3.5.3",
    	"uniPlatform": "web",
    	"uniRuntimeVersion": "3.5.3",
    	"version": "",
    	"windowBottom": 0,
    	"windowHeight": 623,
    	"windowTop": 44,
    	"windowWidth": 375
    }

[e12dbb8f8bd64083a13c4d6f42adce91.png]: https://img-blog.csdnimg.cn/e12dbb8f8bd64083a13c4d6f42adce91.png
[d803b6278ade483f9f453a992f581fb5.png]: https://img-blog.csdnimg.cn/d803b6278ade483f9f453a992f581fb5.png