首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【uniapp】 获取系统信息

【uniapp】 获取系统信息

作者头像
德宏大魔王
发布2023-08-08 14:48:06
发布2023-08-08 14:48:06
88300
代码可运行
举报
文章被收录于专栏:cloud stdiocloud stdio
运行总次数:0
代码可运行

写在前面

上节中我们讲到小程序的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

调用代码示例

代码语言:javascript
代码运行次数:0
运行
复制
uni.getSystemInfo({
	success: function (res) {
		console.log(res.appName)
	}
});

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

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

代码语言:javascript
代码运行次数:0
运行
复制
<view style="height: 10rpx;"></view>
<button type="primary" style="width: 500rpx;" @click="get_system">获取系统信息</button>

第二步,在methods中写入js代码

代码语言:javascript
代码运行次数:0
运行
复制
		get_system:function(){
			console.log("获取系统信息");
			uni.getSystemInfo({
				success(res) {
					console.log(res);
				}
			})
		},

第三步,编译后点击查看控制栏输出的信息

看一下全部的信息

代码语言:javascript
代码运行次数:0
运行
复制
{
	"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直接使用即可

代码语言:javascript
代码运行次数:0
运行
复制
			console.log("获取系统信息");
			var data=uni.getSystemInfoSync()
			console.log(data);

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

代码语言:javascript
代码运行次数:0
运行
复制
{
	"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
}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-08-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 写在前面
  • 系统信息的概念
    • uni.getSystemInfo
    • uni.getSystemInfoSync
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档