Uniapp 怎么修改项目图标和启动页

原创于 2025-09-07 11:15:00 发布 · 587 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

一、修改项目图标

图标文件准备
- 准备 1024×1024 像素的 PNG 格式主图标
- 不同平台有特殊要求：
  - iOS：需 20×20 至 1024×1024 多种尺寸
  - Android：需 48×48/72×72/96×96 等尺寸
配置 manifest.json
在 "app-plus" → "distribute" → "icons" 节点配置：

"icons": {
  "android": {
    "mdpi": "static/icon-48.png",
    "hdpi": "static/icon-72.png",
    "xhdpi": "static/icon-96.png"
  },
  "ios": {
    "appstore": "static/icon-1024.png",
    "iphone": {
      "2x": "static/icon-120.png",
      "3x": "static/icon-180.png"
    }
  }
}

二、修改启动页

启动页文件准备
- 推荐尺寸：1242×2208 像素（iOS）/ 1080×1920 像素（Android）
- 格式要求：PNG 或 JPG
配置 manifest.json
在 "app-plus" → "splashscreen" 节点配置：

"splashscreen": {
  "autoclose": true,
  "waiting": true,
  "target": "splash",
  "ios": {
    "image": "static/splash-ios.png"
  },
  "android": {
    "image": "static/splash-android.png"
  }
}

三、manifest.json 配置详解

{
  "name": "应用名称",
  "appid": "唯一应用标识",
  "description": "应用描述",
  
  /* 基础配置 */
  "versionName": "1.0.0",
  "versionCode": "100",
  
  /* 图标配置 */
  "icons": { ... }, // 见上文配置
  
  /* 启动页配置 */
  "splashscreen": { ... }, // 见上文配置
  
  /* 模块配置 */
  "modules": {
    "Payment": {}, // 支付模块
    "Push": {}    // 推送模块
  },
  
  /* 平台特定配置 */
  "app-plus": {
    "distribute": {
      "android": {
        "packagename": "com.example.app"
      },
      "ios": {
        "bundleidentifier": "com.example.app"
      }
    }
  },
  
  /* H5 配置 */
  "h5": {
    "router": {
      "mode": "history"
    }
  },
  
  /* 权限配置 */
  "permissions": [
    "android.permission.INTERNET",
    "ios.permission.CAMERA"
  ]
}

四、关键配置说明

图标尺寸要求
- Android 需提供 5 种分辨率图标
- iOS 需提供 10 种分辨率图标
- 可使用图标生成工具自动生成
启动页高级配置

"splashscreen": {
  "delay": 0, // 启动页延迟关闭时间（毫秒）
  "backgroundColor": "#FFFFFF", // 背景色
  "landscape": true // 是否支持横屏
}

生效流程

graph LR
A[准备图标/启动图] --> B[配置manifest.json]
B --> C[执行发行操作]
C --> D[生成新安装包]

五、常见问题解决

图标不更新
- 删除 unpackage 目录后重新编译
- 检查文件路径是否正确
启动页显示异常
- 确保图片尺寸符合要求
- 检查 autoclose 和 waiting 参数配置
多平台适配
- 使用条件编译：

// #ifdef APP-PLUS
"platform": "特定配置"
// #endif

最佳实践：

使用 HBuilderX 的「原生App-云打包」测试效果
每次修改后执行「清理项目」操作
复杂项目推荐使用 自定义启动页插件 实现动态控制