当前位置:首页 > uni-app

uniapp启动图全屏

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

设置全屏启动图的方法

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

修改manifest.json中的splashscreen配置:

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

图片尺寸规范

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

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

动态修改启动图

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

uniapp启动图全屏

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

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

注意事项

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

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

相关文章

uniapp教程

uniapp教程

uniapp 基础介绍 uniapp 是一个基于 Vue.js 的跨平台开发框架,支持一次开发,多端发布(如微信小程序、H5、App、快应用等)。其核心优势在于代码复用率高,学习成本低,适合快速构建多…

uniapp样式库

uniapp样式库

uniapp 常用样式库推荐 uView UI uView 是专为 uniapp 设计的多端兼容 UI 框架,提供丰富的组件和工具类。支持 Vue3 组合式 API,内置主题定制功能,常用于快速构建企…

uniapp设置title

uniapp设置title

设置页面标题的方法 在UniApp中设置页面标题可以通过以下几种方式实现,适用于不同场景和需求。 通过pages.json配置 在pages.json文件中,可以为每个页面单独配置导航栏标题。找到对…

uniapp 如何封装request请求

uniapp 如何封装request请求

封装 request 请求的核心思路 在 UniApp 中封装请求通常基于 uni.request,通过统一处理 URL、参数、header 和拦截逻辑提升代码复用性。以下是一个完整封装方案: 创建…

精通uniapp

精通uniapp

掌握UniApp的基础知识 UniApp是一个基于Vue.js的跨平台开发框架,支持一次开发多端部署(如H5、小程序、App等)。核心概念包括Vue语法、组件化开发、条件编译(针对不同平台适配)以及U…

uniapp 绘图

uniapp 绘图

uniapp 绘图方法 使用 Canvas 组件 uniapp 支持通过 canvas 组件实现绘图功能。在模板中声明 canvas 并设置宽度、高度和 ID,通过 JavaScript 调用绘图 A…