Uniapp webview 开启沉浸式 和 全面屏配置设置透明标题栏 透明状态栏

最新推荐文章于 2026-04-26 05:04:45 发布
原创 最新推荐文章于 2026-04-26 05:04:45 发布 · 9.5k 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
前端

当前文章被收录于：

前端
15 篇文章 0 人学习
订阅专栏 查看详情
vue

当前文章被收录于：

vue
10 篇文章 0 人学习
订阅专栏 查看详情
Uniapp

当前文章被收录于：

Uniapp
1 篇文章 0 人学习
订阅专栏 查看详情
本文详细介绍了如何在Uniapp项目中配置应用以实现全面屏和沉浸式用户体验，包括修改配置文件以适配不同平台（Android、iPhone、iPad），调整状态栏、启动画面及运行模式等关键参数。
Uniapp webview 开启沉浸式 和 全面屏配置 直接看注释
{
	"@platforms": ["android", "iPhone", "iPad"],
	"id": "xxxxx",
	/*应用的标识*/
	"name": "云管家",
	/*应用名称，程序桌面图标名称*/
	"version": {
		"name": "1.1.1",
		/*应用版本名称*/
		"code": 2
	},
	"description": "xxxxxxxx",
	/*应用描述信息*/
	"icons": {
		"72": "icon.png"
	},
	"launch_path": "index.html",
	/*应用的入口页面，默认为根目录下的index.html；支持网络地址，必须以http://或https://开头*/
	"developer": {
		"name": "",
		/*开发者名称*/
		"email": "",
		/*开发者邮箱地址*/
		"url": "" /*开发者个人主页地址*/
	},
	"permissions": {
		"Accelerometer": {
			"description": "访问加速度感应器"
		},
		"Audio": {
			"description": "访问麦克风"
		},
		"Cache": {
			"description": "管理应用缓存"
		},
		"Camera": {
			"description": "访问摄像头"
		},
		"Console": {
			"description": "跟踪调试输出日志"
		},
		"Device": {
			"description": "访问设备信息"
		},
		"Downloader": {
			"description": "文件下载管理"
		},
		"Events": {
			"description": "应用扩展事件"
		},
		"File": {
			"description": "访问本地文件系统"
		},
		"Gallery": {
			"description": "访问系统相册"
		},
		"Geolocation": {
			"description": "访问位置信息"
		},
		"Invocation": {
			"description": "使用Native.js能力"
		},
		"Orientation": {
			"description": "访问方向感应器"
		},
		"Proximity": {
			"description": "访问距离感应器"
		},
		"Storage": {
			"description": "管理应用本地数据"
		},
		"Uploader": {
			"description": "管理文件上传任务"
		},
		"Runtime": {
			"description": "访问运行期环境"
		},
		"XMLHttpRequest": {
			"description": "跨域网络访问"
		},
		"Zip": {
			"description": "文件压缩与解压缩"
		},
		"Barcode": {
			"description": "管理二维码扫描插件"
		},
		"Webview": {
			"description": "窗口管理"
		},
		"NativeUI": {
			"description": "原生UI控件"
		},
		"Navigator": {
			"description": "浏览器信息"
		},
		"NativeObj": {
			"description": "原生对象"
		},
		"Speech": {}
	},
	"plus": {
		"statusbar": {
			/*是否开启沉浸式*/
			"immersed": true
		},
		"splashscreen": {
			"autoclose": true,
			/*是否自动关闭程序启动界面，true表示应用加载应用入口页面后自动关闭；false则需调plus.navigator.closeSplashscreen()关闭*/
			"waiting": false,
			/*是否在程序启动界面显示等待雪花，true表示显示，false表示不显示。*/
			"delay": 500
		},
		"popGesture": "none",
		/*设置应用默认侧滑返回关闭Webview窗口，"none"为无侧滑返回功能，"hide"为侧滑隐藏Webview窗口。参考http://ask.dcloud.net.cn/article/102*/
		"runmode": "normal",
		/*应用的首次启动运行模式，可取liberate或normal，liberate模式在第一次启动时将解压应用资源（Android平台File API才可正常访问_www目录）*/
		"signature": "Sk9JTiBVxxxxdddaaaG86aHIyMDEzQGRjbsdadsw==",
		/*可选，保留给应用签名，暂不使用*/
		"distribute": {
			"apple": {
				"appid": "",
				/*iOS应用标识，苹果开发网站申请的appid，如io.dcloud.HelloH5*/
				"mobileprovision": "",
				/*iOS应用打包配置文件*/
				"password": "",
				/*iOS应用打包个人证书导入密码*/
				"p12": "",
				/*iOS应用打包个人证书，打包配置文件关联的个人证书*/
				"devices": "universal",
				/*iOS应用支持的设备类型，可取值iphone/ipad/universal*/
				"frameworks": [] /*调用Native.js调用原生Objective-c API需要引用的FrameWork，如需调用GameCenter，则添加"GameKit.framework"*/
			},
			"google": {
				"packagename": "",
				/*Android应用包名，如io.dcloud.HelloH5*/
				"keystore": "",
				/*Android应用打包使用的密钥库文件*/
				"password": "",
				/*Android应用打包使用密钥库中证书的密码*/
				"aliasname": "",
				/*Android应用打包使用密钥库中证书的别名*/
				"permissions": [
					"<uses-feature android:name=\"android.hardware.camera\"/>",
					"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
					"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
					"<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
					"<uses-permission android:name=\"android.permission.CAMERA\"/>",
					"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
					"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
					"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
					"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
					"<uses-permission android:name=\"android.permission.INTERNET\"/>",
					"<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
					"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
					"<uses-permission android:name=\"android.permission.READ_CONTACTS\"/>",
					"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
					"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
					"<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
					"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
					"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
					"<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
					"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
					"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
				],
				"abiFilters": []
			},
			/*使用Native.js调用原生安卓API需要使用到的系统权限*/
			"orientation": ["portrait-primary"],
			/*应用支持的方向，portrait-primary：竖屏正方向；portrait-secondary：竖屏反方向；landscape-primary：横屏正方向；landscape-secondary：横屏反方向*/
			"icons": {
				"ios": {
					"prerendered": true,
					/*应用图标是否已经高亮处理，在iOS6及以下设备上有效*/
					"auto": "",
					/*应用图标，分辨率：512x512，用于自动生成各种尺寸程序图标*/
					"iphone": {
						"normal": "",
						/*iPhone3/3GS程序图标，分辨率：57x57*/
						"retina": "",
						/*iPhone4程序图标，分辨率：114x114*/
						"retina7": "",
						/*iPhone4S/5/6程序图标，分辨率：120x120*/
						"retina8": "",
						/*iPhone6 Plus程序图标，分辨率：180x180*/
						"spotlight-normal": "",
						/*iPhone3/3GS Spotlight搜索程序图标，分辨率：29x29*/
						"spotlight-retina": "",
						/*iPhone4 Spotlight搜索程序图标，分辨率：58x58*/
						"spotlight-retina7": "",
						/*iPhone4S/5/6 Spotlight搜索程序图标，分辨率：80x80*/
						"settings-normal": "",
						/*iPhone4设置页面程序图标，分辨率：29x29*/
						"settings-retina": "",
						/*iPhone4S/5/6设置页面程序图标，分辨率：58x58*/
						"settings-retina8": "",
						/*iPhone6Plus设置页面程序图标，分辨率：87x87*/
						"app@2x": "unpackage/res/icons/120x120.png",
						"app@3x": "unpackage/res/icons/180x180.png",
						"notification@2x": "unpackage/res/icons/40x40.png",
						"notification@3x": "unpackage/res/icons/60x60.png",
						"settings@2x": "unpackage/res/icons/58x58.png",
						"settings@3x": "unpackage/res/icons/87x87.png",
						"spotlight@2x": "unpackage/res/icons/80x80.png",
						"spotlight@3x": "unpackage/res/icons/120x120.png"
					},
					"ipad": {
						"normal": "",
						/*iPad普通屏幕程序图标，分辨率：72x72*/
						"retina": "",
						/*iPad高分屏程序图标，分辨率：144x144*/
						"normal7": "",
						/*iPad iOS7程序图标，分辨率：76x76*/
						"retina7": "",
						/*iPad iOS7高分屏程序图标，分辨率：152x152*/
						"spotlight-normal": "",
						/*iPad Spotlight搜索程序图标，分辨率：50x50*/
						"spotlight-retina": "",
						/*iPad高分屏Spotlight搜索程序图标，分辨率：100x100*/
						"spotlight-normal7": "",
						/*iPad iOS7 Spotlight搜索程序图标，分辨率：40x40*/
						"spotlight-retina7": "",
						/*iPad iOS7高分屏Spotlight搜索程序图标，分辨率：80x80*/
						"settings-normal": "",
						/*iPad设置页面程序图标，分辨率：29x29*/
						"settings-retina": "",
						/*iPad高分屏设置页面程序图标，分辨率：58x58*/
						"app": "unpackage/res/icons/76x76.png",
						"app@2x": "unpackage/res/icons/152x152.png",
						"notification": "unpackage/res/icons/20x20.png",
						"notification@2x": "unpackage/res/icons/40x40.png",
						"proapp@2x": "unpackage/res/icons/167x167.png",
						"settings": "unpackage/res/icons/29x29.png",
						"settings@2x": "unpackage/res/icons/58x58.png",
						"spotlight": "unpackage/res/icons/40x40.png",
						"spotlight@2x": "unpackage/res/icons/80x80.png"
					},
					"appstore": "unpackage/res/icons/1024x1024.png"
				},
				"android": {
					"mdpi": "",
					/*普通屏程序图标，分辨率：48x48*/
					"ldpi": "",
					/*大屏程序图标，分辨率：48x48*/
					"hdpi": "unpackage/res/icons/72x72.png",
					/*高分屏程序图标，分辨率：72x72*/
					"xhdpi": "unpackage/res/icons/96x96.png",
					/*720P高分屏程序图标，分辨率：96x96*/
					"xxhdpi": "unpackage/res/icons/144x144.png",
					/*1080P 高分屏程序图标，分辨率：144x144*/
					"xxxhdpi": "unpackage/res/icons/192x192.png"
				}
			},
			"splashscreen": {
				"ios": {
					"iphone": {
						"default": "",
						/*iPhone3启动图片选，分辨率：320x480*/
						"retina35": "C:/Users/41138/Desktop/back/ios/640x960.png",
						/*3.5英寸设备(iPhone4)启动图片，分辨率：640x960*/
						"retina40": "C:/Users/41138/Desktop/back/ios/640x1136.png",
						/*4.0 英寸设备(iPhone5/iPhone5s)启动图片，分辨率：640x1136*/
						"retina47": "C:/Users/41138/Desktop/back/ios/750x1334.png",
						/*4.7 英寸设备(iPhone6)启动图片，分辨率：750x1334*/
						"retina55": "C:/Users/41138/Desktop/back/ios/1242x2208.png",
						/*5.5 英寸设备(iPhone6 Plus)启动图片，分辨率：1242x2208*/
						"retina55l": "C:/Users/41138/Desktop/back/ios/2208x1242.png",
						/*5.5 英寸设备(iPhone6 Plus)横屏启动图片，分辨率：2208x1242*/
						"portrait-896h@3x": ""
					},
					"ipad": {
						"portrait": "",
						/*iPad竖屏启动图片，分辨率：768x1004*/
						"portrait-retina": "",
						/*iPad高分屏竖屏图片，分辨率：1536x2008*/
						"landscape": "",
						/*iPad横屏启动图片，分辨率：1024x748*/
						"landscape-retina": "",
						/*iPad高分屏横屏启动图片，分辨率：2048x1496*/
						"portrait7": "C:/Users/41138/Desktop/back/ipad/768x1024.png",
						/*iPad iOS7竖屏启动图片，分辨率：768x1024*/
						"portrait-retina7": "C:/Users/41138/Desktop/back/ipad/1536x2048.png",
						/*iPad iOS7高分屏竖屏图片，分辨率：1536x2048*/
						"landscape7": "C:/Users/41138/Desktop/back/ipad/1024x768.png",
						/*iPad iOS7横屏启动图片，分辨率：1024x768*/
						"landscape-retina7": "C:/Users/41138/Desktop/back/ipad/2048x1536.png" /*iPad iOS7高分屏横屏启动图片，分辨率：2048x1536*/
					}
				},
				"android": {
					"mdpi": "",
					/*普通屏启动图片，分辨率：240x282*/
					"ldpi": "",
					/*大屏启动图片，分辨率：320x442*/
					"hdpi": "C:/Users/41138/Desktop/back/480_762.png",
					/*高分屏启动图片，分辨率：480x762*/
					"xhdpi": "C:/Users/41138/Desktop/back/720_1242.png",
					/*720P高分屏启动图片，分辨率：720x1242*/
					"xxhdpi": "C:/Users/41138/Desktop/back/1080_1882.png" /*1080P高分屏启动图片，分辨率：1080x1882*/
				}
			},
			"plugins": {
				"speech": {
					"ifly": {}
				}
			}
		},
		"error": {
			/*"error.html"*/
			"url": "none"
		}
	},
	/*是否开启全面屏*/
	"fullscreen": false
}
缺陷

