美文网首页
uni-app做iOS的夜间模式

uni-app做iOS的夜间模式

作者: 前端小慵卿 | 来源:发表于2020-04-28 18:42 被阅读0次

iOS13适配暗黑模式/夜间模式/深色模式/暗黑主题(DarkMode)
问题:
1.监听Android深色或浅色模式的切换
2.在app内页面的按钮切换
3.监听系统外观模式改变

开启适配暗黑模式(DarkMode)

// 在HBuilderX打包生成的App默认已关闭兼容暗黑模式
// 1.打开项目的manifest.json文件,切换到“源码视图”项 添加
"app-plus": {  
 "distribute": {  
   "ios": {  
    "UIUserInterfaceStyle": "Automatic",   
     //...  
   },  
   //...  
 },  
//...

app页面的颜色切换

// 推荐使用CSS中的媒体查询 prefers-color-scheme 进行适配
@media (prefers-color-scheme: dark){  
    .content {  
        background-color: #1B1C1E;  
        color: white;  
    }  
}

获取当前系统外观模式

// 对于页面中的原生标题栏(TitleNView)以及uni-app中的nvue页面,则需获取当前的外观模式,动态修改样式进行适配。 
getUiStyle(){  
  var style = plus.navigator.getUiStyle();  
  if('dark'==style){  
    console.log('当前为暗黑模式');  
  }else{  
    console.log('当前为普通模式');  
  }  
}
// 关于tabBar的深色模式修改
    uni.setNavigationBarColor({
        frontColor: '#ffffff',
        backgroundColor: '#1f1f1f',
        animation: {
            duration: 400,
            timingFunc: 'easeIn'
        }
    })
// 关于导航栏的深色模式修改
    uni.setTabBarStyle({
         color: '#B6B6B6',
         selectedColor: '#EA8C1B',
         backgroundColor: '#1F1F1F',
         borderStyle: 'black'
    })

tabBar uni.setNavigationBarColor
导航栏 uni.setTabBarStyle
对于系统原生的一些提示框是会在开启深色模式后,默认自动适配系统设置的外观样式。

uni中监听系统主题变化

uni.onUIStyleChange(function (res) {  
    console.log(res.style);  
});

详情 https://uniapp.dcloud.io/api/system/theme

关于调试,查看效果

1.准备一个iphone7+,系统设置—显示与亮度-外观(浅色与深色)
2.使用iTools获取手机的UDID
3.将UDID加入https://developer.apple.com/account/resources/devices/list,添加到Devices中
4.生成新的Profiles描述文件
5.按照自定义调试基座及使用说明上的方式,准备development证书和development描述文件,打包development的本地ipa。
6.检测到手机,真机运行

相关文章

  • uni-app做iOS的夜间模式

    iOS13适配暗黑模式/夜间模式/深色模式/暗黑主题(DarkMode)问题:1.监听Android深色或浅色模式...

  • iOS13-适配夜间模式/深色外观(Dark Mode)

    iOS13-适配夜间模式/深色外观(Dark Mode) iOS13-适配夜间模式/深色外观(Dark Mode)

  • iOS关于换肤和夜间模式的一些思考

    iOS关于换肤和夜间模式的一些思考 iOS关于换肤和夜间模式的一些思考

  • iOS swift 夜间模式实现

    夜间模式 iOS 13 以上 @available(iOS 13.0, *) staticletlightGr...

  • iOS 换肤方案

    iOS换肤需求 1、由于iOS13发布的夜间模式,市场上较大型的APP都以积极的适配了夜间模式,因此我们的APP也...

  • ios 夜间模式

    1、真对我们的项目来说 夜间模式是后来项目完工的时候增加的需求, 所以后来直接用这种方式,简单粗暴,直接改wind...

  • iOS 夜间模式

    先来看看效果图 思路 切换夜间/白天模式时,发送通知给所有ViewController,让它们切换到相应的主题。但...

  • iOS-夜间模式(换肤设置)

    iOS 开发中有时候会有夜间模式(换肤设置)的需求, 其实主要是更改相关颜色操作! 思路:每次切换夜间/白天模式...

  • iOS 换肤-黑夜、黑暗、夜间模式

    iOS 开发中有时候会有夜间模式(换肤设置)的需求, 其实主要是更改相关颜色操作! 思路:每次切换夜间/白天模式...

  • Dark mode 模式下更改StatusBar

    夜间/深色模式 DarkMode 夜间模式是iOS13的重要更新之一,随之而来的是我们能从系统设置中“显示与亮度”...

网友评论

      本文标题:uni-app做iOS的夜间模式

      本文链接:https://www.haomeiwen.com/subject/mdrhvhtx.html