uni-app应用存在展开态图标大小超过折叠态1.2倍的问题,不符合华为应用市场审核标准

发布于 1周前 作者 ionicwang 来自 uni-app

uni-app应用存在展开态图标大小超过折叠态1.2倍的问题,不符合华为应用市场审核标准
您的应用审核未通过。
应用ID:5765880207856216901
应用名称:纪念日管理
应用版本:1.0.0

被拒绝原因:

您的应用存在展开态图标大小超过折叠态的1.2倍的问题,不符合华为应用市场审核标准。

应用审核意见:

您的应用存在展开态图标大小超过折叠态的1.2倍的问题,不符合华为应用市场审核标准。

测试环境:

测试设备 网络环境 语言环境
Mate X5 Wi-Fi 中文
Mate 60 Wi-Fi 中文
MatePad Pro Wi-Fi 中文

修改建议:请参考测试结果进行修改,确保应用符合设计规范。

应用UX体验标准请参考:
https://developer.huawei.com/consumer/cn/doc/design-guides/ux-guidelines-overview-0000001760867048

近期上架的几款鸿蒙应用,都是因为这个原因审核被拒,请问有没有解决方案


10 回复

问题排查: 在 deveco 编辑器里下载鸿蒙折叠屏模拟器,叫 foldable 模拟器,测试展开、折叠观察效果,定位是哪里放大了。
打开 deveco - 设备管理 - Local Emulator 新增 Foldable

技术分析: 在开发期间应当避免使用 rpx 百分比等单位设置宽高,这和屏幕宽度有关系,当折叠屏屏幕变宽、竖屏变成了横屏这种场景样式就会变大,影响视觉效果。
鸿蒙上架目前一定会测试折叠屏的适配。应当主动修改样式。未来其他平台上架也可能测试折叠屏。
开发应用应当时刻注意响应式开发,使用媒体查询、使用 px 等方案兼容处理。鸿蒙专门提供了一套文档用来说明,响应式应该怎么做 https://developer.huawei.com/consumer/cn/doc/design-guides/design-responsive-layout-method-0000001795698449


同样遇到了这个问题,尝试把rpx改为px 但还是不行,有什么解决办法吗

改成px也不行么?

改为px好了没?

同样遇到了,请问解决了吗

有没有办法一键将项目中的rpx换算为px

之前一直都在吹rpx多么好,自适应,项目基本上都是rpx,如果改为了px各种屏幕如何自动适配大小?

鸿蒙的话,我的APP直接把涉及的图标改成只显示文字了,不和华为争了。

针对您提到的uni-app应用在华为应用市场审核中遇到的图标大小问题,即展开态图标大小超过折叠态1.2倍的情况,以下是一个可能的解决方案,通过动态调整图标大小来满足华为应用市场的审核标准。

首先,我们需要获取设备的屏幕状态(折叠态或展开态),然后根据屏幕状态调整图标的大小。在uni-app中,我们可以通过uni.getSystemInfoSync方法获取系统信息,包括屏幕宽度等,但直接获取设备折叠状态的信息可能需要依赖特定平台的API或者自定义逻辑。不过,为了示例说明,我们可以假设有一个标识变量isFolded来表示设备状态。

以下是一个简化的代码示例,展示如何根据屏幕状态调整图标大小:

// 假设 isFolded 是通过某种方式获取的折叠状态标识,true 表示折叠态,false 表示展开态
let isFolded = false; // 此处应替换为实际获取折叠状态的逻辑

// 定义基础图标大小和最大放大比例
const baseIconSize = 50; // 基础图标大小(例如50px)
const maxSizeRatio = 1.2; // 最大放大比例

// 计算图标大小
let iconSize;
if (isFolded) {
    iconSize = baseIconSize;
} else {
    iconSize = Math.min(baseIconSize * maxSizeRatio, baseIconSize * (屏幕宽度在展开态下的调整系数)); // 调整系数需根据实际情况确定,确保不超过1.2倍
}

// 应用图标大小到页面或组件中
// 假设有一个图标组件 <image :src="iconSrc" :style="{width: iconSize + 'px', height: iconSize + 'px'}"></image>
// 在页面的 data 中设置图标大小和图标源
export default {
    data() {
        return {
            iconSrc: 'path/to/your/icon.png', // 图标路径
            iconStyle: {
                width: iconSize + 'px',
                height: iconSize + 'px'
            }
        };
    }
}

// 在模板中使用
<template>
    <image :src="iconSrc" :style="iconStyle"></image>
</template>

注意

  1. 上述代码中isFolded的获取逻辑需要根据实际平台API或自定义逻辑实现。
  2. 屏幕宽度在展开态下的调整系数需要根据具体设备屏幕宽度和设计规范来确定,以确保图标大小在合理范围内。
  3. 上述示例是基于Vue语法的uni-app组件代码,实际使用中可能需要根据项目结构和需求进行调整。

通过上述方法,您可以在uni-app应用中动态调整图标大小,以满足华为应用市场的审核标准。

回到顶部