当前位置:首页 > uni-app

uniapp启动图全屏

2026-02-06 08:11:54uni-app

设置全屏启动图的方法

在UniApp中实现全屏启动图,需要配置manifest.json文件并确保图片尺寸适配不同设备。以下是具体操作步骤:

uniapp启动图全屏

修改manifest.json中的splashscreen配置:

uniapp启动图全屏

"app-plus": {
  "splashscreen": {
    "autoclose": true,
    "waiting": true,
    "fullscreen": true
  }
}

图片尺寸规范

全屏启动图需提供多分辨率适配:

  • Android:建议提供1080x1920像素的图片
  • iOS:需要提供@2x(750x1334)和@3x(1242x2208)两种尺寸
  • 横屏设备需额外准备横向比例图片

动态修改启动图

通过plus.navigator可运行时控制启动图:

// 延长启动图显示时间
plus.navigator.setSplashscreen({ 
  autoclose: false 
});

// 手动关闭启动图
setTimeout(() => {
  plus.navigator.closeSplashscreen();
}, 3000);

注意事项

  • 真机调试时部分Android机型需要清理缓存才能生效
  • iOS平台需要确保图片位于static目录下
  • 使用HBuilderX 3.1.18+版本支持更好的全屏适配
  • 可考虑使用.webp格式减小图片体积

标签: 全屏uniapp
分享给朋友:

相关文章

uniapp实名认证

uniapp实名认证

uniapp实名认证实现方法 使用uniCloud实名认证插件 uniapp官方提供了uniCloud的实名认证插件,可快速集成到项目中。插件支持身份证识别、活体检测等功能,需在uniCloud控制台…

uniapp中如何使用iconfont

uniapp中如何使用iconfont

使用 Iconfont 在 Uniapp 中的步骤 下载 Iconfont 资源 访问 Iconfont 官网,选择需要的图标并添加到项目。下载时选择 Font class 格式,解压后会得到 .tt…

uniapp可以用vant吗

uniapp可以用vant吗

uniapp中使用Vant组件库的可行性 Vant是专为Vue.js设计的移动端组件库,而uniapp是一个跨平台开发框架。两者并非原生兼容,但可通过以下方式实现部分Vant组件的使用。 方法一:使…

uniapp真垃圾

uniapp真垃圾

关于对UniApp的评价,存在不同的声音。以下从技术特性、适用场景及常见争议点展开分析,供开发者参考: 技术特性与优势 UniApp基于Vue.js框架,支持多端编译(微信小程序、H5、App等),…

uniapp打卡日期

uniapp打卡日期

实现打卡日期的基本方法 在UniApp中实现打卡日期功能,可以通过<calendar>组件或自定义日期选择器完成。官方推荐使用第三方日历组件如uni-calendar,需通过HBuilde…

uniapp与vr

uniapp与vr

Uniapp与VR的结合方式 Uniapp作为跨平台开发框架,本身不直接支持VR开发,但可以通过以下方式实现与VR技术的结合: 使用WebXR API Uniapp可以调用WebXR API在H5端…