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

最新推荐文章于 2024-08-05 10:38:15 发布
最新推荐文章于 2024-08-05 10:38:15 发布
阅读量8.8k 收藏 9
点赞数 2
分类专栏： vue 前端 Uniapp 文章标签： uniapp状态栏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cnoneo/article/details/102465788
版权
前端 同时被 3 个专栏收录
15 篇文章 0 订阅
订阅专栏
vue
10 篇文章 0 订阅
订阅专栏
Uniapp
1 篇文章 0 订阅
订阅专栏
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
}
缺陷

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

–魔搜

cnoneo
关注
专栏目录
沉浸式与状态栏导航栏透明
momo_ibeike的博客
10-25 1710
沉浸式 沉浸式是一种完全的全面屏体验，是指状态栏和导航栏被隐藏的全面屏展示。 android 4.0 以下 在4.0以下可以通过WindowManager.LayoutParams.FLAG_FULLSCREEN 来隐藏状态栏，一般来说隐藏状态栏也需要隐藏ActionBar，所以代码实现如下： getWindow().addFlags(WindowManager.LayoutParams.FLAG...
使用HBuilder打包vue客户端app
ytangdigl的博客
01-05 1万+
1、使用npm run build 命令 将vue项目打包,生成打包文件dist。 2、使用HBuilder打开dist文件目录 3、在HBuilder中右键项目目录名，点转换成移动App,会生成manifest.json文件 4、在线打包移动App 右键项目名，点发行—>云打包-打原生安装包 弹出App去端打包窗口，勾选Android,然后点“参数配置” 在参
前端UNIAPP端webview嵌入H5使用说明文档
最新发布
weixin_41978174的博客
08-05 238
拦截URL请求后，Webview窗口将不会跳转到新的URL地址，此时将通过callback回调方法返回拦截的URL地址（可新开Webview窗口加载URL页面等）。默认值为"instant"。创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。创建并显示Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后自动将Webview窗口显示出来。
uni-app 导航栏透明设置
热门推荐
m0_46653120的博客
12-01 1万+
uni-app 导航 透明 背景图
uniapp HTML5+API 设置状态栏透明(沉浸式)/全屏/颜色等
BlizzardWu的博客
06-18 3915
参考文档：http://www.html5plus.org/doc/zh_cn/navigator.html 1、沉浸式状态栏 如果页面顶部是图片，一般会把状态栏变成透明。 //是否支持沉浸式状态栏 alert(plus.navigator.isImmersedStatusbar()); 默认是不支持的，会弹出false. 想让环境支持，需要修改项目下的配置文件manifest.json “plus”:{ “statusbar”: { “immersed”: true }, … } //修改完成后
Hbuilder将vue项目打包为app（具体步骤和注意点）
...
10-04 4341
Hbuilder将vue项目打包为app（具体步骤和注意点）
uniapp顶部标题栏从透明到显示
游九尘的博客
01-26 972
uniapp顶部标题栏从透明到显示
各种类型沉浸式状态栏(图片或纯色)，结合各种WebView,Fragment和Activity的沉浸
08-15
图片状态栏+彩色导航栏，全屏图片，访QQ状态栏和标题栏渐变色，结合侧滑返回，fragment，Dialog，Tablayout，WebView和Activity结合使用等，以及讲解和解决白色状态栏的原因
沉浸式状态栏（各种类型沉浸式状态栏(图片或纯色)，结合各种WebView,Fragment和Activity的沉浸）
09-26
图片状态栏+彩色导航栏，全屏图片，访QQ状态栏和标题栏渐变色，结合侧滑返回，fragment，Dialog，Tablayout，WebView和Activity结合使用等，以及讲解和解决白色状态栏的原因
uniapp 使用webView通讯
04-04
uniapp 使用webView通讯
uniapp中设置横屏竖屏
07-06
在uni-app框架中，开发者可以方便地进行横屏和竖屏的切换。uni-app是一款基于Vue.js的多端开发框架，能够帮助开发者一次编写，多端运行，包括iOS、Android、H5、小程序等平台。本文将详细介绍如何在uni-app中实现横...
uni-app nvue沉浸式状态栏（线性渐变色）.vue
12-17
uni-app nvue沉浸式状态栏（线性渐变色）.vue
uniapp: webview全屏遮挡住状态栏的解决方案
m0_59638694的博客
03-28 6140
uniapp的状态栏被webview给遮住了，怎么显示状态栏。转载的。
【uni-app&小程序】状态栏和标题栏
joanmelon的博客
01-04 7080
Hi，我是宾果的救星~
使用Hbuilder打包vue项目app
Leisure_Time的博客
01-10 564
vue项目， HBuilder / HBuilderX有的情况下 第一步， 使用HBuilder创建一个app项目， 我使用的是HBuilderX， 步骤如下： 选择左上角， 文件， -> 新建 -> 项目 会出先这样的画面： 那么我们选择 5+App那个选项， 这样我们就有一个基本的app模板了 然后我们在打包我们的vue项目， 使用npm run builder...
通过hbuilder x 把vue项目打包成apk
一蓑烟雨任平生的博客
04-16 346
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录通过hbuilderx把vue项目打包成apk使用步骤1.打包vue项目2.通过hbuilder x新建5+App（A） 通过hbuilderx把vue项目打包成apk 提示：以下是本篇文章正文内容，下面案例可供参考 使用步骤 1.打包vue项目 npm run build 打包完成 打包生成dist文件 dist文件内容 2.通过hbuilder x新建5+App（A） 打开hbuildx 点击文件>新建
【uni-app沉浸式状态栏“显示不全”】如何去掉沉浸式状态栏
红烧咸咸鱼
06-29 817
【代码】【uni-app沉浸式状态栏“显示不全”】如何去掉沉浸式状态栏。
HBuilder 打包
weixin_46243213的博客
10-07 1690
HBuilder 打包
Android UI体验之全屏沉浸式透明状态栏效果
01-06 258
前言： Android 4.4之后谷歌提供了沉浸式全屏体验， 在沉浸式全屏模式下， 状态栏、 虚拟按键动态隐藏， 应用可以使用完整的屏幕空间， 按照 Google 的说法， 给用户一种 身临其境 的体验。而Android 5.0之后谷歌又提出了 ColorPalette 的概念，让开发者可以自己设定系统区域的颜色，使整个 App 的颜色风格和系统的颜色风格保持统一。今天学习总结一...
uniapp沉浸式导航栏
07-27
uni-app是一种跨平台的应用开发框架，可以同时开发小程序、H5和App。沉浸式导航栏是指将页面顶部的组件填充到导航栏的区域，使得导航栏和页面顶部的组件融为一体。在uni-app中实现沉浸式导航栏可以通过修改页面的style属性来实现。具体步骤如下： 1. 在page.json文件中找到要实现沉浸式导航栏的页面，添加以下代码到该页面的style属性中： ``` "style": { "navigationStyle": "custom" } ``` 这样就将该页面的导航栏设置为沉浸式导航栏。 2. 通过uni.getSystemInfo方法获取屏幕的尺寸，可以根据需要进行页面布局的调整。 需要注意的是，以上方法适用于uni-app开发的小程序和H5页面。对于微信小程序页面，也可以通过设置导航栏的背景色为透明来实现沉浸式导航栏。具体的实现方式可以根据具体的需求和开发框架进行调整。\[1\]\[2\]\[3\] #### 引用[.reference_title] - *1* [uni-app实现小程序沉浸式导航栏/顶部组件占满导航栏](https://blog.csdn.net/qq_52925863/article/details/127451119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [uniapp设置导航栏、沉浸式导航栏以及获取屏幕尺寸](https://blog.csdn.net/EvaY_Yang/article/details/125554733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值