鸿蒙5.0 - uni-app uni.upx2px 在入参是750的情况下,返回值有误
鸿蒙5.0 - uni-app uni.upx2px 在入参是750的情况下,返回值有误
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Mac | macOS 15 | CLI |
产品分类:uniapp/App
PC开发环境操作系统:Mac
手机系统:HarmonyOS NEXT
手机系统版本号:HarmonyOS NEXT Developer Beta2
手机厂商:华为
手机机型:pure 70 / mate 60
页面类型:vue
vue版本:vue3
打包方式:离线
CLI版本号:3.0.0-4030620241128001
示例代码:
for(let i = 0; i <= 750; i += 50) {
console.log(`uni.upx2px(${i}) = ${uni.upx2px(i)}`);
}
操作步骤:
- 在 uni-app 中执行上述测试代码
预期结果:
uni.upx2px(0) = 0
uni.upx2px(50) = 25
uni.upx2px(100) = 50
uni.upx2px(150) = 75
uni.upx2px(200) = 100
uni.upx2px(250) = 125
uni.upx2px(300) = 150
uni.upx2px(350) = 175
uni.upx2px(400) = 200
uni.upx2px(450) = 225
uni.upx2px(500) = 250
uni.upx2px(550) = 275
uni.upx2px(600) = 300
uni.upx2px(650) = 325
uni.upx2px(700) = 350
uni.upx2px(750) = 375
实际结果:
uni.upx2px(0) = 0
uni.upx2px(50) = 25
uni.upx2px(100) = 50
uni.upx2px(150) = 75
uni.upx2px(200) = 100
uni.upx2px(250) = 125
uni.upx2px(300) = 150
uni.upx2px(350) = 175
uni.upx2px(400) = 200
uni.upx2px(450) = 225
uni.upx2px(500) = 250
uni.upx2px(550) = 275
uni.upx2px(600) = 300
uni.upx2px(650) = 325
uni.upx2px(700) = 350
uni.upx2px(750) = 1205
bug描述:
鸿蒙 5.0 app 集成 uni-app 小程序sdk(2.3.23)版本,uni.upx2px(number)
在入参 number
为 750 的情况下,返回的值有误。
根据我的定位排查,最终 uni.upx2px
是在 uni-app-harmony-framework.js
/ uni-app-harmony-framework-dev.js
中实现:
var upx2px = defineSyncApi(API_UPX2PX, (number, newDeviceWidth) => {
if (deviceWidth === 0) {
checkDeviceWidth();
{
checkMaxWidth();
}
}
number = Number(number);
if (number === 0) {
return 0;
}
let width = newDeviceWidth || deviceWidth;
{
width = number === includeWidth || width <= maxWidth ? width : baseWidth;
}
let result = number / BASE_DEVICE_WIDTH * width;
if (result < 0) {
result = -result;
}
result = Math.floor(result + EPS);
if (result === 0) {
if (deviceDPR === 1 || !isIOS2) {
result = 1;
} else {
result = 0.5;
}
}
return number < 0 ? -result : result;
}, Upx2pxProtocol);
更多关于鸿蒙5.0 - uni-app uni.upx2px 在入参是750的情况下,返回值有误的实战教程也可以访问 https://www.itying.com/category-93-b0.html
看文档说upx2px是废弃的,很迷
更多关于鸿蒙5.0 - uni-app uni.upx2px 在入参是750的情况下,返回值有误的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
推荐使用 rpx 和 px 完成布局和业务逻辑计算。参考 文档
因upx已废弃,推荐使用rpx。rpx无需特殊API可直接使用。
可以调整下面的配置项,参考 rpxCalcIncludeWidth
“rpxCalcIncludeWidth”: 750 // rpx 计算特殊处理的值,始终按实际的设备宽度计算,单位 rpx,默认值为 750
我是不想用 upx, 想用 rpx,但是 uni.rpx2px 在 uni-app小程序sdk 上,这个函数根本就没有,只能转而用 uni.upx2px
实际上你说的这些我都是按照文档配置的,在 css 中使用的单位都是 rpx,不用 upx, 但是在 js 中如果想要将 rpx 转换为 px,uni.rpx2px 这个方法又不存在,所以只能用 uni.upx2px 这个方法
这是一个已知的鸿蒙5.0下uni.upx2px(750)返回值异常的问题。根据代码分析,问题出在uni-app-harmony-framework.js
中的upx2px实现逻辑。
当传入750时,由于includeWidth
和baseWidth
的默认值设置问题,导致计算时使用了错误的宽度基准值。在鸿蒙5.0环境下,deviceWidth
获取异常,最终触发了width = number === includeWidth || width <= maxWidth ? width : baseWidth
这个条件分支,使用了不正确的基准宽度。
建议临时解决方案:
- 在调用uni.upx2px(750)前,先获取屏幕宽度并手动计算:
const pxValue = 750 * (uni.getSystemInfoSync().windowWidth / 750)
- 或者对750做特殊处理:
function safeUpx2px(value) {
return value === 750 ? uni.getSystemInfoSync().windowWidth : uni.upx2px(value)
}