水滴屏 刘海屏 手机会有顶部缺失一些高度 会顶置最上方 看你自己的文字高度

–魔搜

标签
#uniapp状态栏
Android UI体验之全屏沉浸式透明状态栏样式
寒风的博客
12-19 633
Android 4.4之后谷歌提供了沉浸式全屏体验， 在沉浸式全屏模式下， 状态栏、 虚拟按键动态隐藏， 应用可以使用完整的屏幕空间， 按照 Google 的说法， 给用户一种 身临其境 的体验。而Android 5.0之后谷歌又提出了 ColorPalette 的概念，让开发者可以自己设定系统区域的颜色，使整个 App 的颜色风格和系统的颜色风格保持统一。今天学习总结一下如何实现Android
升级nodejs版本 安装n模块报错 npm ERR! notsup Unsupported platform
热门推荐
cnoneo的博客
09-09 2万+
如何升级nodejs版本 首先安装n模块， 输入npm install -g n n模块专门用来管理nodejs的版本。 如果出现npm ERR! notsup Unsupported platform for n@2.1.8: wanted {“os”:"!win32",“arch”:“any”} (current: {“os”:“win32”,“arch”:“x64”}) 这样错误信息，在命令...
忍者像素绘卷保姆级教程：微信小程序Webview内嵌+Canvas像素级缩放适配
weixin_42613360的博客
04-26 221
本文介绍了如何在星图GPU平台上自动化部署🍥 忍者像素绘卷：天界画坊🍥镜像，实现像素艺术创作功能。该镜像专为复古游戏风格设计，支持多种画幅比例的像素画生成，可应用于游戏美术设计、数字艺术创作等场景，为用户提供沉浸式创作体验。
vue开发环境调试前端http如何改成https访问
cnoneo的博客
10-08 1万+
vue.config.js module.exports = { ..., devServer: { https: true } }
uglifyjs-webpack-plugin不支持es6语法报错const 解决方法
cnoneo的博客
10-08 6549
打包出现： static/js/chunk-vendors.d42d548c.js from UglifyJs Unexpected token: keyword «const» [static/js/chunk-vendors.d42d548c.js:61,225864] 原因: 1，是UglifyJS不支持ES6的语法。理论上不应该啊… 2，发现uglifyjs-webpack-plugin...
利用github pages做免费静态网站个人免费域名空间
cnoneo的博客
05-18 3242
利用github做免费个人网站免费域名空间
【抖音视频去水印小程序开源】mosousuo—微信小程序下载抖音去水印视频
cnoneo的博客
09-15 2995
解析接口是普通接口只能解析短视频 其中用到了读取剪辑版数据和相册保存 剪辑版数据 wx.getClipboardData({ success: res => { var str = res.data.trim() if (str) { that.setData({ defaultUrl: str ...
JQuery获取iframe中window对象方法.contentWindow
cnoneo的博客
12-20 2790
document.getElementsByTagName('iframe')[0].contentWindow
vue-cli3 -- build 生产打包时自动清除console调试信息
cnoneo的博客
10-16 1966
方法 1. 安装babel-plugin-transform-remove-console 修改 babel.config.js 文件 推荐 let transformRemoveConsolePlugin = [] if (process.env.NODE_ENV === 'production') { transformRemoveConsolePlugin = ['transform...
git在scan的时候无法检测到新建文件夹以及新建文件夹下的文件resource/asset 等解决方法
cnoneo的博客
04-11 1502
场景：本人新建laravel 项目 无法被GIT 检测到的文件夹所处位置： resource 新建文件夹功能：新建管理后台文件夹 asset/vue-element
js 浏览器控制台彩色文字输出彩色打印输出极端例子
cnoneo的博客
10-15 975
var css = "text-shadow: -1px -1px hsl(0,100%,50%), 1px 1px hsl(5.4, 100%, 50%), 3px 2px hsl(10.8, 100%, 50%), 5px 3px hsl(16.2, 100%, 50%), 7px 4px hsl(21.6, 100%, 50%), 9px 5px hsl(27, 100%, 50%), 11...
webpack打包时，css里的图片路径不能正确打包问题
cnoneo的博客
04-14 801
const query = _loaderUtils2.default.getOptions(this) || {publicPath: ‘…/…/’}; node_modules\mini-css-extract-plugin\dist\loader.js第69行，替换成上面这个 解决打包时login页背景图路径错误问题 Lewis ...
vue excel 导出文档完美无错20191121测试通过
cnoneo的博客
11-21 508
因在网上众多博客看到vue excel的导出都本地测试都会有报错 require is undefined 直接上测试通过无报错代码 npm install xlsx file-saver -S 在你的src目录新建 vendor 文件夹, 并在此文件夹内新建2个文件（也可直接点击下载本文附件资源里的2个js） Export2Excel.js /* eslint-disable */ impo...
解决Cannot download “https://github.com/sass/node-sass/releases/download/binding.nod的问题
cnoneo的博客
08-29 389
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
jq鼠标事件代码悬浮划线等
cnoneo的博客
07-10 358
$(this).on("mouseover mouseout",function(event){ if(event.type == "mouseover"){ //鼠标悬浮 console.log('鼠标悬浮') }else if(event.type == "mouseout"){ //鼠标离开 console.log('鼠标离开') } // $(this).off("m...
npm install 随笔
cnoneo的博客
04-30 191
npm install request --save npm install --save-dev webpack npm install webpack-dev-server --save npm install vue-loader --save npm audit fix
移相控制全桥LLC谐振变换器工作特性及仿真分析（Simulink仿真实现）
07-17
内容概要：本文系统研究了移相控制全桥LLC谐振变换器的工作特性，深入分析其在不同工况下的运行机理与性能表现，并基于Simulink平台构建了完整的仿真模型进行验证。文章详细阐述了LLC谐振变换器的电路拓扑结构、工作原理、关键参数设计方法以及移相控制策略的实现机制，重点对电压增益特性、转换效率、软开关实现条件等核心性能指标进行了仿真分析，全面评估了系统在宽输入电压范围内的稳定性、动态响应能力及高效运行区间。; 适合人群：适用于电力电子、电气工程及其自动化等相关专业的高校研究生、科研机构研究人员以及从事高频开关电源、DC-DC变换器设计的工程技术人员；要求读者具备扎实的电路理论基础和一定的Simulink仿真应用经验。; 使用场景及目标：①深入掌握LLC谐振变换器的基本原理与数学建模方法；②理解并应用移相控制策略以提升高效率DC-DC变换器的性能；③通过仿真实践优化谐振腔参数（如谐振电感、励磁电感、谐振电容）与开关频率配置，提高电源系统的整体能效、功率密度和可靠性，服务于实际工程中的电源产品开发与性能验证。; 阅读建议：建议读者结合提供的Simulink仿真模型同步操作，重点探究谐振元件参数变化对系统增益曲线和ZVS软开关实现条件的影响，尝试调节移相角与开关频率以观察动态响应过程，从而深化对LLC变换器高频软开关特性和控制策略的理解。
RS485 to USB adapter
最新发布
07-17
下载代码方式：https://pan.quark.cn/s/a4b39357ea24 标题中所指的"RS485转USB驱动"是一种硬件接口转换技术，其功能在于将传统的RS485通信协议转换为USB接口形式，从而使得现代计算机或设备能够便捷地与采用RS485协议的设备展开通信。RS485作为一种在工业控制、远程通信及多点系统中得到普遍应用的串行通信标准，具备传输距离长、抗干扰性能优异等显著优势。文中提及的型号（CH340、CH341、FT232RL、PL2303、Y-105）是几种常见的USB至UART（通用异步接收发送器）桥接芯片，它们在USB接口与RS485网络之间充当转换媒介的角色。这些芯片赋予USB通信能力，使得计算机可以通过USB接口与RS485网络中的设备执行数据交换。 1. CH340/CH341：这些由韦东山科技研制的USB转串口芯片，常被用于构建低成本的USB转串口适配器。它们提供从USB到UART的转换功能，支持多种波特率的设定，并且在Windows操作系统环境下通常需要安装相应的驱动程序方可正常运作。 2. FT232RL：FTDI公司推出的一款高性能且低功耗的USB到UART桥接器。FT232RL配备全速USB 1.1接口，支持多种串行接口模式，在数据通信、工业控制等领域能够得到广泛应用。同样地，采用FT232RL的设备在连接至电脑时也需要安装对应的驱动程序。 3. PL2303：硅光电子（Prolific）公司所生产的产品，亦是一种常用的USB到UART桥接芯片。它展现出良好的兼容性以及广泛的驱动程序支持，适用于各类USB至串口的应用场景。 4. Y-105：这可能是一款特定的RS485转USB转换模块，或许集成了上述其中一种或多种转换...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值