微信小程序中暗黑模式的示例分析 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下微信小程序中暗黑模式的示例分析,希望大家阅读完这篇文章之后都有所收获、下面让我们一起去探讨吧!

1,开启暗黑模式

在<代码>应用程序。json代码中配置<代码>“darkmode":真正的

//,app.json 　　{ 　　,,,… 　　,,,“darkmode":真实　　}

2,配置主题文件

在根目录新建主题配置文件<代码>的主题。json> 应用程序。json代码中配置路径引入

//,app.json 　　{ 　　,,,… 　　,,,“themeLocation":,“theme.json" 　　}

<代码>的主题。json> 和<代码>黑>

<代码>的主题。json> //,theme.json 　　{ 　　“light"才能:,{ 　　,,,“navBackgroundColor":,“# ffffff" 　　,,,“navTextStyle":,“black" 　　,,}, 　　“dark"才能:,{ 　　,,,“navBackgroundColor":,“# 000000“, 　　,,,“navTextStyle":,“white" 　　,,} 　　}

必须存在<代码> 光和黑暗<代码> 两个属性,里层命名自定义,没有严格要求。

3,在<代码>应用程序。json代码中应用配置属性

在配置属性以<代码> @ 开头拼接<代码>的主题。json代码中自定义的名字写入配置,示例如下

//,app.json 　　{ 　　,,… 　　“window"才能:,{ 　　,,,“navigationBarBackgroundColor":,“@navBackgroundColor" 　　,,,“navigationBarTitleText":,“小书包大梦想,, 　　,,,“navigationBarTextStyle":,“@navTextStyle" 　　,,}, 　　“darkmode"才能:,真的, 　　“themeLocation"才能:,“theme.json" 　　}

配置完些,接着手机开启暗黑模式(深色模式)后,小程序会根据你配置的颜色进行转换。