如何开启深色模式(DarkMode)
在 app.json 中 darkmode 设置为 true,即表示此小程序已适配了深色模式。
如何定义深色模式
1. 在app.json中配置themeLocation,指定变量配置文件theme.json路径,例如:在根目录下新增theme.json,需要置"themeLocation":"theme.json";
2. 在theme.json中定义相关变量;
3. 在app.json中以@开头引用变量。
举例:theme.json
{
"light": {
"navBgColor": "#f6f6f6",
"navTxtStyle": "black"
},
"dark": {
"navBgColor": "#191919",
"navTxtStyle": "white"
}
}
app.json 及 页面配置中引用相关变量
// 全局配置
{
"window": {
"navigationBarBackgroundColor": "@navBgColor",
"navigationBarTextStyle": "@navTxtStyle"
}
}
// 页面配置
{
"navigationBarBackgroundColor": "@navBgColor",
"navigationBarTextStyle": "@navTxtStyle"
}
获取当前是否是深色模式
如果app.json中声明了"darkmode": true,wx.getSystemInfo或wx.getSystemInfoSync的返回结果中会包含theme属性,值为light或dark。
如果app.json未声明"darkmode": true,则无法获取到theme属性(即theme为undefined)
监听主题切换事件
支持2种方式:
1. 在App()中传入onThemeChange回调方法,主题切换时会触发此回调
2. 通过wx.onThemeChange监听主题变化,wx.offThemeChange取消监听
适配CSS
/* 一般情况下的样式 begin */
.some-background {
background: white;
}
.some-text {
color: black;
}
/* 一般情况下的样式 end */
@media (prefers-color-scheme: dark) {
/* DarkMode 下的样式 start */
.some-background {
background: #1b1b1b;
}
.some-text {
color: #ffffff;
}
/* DarkMode 下的样式 end */
}
-
wx.setStorage 将数据存储在本地缓存中指定的 key 中微信小程序wx.setStorage 将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。
-
微信小程序wx.getExtConfig 的同步版本 APIwx.getExtConfig 为微信小程序的同步版本 API。
-
store-home 微信小程序内嵌微信小店首页,展示小店首页,并进行跳转交易store-home 是微信小程序内嵌微信小店首页,展示小店首页,并进行跳转交易组件。
-
store-product 微信小程序内嵌微信小店商品,展示小店商品,并进行跳转交易。store-product 微信小程序内嵌微信小店商品,展示小店商品,并进行跳转交易。支持小店优选联盟带货跟佣功能。
-
wx.openChannelsActivity 微信小程序打开视频号视频APIwx.openChannelsActivity 是微信小程序打开视频号视频API。
-
微信小程序wx.getInferenceEnvInfo 获取通用AI推理引擎版本APIwx.getInferenceEnvInfo为微信小程序获取通用AI推理引擎版本API。
暂无评论,抢个沙发...