uni-app 项目配置方式

1. 应用图标配置

在 manifest.json 中配置：

{
  "app-plus": {
    "distribute": {
      "icons": {
        "android": {
          "hdpi": "static/icons/72x72.png",
          "xhdpi": "static/icons/96x96.png",
          "xxhdpi": "static/icons/144x144.png",
          "xxxhdpi": "static/icons/192x192.png"
        }
      }
    }
  },
  "app-harmony": {
    "icons": {
      "default": "static/icons/icon.png"
    }
  }
}

图标尺寸要求：

2. 启动页（Splash）配置

{
  "app-plus": {
    "splashscreen": {
      "alwaysShowBeforeRender": true,
      "autoclose": true,
      "waiting": true
    },
    "distribute": {
      "splashscreen": {
        "android": {
          "hdpi": "static/splash/splash-hdpi.png",
          "xhdpi": "static/splash/splash-xhdpi.png",
          "xxhdpi": "static/splash/splash-xxhdpi.png"
        }
      }
    }
  }
}

HBuilderX 可视化配置

打开 manifest.json

点击「App图标配置」

上传一张 1024x1024 的图标

点击「自动生成所有图标」

启动页同理，在「App启动界面配置」中设置。

鸿蒙原生项目配置

如果是纯鸿蒙项目，在 entry/src/main/resources/base/media/ 目录下放置图标：

resources/ ├── base/ │ ├── media/ │ │ ├── app_icon.png # 应用图标 │ │ └── splash_screen.png # 启动页背景 │ └── element/ │ └── string.json

在 module.json5 中配置：

{
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "icon": "$media:app_icon",
        "label": "$string:app_name",
        "launchType": "singleton"
      }
    ]
  }
}

启动页自定义（代码方式）

方式1：使用 pages.json 配置启动页

{
  "pages": [
    {
      "path": "pages/splash/index",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": ""
      }
    },
    {
      "path": "pages/home/index"
    }
  ]
}

方式2：启动页组件

<!-- pages/splash/index.vue -->
<template>
  <view class="splash">
    <image src="/static/logo.png" class="logo" />
    <text class="title">养生源</text>
    <text class="version">V1.0.0</text>
  </view>
</template>

<script>
export default {
  onLoad() {
    // 2秒后跳转首页
    setTimeout(() => {
      uni.reLaunch({ url: '/pages/home/index' })
    }, 2000)
  }
}
</script>

<style>
.splash {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6BBF59, #AED581);
}
.logo {
  width: 200rpx;
  height: 200rpx;
}
.title {
  font-size: 48rpx;
  color: #fff;
  margin-top: 40rpx;
}
.version {
  font-size: 24rpx;
  color: rgba(255,255,255,0.8);
  margin-top: 20rpx;
}
</style>

注意事项

图标要求

格式：PNG（推荐）或 JPG

背景：建议透明或纯色

圆角：系统会自动处理，不要自己加圆角

尺寸：提供最大尺寸，系统自动缩放

启动页要求

不要放太多内容，简洁为主

加载时间控制在 2-3 秒内

适配不同屏幕比例（16:9、18:9、20:9）

深色模式要单独适配

常见问题

Q：图标显示模糊？ A：提供更高分辨率的图标，至少 512x512

Q：启动页拉伸变形？ A：使用 9-patch 图片或纯色背景 + 居中 logo

Q：启动页闪白屏？ A：在 manifest.json 设置 alwaysShowBeforeRender: true

快速配置清单

static/ ├── icons/ │ ├── icon-72.png │ ├── icon-96.png │ ├── icon-144.png │ ├── icon-192.png │ └── icon-1024.png # 应用市场用 └── splash/ ├── splash-hdpi.png ├── splash-xhdpi.png └── splash-xxhdpi.png

一句话：uni-app 项目在 manifest.json 配置，原生项目在 resources/media 目录放图片 + module.json5 引用。