草庐IT

uniapp系列-改变底部安全区-顶部的手机信号、时间、电池栏颜色样式

tangdou369098655 2024-07-15 原文

uniapp 的默认安全区域的颜色是白色，如果我们做了沉浸式页面，背景色也是白色的话，就会看不到电池栏，等的颜色，如何修改呢？

首先来说底部安全区域

下图是底部安全区原始状态，感觉和整个页面格格不入

修改代码配置safearea

  • manifest.json（下面代码仅支持ios）
// 在app-plus下配置：
"safearea": { //安全区域配置，仅iOS平台生效    
    "background": "#F5F6F9", //安全区域外的背景颜色，默认值为"#FFFFFF"    
    "bottom": { // 底部安全区域配置    
        "offset": "none|auto" // 底部安全区域偏移，"none"表示不空出安全区域，"auto"自动计算空出安全区域，默认值为"none"    
    }  
},
  • manifest.json（下面代码支持android）
写法一：
	// #ifdef APP-PLUS
	var Color = plus.android.importClass("android.graphics.Color");
	plus.android.importClass("android.view.Window");
	var mainActivity = plus.android.runtimeMainActivity();
	var window_android = mainActivity.getWindow();
	window_android.setNavigationBarColor(Color.parseColor("#eb8c76"));
	// #endif
	
写法二：
        // #ifdef APP-PLUS
	let color, ac, c2int, win;
	color = plus.android.newObject("android.graphics.Color")
	ac = plus.android.runtimeMainActivity();
	c2int = plus.android.invoke(color, "parseColor", "#000000")
	win = plus.android.invoke(ac, "getWindow");
	plus.android.invoke(win, "setNavigationBarColor", c2int)
	// #endif


底部区域颜色已配置成功（下图仅供参考，随便选的颜色，有点丑哈哈）

接下来讲一下顶部电池栏的配置

配置顶部导航栏颜色

方案一：仅适用于原生导航配置，非自定义导航

在page.json修改需要配置的页面的navigationBarTextStyle属性

