uni-app HBuilderX 4.29 云打包应用页面在红米K70至尊版上出现异常

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app HBuilderX 4.29 云打包应用页面在红米K70至尊版上出现异常

操作步骤：

  • 打开软件就可以看到

预期结果：

  • 显示正常样式

实际结果：

  • 出现黑色样式

bug描述：

  • 首先软件并未适配暗黑模式
  • 使用云打包后出现强制黑色模式
  • 正常应该是白色的

相关图片

Image 1 Image 2

项目信息

信息 值
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本号 Windows 10
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 15
手机厂商 小米
手机机型 红米k70至尊版
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX
App下载地址 点击这里

Harmonyos Next教程
19 回复

https://ask.dcloud.net.cn/question/199589?notification_id-1463990rf-falseitem_id-285109__answer_id-285109__single-TRUE#!answer_285109
发现一个同类问题，什么时候给处理呀


手机只要开启神色模式软件里面的白色页面都会变成黑色
现在发现的问题机型有红米 还有 vivo 子品牌 iqoo 别的我没有那么多机型所以没有测试

有工作人员能给处理下么？社区里面也有别人在反馈了

谁能给看一下啊！手动设置关闭也不行

谁来看下呀！

可能是手机系统给强制转了，并不是框架自身的 darkmode。ios 是不是正常的？

我也发现了这个问题，红米机型，回退到4.24版本就不会

并不是系统强制转的，之前的版本都没有问题，就升级到4.29会有问题，辛苦查下原因，不然之后hbx都不敢升级了

ios暂时正常，vivo 和红米都出问题了，退回到4.24就没问题

有进展了么？着急上线，都卡了5天了

回复 碎时UP: 已经和相关同事说了，本地调试的时候有问题吗？

回复 碎时UP: 你重新打包试试看

回复 DCloud_UNI_LXH: 本地调试没有试过，之前重新打包好多遍了都有问题

回复 DCloud_UNI_LXH: 是已经修复了么？

回复 碎时UP: 你云打包试试看

此问题10月16晚已更新云端打包机修复此问题，请勾选“传统打包”重新提交云端打包。

好的感谢

终于给解决了

在处理uni-app在特定设备（如红米K70至尊版）上云打包后出现的页面异常问题时，通常需要考虑设备兼容性、系统特性以及uni-app框架本身的一些特性。以下是一些可能的解决思路和相关的代码案例，帮助你定位并解决问题。

1. 检查设备兼容性

首先，确保你的uni-app项目已经适配了红米K70至尊版的屏幕分辨率和DPI设置。你可以在manifest.json文件中配置屏幕的适配参数：

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniApp",
    "enablePullDownRefresh": false,
    "onReachBottomDistance": 50,
    "usingComponents": true,
    "pageOrientation": "portrait",
    "statusBarStyle": "light",
    "safeAreaInsetBottom": "auto",
    "autoBackButton": true,
    "system": {
        "autoDarkMode": false, // 是否开启系统暗黑模式
        "statusBarText": "white" // 状态栏文字颜色
    }
}

2. 针对特定设备调整样式

如果页面布局在红米K70至尊版上出现错乱，可能需要针对该设备调整CSS样式。你可以使用媒体查询或者通过JavaScript检测设备型号来动态调整样式。

示例：使用媒体查询调整字体大小

@media only screen and (device-width: 720px) and (device-height: 1600px) and (-webkit-device-pixel-ratio: 2.75) {
    body {
        font-size: 16px; /* 根据实际设备调整 */
    }
}

3. 检查组件和插件的兼容性

确保你使用的所有uni-app组件和第三方插件都支持红米K70至尊版的Android版本。有时候，某些组件或插件可能只在特定版本的Android系统上运行正常。

4. 调试和日志记录

使用HBuilderX的调试工具，在红米K70至尊版上真机调试你的应用。观察控制台输出的日志信息，看是否有错误或警告提示。

5. 更新uni-app和HBuilderX

确保你的uni-app框架和HBuilderX编辑器都更新到最新版本，以获取最新的功能和修复。

结论

由于无法直接获取红米K70至尊版的详细异常信息，以上建议是基于常见问题的通用解决策略。如果问题仍然存在，建议详细记录异常现象，并在uni-app社区或相关论坛寻求更具体的帮助。

回到顶部