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暗黑模式教程相关推荐

  1. (0105)iOS开发之iOS13 暗黑模式(Dark Mode)适配

    导读: Material Design & iOS 13 黑暗模式总结探索 暗黑模式苹果开发文档 如何不进行系统切换样式的适配 注意 同一工程内多个Assets文件在打包后,就会生成一个Ass ...

  2. iOS 13 问题解决以及苹果登录,暗黑模式

    本文对应github地址iOS 13 问题解决以及苹果登录,如果由于github调整导致资源找不到或细节更改,请访问github 本文掘金地址 本文直接搬砖,随便看看就行 iOS 13 (Xcode1 ...

  3. iOS制作暗黑模式教程

    0.前言 随着iOS13的普及,大多数的APP都已经适配了暗黑模式,网络上关于暗黑模式适配的文章也很多,基本看几篇就能解决掉iOS13暗黑模式的适配.我看了大部分的文章,基本都是对暗黑模式通用的介绍和 ...

  4. iOS开发之iOS13 暗黑模式(Dark Mode)适配

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/shifang07/article/de ...

  5. Android App Dark Theme(暗黑模式)适配指南,android实战mysql

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v2qd7l5a-1636430548017)(https://user-gold-cdn.xitu.io/2020/3/ ...

  6. Android App Dark Theme(暗黑模式)适配指南

    在 2019 年的 Google I/O 和 Apple WWDC 上,新露面的 Android 10 和 iOS 13 都宣布将支持 Dark Theme 也就是我们常说的暗黑模式,并提供相关 AP ...

  7. React Native解决在ios13暗黑模式下状态栏都为白色的问题

    修改node_modules/react-native/React/Modules/RCTStatusBarManager.m文件 将 RCT_ENUM_CONVERTER(UIStatusBarSt ...

  8. 京东 App适配 iOS 暗黑模式业务实践

    以下文章来源于京东零售技术,作者平台研发姚琦 什么是暗黑模式? iOS 13 苹果推出了暗黑模式,暗黑模式在夜间可以更好的保护视力,也可以节省 App 电量消耗.但是 Apple 提供的暗黑模式只支持 ...

  9. iOS13适配之暗黑模式(Dark Mode)

    如果是老项目,改动太多,不想适配暗黑模式的话,有个偷懒的方法.或者还没适配完又不想给用户看,可以先暂时全局关闭暗黑模式:在 Info.plist 文件中,添加 key 为 User Interface ...

最新文章

  1. Nature综述:植物与微生物组的相互作用:从群落装配到植物健康(下)
  2. linux进程控制程序设计论文,嵌入式,linux进程控制程序设计
  3. 【20190226】JavaScript-知识点记录:dom0级事件,dom2级事件
  4. Linux/Unix 如何查看 man 搜索到的手册页(manual page)的位置及复制手册页的内容
  5. mysql 查询视图是否存在_sql server判断数据库、表、列、视图是否存在
  6. cenyos7安装 yum不可用_centos7安装fabric
  7. Project Office 9.0 for mac(任务项目管理软件)
  8. 怎么高速旋转_洗衣机怎么选比较好,滚筒洗衣机和波轮洗衣机哪种更好?
  9. Linux环境下实现简易的DNS域名解析过程
  10. 简单实用的数据可视化案例
  11. 安卓装Linux ,坑真的多,Linux deployTermux踩坑记||在旧手机上建立自己的服务器(1)||2020年新货
  12. 大数据面试3分钟自我介绍_[持续更新]渣渣大数据社招面试之路
  13. Ubuntu 20.04上编译OpenSSL的编译选项设置
  14. 2022年中国大学排行榜出炉~
  15. Linux 自动挂载U盘 实现热插拔
  16. vm8网卡原理及应用
  17. CentOS7修改ip的两种方法
  18. 又是一年数博会,你了解多少呢?
  19. 【干货】信息系统项目监理浅视简识,附高清下载
  20. easyExcel 导出自动添加序号

热门文章

  1. PostgreSQL自定义排序
  2. Android之全面解析Retrofit网络框架封装库
  3. natsort:一款非常棒的 Python 排序库
  4. [云盘](二)我的文件和共享列表后台实现
  5. 心电图 python_【铎悦干货】解析心电图基础(二),看完绝不后悔
  6. 三菱FX5U多冲一切追剪程序
  7. 电影业整体下行趋势中,猫眼怎么做到的扭亏转盈?
  8. 分支与循环超详解(C语言)
  9. SpringBoot循环依赖解决
  10. 车灯解锁壁纸,艾克斯奥特曼登场5周年纪念壁纸附带live壁纸!