鸿蒙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

5 回复

看文档说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时,由于includeWidthbaseWidth的默认值设置问题,导致计算时使用了错误的宽度基准值。在鸿蒙5.0环境下,deviceWidth获取异常,最终触发了width = number === includeWidth || width <= maxWidth ? width : baseWidth这个条件分支,使用了不正确的基准宽度。

建议临时解决方案:

  1. 在调用uni.upx2px(750)前,先获取屏幕宽度并手动计算:
const pxValue = 750 * (uni.getSystemInfoSync().windowWidth / 750)
  1. 或者对750做特殊处理:
function safeUpx2px(value) {
  return value === 750 ? uni.getSystemInfoSync().windowWidth : uni.upx2px(value)
}
回到顶部