"pages": [ 
		{
			"path": "pages/index/index",
			"style": {
				// "navigationStyle": "custom"
				"navigationBarTitleText": "我是原生title",
				"navigationBarTextStyle": "white" ,// 仅支持 black/white
				"navigationBarBackgroundColor": "#aaaaff"
			}
		}
	],

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yAzbkfR8-1677942313817)(https://img2023.cnblogs.com/blog/1675284/202303/1675284-20230304224849591-1728658694.png)]

方案一：通用，也适用于自定义导航

在页面中使用nativejs的api，native是uni内置的sdk，不需要手动引入，直接用就可以,但是需要注意调用时机和条件使用，参考下面的注意事项哦

onReady(){
	    plus.navigator.setStatusBarStyle("dark"); //只支持dark和light
	}


注意事项

注意函数的调用时机，如果是自定义导航栏，方法只写在onReady的话，切换路由再回来以后，你的配置会失效，所以要注意调用时机

uniapp中 onReady, onLoad, onShow区别

  • onReady 页面初次渲染完成了，但是渲染完成了，你才发送请求获取数据，显得有些慢

  • onLoad 只加载一次，监听页面加载，其参数为上个页面传递的数据，参数类型为Object

  • onShow 监听页面显示。页面每次出现都触发，包括从下级页面点返回露出当前页面

目前我是这样配置（举个栗子：配置顶部导航栏背景颜色为黑色）

import { onLoad, onShow, onReady} from '@dcloudio/uni-app';
onReady(() => { 
/* #ifdef APP-PLUS */ 
plus.navigator.setStatusBarStyle('dark'); 
/* #endif */
});

onShow(() => { 
/* #ifdef APP-PLUS */ 
plus.navigator.setStatusBarStyle('dark'); 
/* #endif */
});

今天就写到这里啦~

  • 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
  • 大家要天天开心哦

欢迎大家指出文章需要改正之处~
学无止境，合作共赢

欢迎路过的小哥哥小姐姐们提出更好的意见哇~~

安全区uniappxff0cxffxff0uni-appandroid

有关uniapp系列-改变底部安全区-顶部的手机信号、时间、电池栏颜色样式的更多相关文章

  1. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  2. ruby - 如何使用 Ruby aws/s3 Gem 生成安全 URL 以从 s3 下载文件 - 2

    我正在编写一个小脚本来定位aws存储桶中的特定文件，并创建一个临时验证的url以发送给同事。(理想情况下，这将创建类似于在控制台上右键单击存储桶中的文件并复制链接地址的结果)。我研究过回形针，它似乎不符合这个标准，但我可能只是不知道它的全部功能。我尝试了以下方法:defauthenticated_url(file_name,bucket)AWS::S3::S3Object.url_for(file_name,bucket,:secure=>true,:expires=>20*60)end产生这种类型的结果:...-1.amazonaws.com/file_path/file.zip.A

  3. ruby-on-rails - 使用一系列等级计算字母等级 - 2

    这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，

  4. ruby-on-rails - Ruby 检查日期时间是否为 iso8601 并保存 - 2

    我需要检查DateTime是否采用有效的ISO8601格式。喜欢:#iso8601?我检查了ruby​​是否有特定方法，但没有找到。目前我正在使用date.iso8601==date来检查这个。有什么好的方法吗？编辑解释我的环境，并改变问题的范围。因此，我的项目将使用jsapiFullCalendar，这就是我需要iso8601字符串格式的原因。我想知道更好或正确的方法是什么，以正确的格式将日期保存在数据库中，或者让ActiveRecord完成它们的工作并在我需要时间信息时对其进行操作。 最佳答案 我不太明白你的问题。我假设您想检查

  5. ruby-on-rails - 将 Ruby 中的日期/时间格式化为 YYYY-MM-DD HH :MM:SS - 2

    这个问题在这里已经有了答案:Railsformattingdate(4个答案)关闭4年前。我想格式化Time.Now函数以显示YYYY-MM-DDHH:MM:SS而不是:“2018-03-0909:47:19+0000”该函数需要放在时间中.现在功能。require‘roo’require‘roo-xls’require‘byebug’file_name=ARGV.first||“Template.xlsx”excel_file=Roo::Spreadsheet.open(“./#{file_name}“,extension::xlsx)xml=Nokogiri::XML::Build

  6. ruby - 查找字符串中的内容类型(数字、日期、时间、字符串等) - 2

    我正在尝试解析一个CSV文件并使用SQL命令自动为其创建一个表。CSV中的第一行给出了列标题。但我需要推断每个列的类型。Ruby中是否有任何函数可以找到每个字段中内容的类型。例如，CSV行:"12012","Test","1233.22","12:21:22","10/10/2009"应该产生像这样的类型['integer','string','float','time','date']谢谢! 最佳答案 require'time'defto_something(str)if(num=Integer(str)rescueFloat(s

  7. ruby - 如何安全地删除文件？ - 2

    在Ruby中是否有Gem或安全删除文件的方法？我想避免系统上可能不存在的外部程序。“安全删除”指的是覆盖文件内容。 最佳答案 如果您使用的是*nix，一个很好的方法是使用exec/open3/open4调用shred:`shred-fxuz#{filename}`http://www.gnu.org/s/coreutils/manual/html_node/shred-invocation.html检查这个类似的帖子:Writingafileshredderinpythonorruby?

  8. 怎样用一台手机做自媒体？ - 2

    其实做自媒体的成本并不高，入门只需要一部手机即可！在手机上找视频素材、使用手机剪辑视频、最后使用手机发布视频作品获得收益！方法并不难，今天这期内容就来给粉丝们分享一种小方法，每天稳定收益100-300，抓紧点赞收藏！1、找素材（1）使用手机拍摄自己喜欢的经典段落，使用程序把文案内容提取出来（2）也可以在豆瓣、知乎、微博等网站中找一些自己需要的文案素材（3）把文案进行润色修改，可以加入一些自己的观点（4）视频素材可以使用软件中自带的素材，也可以在素材网站中下载完整版的素材2、文案配音（1）把复制好的文案直接导入小程序中（2）调整音色、音调后一键合成音频即可（3）可以选择自己朗读配音，需要花一点时

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. 阿里云RDS——产品系列概述 - 2

    基础版云数据库RDS的产品系列包括基础版、高可用版、集群版、三节点企业版，本文介绍基础版实例的相关信息。RDS基础版实例也称为单机版实例，只有单个数据库节点，计算与存储分离，性价比超高。说明RDS基础版实例只有一个数据库节点，没有备节点作为热备份，因此当该节点意外宕机或者执行重启实例、变更配置、版本升级等任务时，会出现较长时间的不可用。如果业务对数据库的可用性要求较高，不建议使用基础版实例，可选择其他系列（如高可用版），部分基础版实例也支持升级为高可用版。基础版与高可用版的对比拓扑图如下所示。优势 性能由于不提供备节点，主节点不会因为实时的数据库复制而产生额外的性能开销，因此基础版的性能相对于

随机推荐