小程序 wx.getSystemInfoSync 获取 windowHeight 不准确的问题
如果本文对你有用,请爱心点个赞,提高排名,帮助更多的人。谢谢大家!❤
如果解决不了,可以在文末进群交流。
wx.getSystemInfo(OBJECT)
获取系统信息。
OBJECT参数说明:
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| success | Function | 是 | 接口调用成功的回调 |
| fail | Function | 否 | 接口调用失败的回调函数 |
| complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success回调参数说明:
| 参数 | 说明 | 最低版本 |
|---|---|---|
| brand | 手机品牌 | 1.5.0 |
| model | 手机型号 | |
| pixelRatio | 设备像素比 | |
| screenWidth | 屏幕宽度 | 1.1.0 |
| screenHeight | 屏幕高度 | 1.1.0 |
| windowWidth | 可使用窗口宽度 | |
| windowHeight | 可使用窗口高度 | |
| statusBarHeight | 状态栏的高度 | 1.9.0 |
| language | 微信设置的语言 | |
| version | 微信版本号 | |
| system | 操作系统版本 | |
| platform | 客户端平台 | |
| fontSizeSetting | 用户字体大小设置。以“我-设置-通用-字体大小”中的设置为准,单位:px | 1.5.0 |
| SDKVersion | 客户端基础库版本 | 1.1.0 |
示例代码:
wx.getSystemInfo({
success: function(res) {
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)
}
})
1. windowHeight 概念
可使用窗口高度,即:屏幕高度(
screenHeight) - 导航(tabbar)高度。
2. 存在问题
安卓设备下获取
windowHeight不能准确得到对应的高度,总是拿到屏幕高度。
3. 原因
(1)同步接口 wx.getSystemInfoSync 并不同步(猜测)
wx.getSystemInfoSync只是在页面初始化时提前计算。所以对于windowHeight这种需要进行功能判断的属性,应该使用异步接口,实时获取。
(2)wx.getSystemInfo 调用的时机不当
上面讲了
windowHeight的定义,所以这个值取决于tabbar是否存在。为了保证
tabbar显示后再进行取值,建议在生命周期的onReady钩子中调用接口wx.getSystemInfo。
4. 最终方案
在需要获取可使用窗口高度的对应js中, onReady 中调用wx.getSystemInfo;
小程序 wx.getSystemInfoSync 获取 windowHeight 不准确的问题的更多相关文章
- 小程序 wx.getSystemInfoSync 获取 windowHeight 问题
windowHeight 概念 可使用窗口高度,即:屏幕高度(screenHeight) - 导航(tabbar)高度 存在问题 安卓设备下获取 windowHeight 不能准确得到对应的高度,总是 ...
- 微信小程序wx.getLocation()获取经纬度及JavaScript SDK调用腾讯地图API获取某一类地址
简介 腾讯位置服务为微信小程序提供了基础的标点能力.线和圆的绘制接口等地图组件和位置展示.地图选点等地图API位置服务能力支持,使得开发者可以自由地实现自己的微信小程序产品. 在此基础上,腾讯位置服务 ...
- 小程序wx.getUserInfo获取用户信息方案介绍
问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本 API和组件 - - - - 背景 小程序一个比较重要的能力就是获取用户信息,也就是使用 wx.g ...
- 小程序wx.createInnerAudioContext()获取不到时长问题
最近在开发小程序中,需要用到音频播放功能.但在初始化时,使用InnerAudioContext.duration获取不到音频的时长. Page({ /** * 生命周期函数--监听页面初次渲染完成 * ...
- 微信小程序wx.login()获取openid,附:前端+后端代码
微信小程序开放了微信登录的api,无论是个人还是企业申请的小程序均可使用. 首先创建一个项目,把这些代码都清空,我们自己写! 然后,开始写了!首先index.wxml,写一个button用于发起登录 ...
- 微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- ***小程序wx.getUserInfo不能弹出授权窗口后的解决方案
微信更新api后,wx.getUserInfo在开发和体验版本都不能弹出授权窗口.微信文档说明: 注意:此接口有调整,使用该接口将不再出现授权弹窗,请使用 <button open-type=& ...
- 微信小程序案例:获取微信访问用户的openid
在微信开发项目中,获取openid是项目常遇的问题,本文通过主要讲解实现在微信小程序中如何获取用户的openid,案例实现非常简单 具体实现方法是通过登录接口获取登录凭证,然后通过request请求微 ...
- 【小程序+ thinkphp5】 获取微信运动数据
配置.请参看上篇文章.这里直接上代码 PHP 代码: //获取微信运动数据: public function test(){ $code = input("code"); $sig ...
随机推荐
- JBoss服务器的安装和使用(关联到IDEA)
1. 下载安装jboss服务器 wildfly-16.0.0.Final.zip(更名为wildfly了,选择合适的版本) 2. 解压,配置环境变量. JBOSS_HOME=D:\Program Fi ...
- String.format()详细用法
String.format()字符串常规类型格式化的两种重载方式 format(String format, Object… args) 新字符串使用本地语言环境,制定字符串格式和参数生成格式化的新字 ...
- docker卷挂载与容器内外互相拷贝数据
一.宿主机与容器的挂载 docker可以支持把一个宿主机上的目录挂载到镜像里.命令如下: docker run -it -v /mydownload:/download nginx:v1 /bin/b ...
- 必备Mysql命令
文章来源:https://macrozheng.github.io/mall-learning/#/reference/mysql 开发者必备Mysql命令 开发者必备Mysql常用命令,涵盖了数据定 ...
- [LeetCode] 204. Count Primes 计数质数
Description: Count the number of prime numbers less than a non-negative number, n click to show more ...
- 使用ObjectARX 2012向导生成的自定义实体类无法捕捉的问题解决方式
使用ObjectARX 2012自定实体向导的时候,获取捕捉点的重写函数的向导中模板有点问题, C:\Program Files (x86)\Autodesk\ObjectARX 2019 Wizar ...
- jquery on绑定事件叠加解决方法
jquery on绑定事件叠加解决方法 代码如下 <pre> $('.maoqiu').each(function () { var is_bind = $(this).attr('is_ ...
- LeetCode 1047. 删除字符串中的所有相邻重复项(Remove All Adjacent Duplicates In String)
1047. 删除字符串中的所有相邻重复项 1047. Remove All Adjacent Duplicates In String 题目描述 LeetCode1047. Remove All Ad ...
- TCP/IP协议的工作流程
1.在源主机上,应用层将一串应用数据流向下传输给传输层 2.传输层将应用数据截流成分组,并加上TCP报头形成TCP段,向下递交给网络层 3.在网络层给TCP段加上包括源主机,目的主机IP地址的IP报头 ...
- 在 Visual Studio 中部署 ASP.NET Core 应用
另一篇:在 Docker 中手工部署 ASP.NET Core 应用 操作步骤 1. 安装 Docker For Windows(安装之前 Windows 需要 开启 Hyper-V 虚拟机功能 ) ...