uni-app 安卓app安装后图标显示错误

uni-app 安卓app安装后图标显示错误

操作步骤:

  • 打包即复现

预期结果:

  • 图标正常显示

实际结果:

  • 图标被白色底包裹

bug描述:

  • 图标外部有一圈

附件

Image 1 Image 2 Image 3 Image 4

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 企业版22H2
HBuilderX类型 正式
HBuilderX版本号 3.99
手机系统 Android
手机系统版本号 Android 11
手机厂商 OPPO
手机机型 PCAM00
页面类型 vue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX
App下载地址或H5网址 https://www.pgyer.com/manager/dashboard/app/0cb624883fd03a02d6f2727779adc4c0

更多关于uni-app 安卓app安装后图标显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

制作图标的时候不要制作圆形透明的。要做一个背景铺满整个图标的,手机操作系统会根据不同的系统主题自定义图标。

更多关于uni-app 安卓app安装后图标显示错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


问题已解决,实际问题很简单,就是系统设置了皮肤,导致所以图标都是圆的

在 uni-app 开发中,安卓应用安装后图标显示错误,可能是由于以下原因导致的。你可以按照以下步骤进行排查和修复:


1. 检查图标文件路径和格式

  • 确保在 manifest.json 中正确配置了应用图标路径。
  • 图标文件应放在 static 目录下,且格式为 .png
  • 示例配置:
    {
      "app": {
        "icon": {
          "android": "/static/icon.png"
        }
      }
    }
    

2. 检查图标尺寸

  • 安卓应用图标需要提供不同分辨率的版本,建议使用以下尺寸:
    • 48x48 (mdpi)
    • 72x72 (hdpi)
    • 96x96 (xhdpi)
    • 144x144 (xxhdpi)
    • 192x192 (xxxhdpi)
  • 如果只提供一个图标,系统可能会缩放导致显示模糊或错误。

3. 清理缓存并重新打包

  • 删除 unpackage 目录和 node_modules 目录。
  • 运行以下命令清理缓存并重新安装依赖:
    npm install
    
  • 重新打包应用:
    npm run build:app-plus
    

4. 检查 AndroidManifest.xml

  • 打包后,检查生成的 AndroidManifest.xml 文件,确保图标路径正确。
  • 文件路径:unpackage/dist/build/android/AndroidManifest.xml
  • 查找 android:icon 属性,确认其值是否正确指向图标资源。

5. 使用自适应图标(Adaptive Icons)

  • 从 Android 8.0(API 26)开始,推荐使用自适应图标。
  • manifest.json 中配置自适应图标:
    {
      "app": {
        "icon": {
          "android": {
            "foreground": "/static/icon_foreground.png",
            "background": "/static/icon_background.png"
          }
        }
      }
    }
    
  • 确保 foregroundbackground 图标尺寸为 108x108。

6. 检查设备缓存

  • 如果仅在某些设备上图标显示错误,可能是设备缓存问题。
  • 尝试清除设备上的应用缓存,或卸载后重新安装。

7. 使用 HBuilderX 打包

  • 如果使用命令行打包出现问题,可以尝试使用 HBuilderX 进行打包。
  • 在 HBuilderX 中,选择 发行 -> 原生App-云打包,确保配置正确。

8. 检查 uni-app 版本

  • 确保使用的 uni-app 版本是最新的,旧版本可能存在兼容性问题。
  • 更新 uni-app:
    npm update @dcloudio/uni-app
回到顶部