uniapp和5+app适配苹果iOS13暗黑模式教程
iOS13开始苹果引入了暗黑模式(DarkMode),在黑暗模式下,系统界面配色都会相应变暗,同时App也需要进行适配。
HBuilderX2.6.3+版本开始支持对暗黑模式的适配处理。
全局开启暗黑模式
为了保证应用的兼容性,HBuilderX打包生成的App默认已关闭兼容暗黑模式,需按以下方法配置开启暗黑模式。
如果不开启黑暗模式,将无法获取当前系统的外观模式
打开项目的manifest.json文件,切换到“源码视图”项
- uni-app项目
在 “app-plus” -> “distribute” -> “ios” 节点下添加 UIUserInterfaceStyle 节点"app-plus": { "distribute": { "ios": { "UIUserInterfaceStyle": "Automatic", //... }, //... }, //...
- 5+ App(WAP2APP)项目
在 “plus” -> “distribute” -> “apple” 节点下添加 UIUserInterfaceStyle 节点"plus": { "distribute": { "apple": { "UIUserInterfaceStyle": "Automatic", //... }, //... }, //...
保存后,提交云端打包后生效
应用适配暗黑模式
在应用中需要获取当前系统设置的外观模式格是否为暗黑模式,如果是则需要调整应用整体UI风格样式进行适配。
获取当前系统外观模式
HBuilderX2.6.3+开始新增5+ API:plus.navigator.getUiStyle获取当前系统外观模式。
返回”dark”表示当前为暗黑模式(DarkMode),”light”表示当前为普通模式(LightMode)。
function getUiStyle(){ var style = plus.navigator.getUiStyle(); if('dark'==style){ console.log('当前为暗黑模式'); }else{ console.log('当前为普通模式'); }
}
监听系统外观模式改变
应用启动后,用户有可能改变系统外观,这时候可以通过监听切换暗黑模式事件进行处理
- 5+ App(WAP2APP)项目
在页面中监听”uistylechange”事件document.addEventListener('uistylechange', function(){ var style = plus.navigator.getUiStyle(); console.log(('dark'==plus.navigator.getUiStyle())?'切换为暗黑模式':'切换为普通模式'); }, false);
系统原生界面适配暗黑模式
应用全局开启暗黑模式后系统原生界面已经自动适配处理暗黑模式,如系统提示框(plus.nativeUI.alert))
- 暗黑模式下效果如下
uniapp暗黑模式弹窗
- 普通模式下效果如下
uniapp正常模式弹窗
如果不想自动适配处理暗黑模式,可以调用plus.nativeUI.setUiStyle强制设置原生界面的外观样式。
以下示例强制应用弹出原生界面为深色(暗黑模式)外观样式,即使系统没有设置为暗黑模式:
plus.nativeUI.setUiStyle('dark'); // ‘light’表示浅色外观样式
注意:必须iOS13+设备上才支持
uniapp和5+app适配苹果iOS13暗黑模式教程相关推荐
- (0105)iOS开发之iOS13 暗黑模式(Dark Mode)适配
导读: Material Design & iOS 13 黑暗模式总结探索 暗黑模式苹果开发文档 如何不进行系统切换样式的适配 注意 同一工程内多个Assets文件在打包后,就会生成一个Ass ...
- iOS 13 问题解决以及苹果登录,暗黑模式
本文对应github地址iOS 13 问题解决以及苹果登录,如果由于github调整导致资源找不到或细节更改,请访问github 本文掘金地址 本文直接搬砖,随便看看就行 iOS 13 (Xcode1 ...
- iOS制作暗黑模式教程
0.前言 随着iOS13的普及,大多数的APP都已经适配了暗黑模式,网络上关于暗黑模式适配的文章也很多,基本看几篇就能解决掉iOS13暗黑模式的适配.我看了大部分的文章,基本都是对暗黑模式通用的介绍和 ...
- iOS开发之iOS13 暗黑模式(Dark Mode)适配
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/shifang07/article/de ...
- Android App Dark Theme(暗黑模式)适配指南,android实战mysql
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2qd7l5a-1636430548017)(https://user-gold-cdn.xitu.io/2020/3/ ...
- Android App Dark Theme(暗黑模式)适配指南
在 2019 年的 Google I/O 和 Apple WWDC 上,新露面的 Android 10 和 iOS 13 都宣布将支持 Dark Theme 也就是我们常说的暗黑模式,并提供相关 AP ...
- React Native解决在ios13暗黑模式下状态栏都为白色的问题
修改node_modules/react-native/React/Modules/RCTStatusBarManager.m文件 将 RCT_ENUM_CONVERTER(UIStatusBarSt ...
- 京东 App适配 iOS 暗黑模式业务实践
以下文章来源于京东零售技术,作者平台研发姚琦 什么是暗黑模式? iOS 13 苹果推出了暗黑模式,暗黑模式在夜间可以更好的保护视力,也可以节省 App 电量消耗.但是 Apple 提供的暗黑模式只支持 ...
- iOS13适配之暗黑模式(Dark Mode)
如果是老项目,改动太多,不想适配暗黑模式的话,有个偷懒的方法.或者还没适配完又不想给用户看,可以先暂时全局关闭暗黑模式:在 Info.plist 文件中,添加 key 为 User Interface ...
最新文章
- leetcode python 032 识别最长合法括号
- 雅虎可能被Verizon收购 阿里巴巴也可能成为接盘者
- 博途v15做上位画面_realme真我V15评测:当科技遇上国潮 越级还能这么玩
- javaweb学习总结(七)——HttpServletResponse对象(一)
- go gin框架:StaticFS搭建文件服务器(可以加载文件夹及文件)
- js中当等于最小值是让代码不执行_JavaScript中最最基础的知识点
- Marketing Cloud contact的API介绍
- java中判断一个字符在字符串中出现的次数
- 华为升级harmonyos的机型名单,华为智慧屏HarmonyOS 1.0.1.50更新机型和方法
- 实习踩坑之路:Git无法拉取最新分支代码?怎么解决?
- 有关注册表技术的各大网站列表
- UVA - 12235 Help Bubu 概率dp 状态压缩 记忆化搜索
- VS2019提示“未能完成操作,不支持此接口”
- DevOps ACA 阿里云效软件测试和质量保证(八)
- python经典教程_零基础 Python爬虫经典实战教程
- python中的figure什么意思_Python Matplotlib.figure.Figure.text()用法及代码示例
- 一个差劲程序员的历程(一)
- 美鸽队长:会飞的移动空气质量监测站
- 上海居住证及居住证积分常见问题(70个常见问题)
- 【Dart 教程系列第 21 篇】Dart 之 firstWhere 返回数组中第一个满足条件的元素