uniapp微信小程序获取屏幕宽高

Posted 走出半生的少年

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uniapp微信小程序获取屏幕宽高相关的知识,希望对你有一定的参考价值。

uniapp开发微信小程序的时候,有时候去调整样式

你需要适配各种手机屏幕,使用,你的样式宽高就不能使用rpx  

有的朋友觉得可以使用vw  vh  %   是的,当然可以

但是要让你的元素,宽高,比如50%再去加上20rpx  怎么做

所以这时候就要去获取不同手机页面屏幕的宽高

如何获取手机屏幕宽高

1.使用uni.getWindowInfo()

	        // 获取窗口信息
			let getWindowInfo = uni.getWindowInfo()
			console.log(getWindowInfo.screenHeight);//屏幕高度
			console.log(getWindowInfo.screenWidth);//屏幕宽度
			console.log(getWindowInfo.windowHeight);//可操作页面高度
			console.log(getWindowInfo.windowWidth);//可操作页面宽度
			console.log(getWindowInfo);
			console.log('获取窗口信息');

2.使用uni.getSystemInfo()

		    // 系统信息的概念
			uni.getSystemInfo(
				success: res => 
					console.log(res);
					console.log(res.screenHeight);//屏幕高度
					console.log(res.screenWidth);//屏幕宽度
					console.log(res.windowHeight);//可操作页面高度
					console.log(res.windowWidth);//可操作页面宽度
				
			)

当然除了需要手机屏幕和可操作区域宽高外,有时候,你还需要去获取手机的型号

使用  uni.getDeviceInfo()

			let getDeviceInfo = uni.getDeviceInfo()
			// 获取设备基础信息
			console.log(getDeviceInfo);
			console.log('获取设备基础信息');

注意

这些方法可以获取到的属性并不只能获取宽高

还可以去获取很多你需要的属性

我在这里着重的写一下获取宽高的

uniapp 微信小程序授权登录getUserInfo获取不到用户的昵称和头像

参考技术A 但如今,却只能得到一个缺省的灰色头像,和nickname = “微信用户”,两个数据,其它的年龄以及地区等什么都没有,更别提授权弹出框了

查看官网如下图才知道API更新了:

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html

https://developers.weixin.qq.com/community/develop/doc/000aee91a98d206bc6dbe722b51801?blockType=1

以上是关于uniapp微信小程序获取屏幕宽高的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序转发分享,封面图片自定义5:4

uni-app 微信小程序获取手机号并解密

uniapp如何更新微信小程序登录接口

uniapp 微信小程序授权登录getUserInfo获取不到用户的昵称和头像

uniapp在微信小程序获取用户信息和openId

微信小程序获取屏幕高度和宽度,并在视图层使用