小程序 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 ...
随机推荐
- 安装EOS合约工具eosio.cdt
安装: 安装完之后 会产生 eosio-cpp_, eosio-cc, eosio-ld, eosio-pp, and _eosio_abigen (These are the C++ compile ...
- vue---发送数据请求的一些列的问题
使用vue做数据请求,首先考虑的是封装请求方法request.js import axios from 'axios' import Qs from 'qs' // 创建一个axios实例 const ...
- 备忘-VSCODE、apache配置
一个像素点的光标:https://files.cnblogs.com/files/zjfree/mouse.zip VSCODE配置备忘: { "editor.fontLigatures&q ...
- LODOP打印维护适应不同的客户端
之前的博文:Lodop打印设计.维护.预览.直接打印简单介绍,介绍了打印设计.打印维护.打印预览,直接打印等的区别和使用. 如上面以前博文描述的,打印维护是针对客户端进行调整的,开放打印维护给客户端, ...
- [LeetCode] 656. Coin Path 硬币路径
Given an array A (index starts at 1) consisting of N integers: A1, A2, ..., AN and an integer B. The ...
- 【ARM-Linux开发】【CUDA开发】【视频开发】关于Linux下利用GPU对视频进行硬件加速转码的方案
最近一直在研究Linux下利用GPU进行硬件加速转码的方案,折腾了很久,至今没有找到比较理想的硬加速转码方案.似乎网上讨论这一方案的文章也特别少,这个过程中也进行了各种尝试,遇到很多具体问题,以下便对 ...
- php利用crontab执行 5分钟发邮件给用户 (包含每分钟发一次)
php利用crontab执行 5分钟发邮件给用户 一开始设想用shell_exec执行sh 运行 crontab但发现并不可取 因为没办法传变量 (因为要传963529987@qq.com)所以决定采 ...
- JavaScript原生封装ajax请求和Jquery中的ajax请求
前言:ajax的神奇之处在于JavaScript 可在不重载页面的情况与 Web 服务器交换数据,即在不需要刷新页面的情况下,就可以产生局部刷新的效果.Ajax 在浏览器与 Web 服务器之间使用异步 ...
- (三)linux 学习 --操作文件和目录
The Linux Command Line 读书笔记 - 部分内容来自 http://billie66.github.io/TLCL/book/chap05.html 文章目录 通配符 字符范围 ` ...
- Java开发笔记(一百二十七)Swing的标签
提起AWT的标签控件Label,那个使用体验可真叫糟糕,不但不支持文字换行,而且对中文很不友好,既可能把中文显示为乱码,还不支持博大精深的各种中文字体.所幸Swing的升级版标签JLabel在各方面都 ...