背景:
小程序要跟随系统,展示深色模式和浅色模式。
实现方案如下
- 通过getAppBaseInfo 获取到应用当前的theme
- 改变全局变量,以控制UI变化
- 纯UI部分,通过css的方式切换(@media (prefers-color-scheme: dark) {})
操作路径
路径1:
- 在浅色模式下,打开小程序
- 右上角圆圈退出小程序
- 在微信中设置为深色主题
- 打开小程序
路径2:
- 在浅色模式下,打开小程序
- 右上角圆圈退出小程序
- 在系统设置中设置系统为深色主题
- 打开微信,打开小程序
表现:
ios系统,两种路径都能够正常监听到主题变化,展示如预期。
安卓系统小程序,通过路径1,即改变微信主题的方式,能够正常变化;但是通过路径2,主题切换后打开小程序,监听到的主题theme仍然为light;若再次打开小程序,则小程序表现正常。
开发使用了Taro+react。
给个代码片段看看呢(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
你测这些没什么用,正常没几个用户怎么操作
并且还有一个现象,切换主题后,ios端,getSystemInfoSync和getAppBaseInfo这两个API获取到的theme 有几率不一致。