app.js如何修改整个小程序日间夜间模式
时间: 2023-08-11 13:18:58 浏览: 98
日、夜间模式的切换
可以在 `app.js` 文件中定义一个全局变量 `nightMode` 来表示当前是否处于夜间模式,然后在 `App()` 函数中进行初始化:
```
App({
globalData: {
nightMode: false // 默认为日间模式
},
onLaunch: function () {
// 从本地缓存中读取夜间模式状态
const nightMode = wx.getStorageSync('nightMode');
if (nightMode) {
// 如果夜间模式已经打开,则更新全局变量
this.globalData.nightMode = true;
}
}
})
```
然后,在页面中可以通过 `getApp().globalData.nightMode` 来获取当前的夜间模式状态,根据不同的状态来设置背景颜色和字体颜色:
```
Page({
onLoad: function () {
const nightMode = getApp().globalData.nightMode;
if (nightMode) {
// 如果当前处于夜间模式,则设置背景颜色和字体颜色
wx.setBackgroundColor({
backgroundColor: '#000000',
success: function () {
wx.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#000000'
});
}
});
} else {
// 如果当前处于日间模式,则设置背景颜色和字体颜色
wx.setBackgroundColor({
backgroundColor: '#ffffff',
success: function () {
wx.setNavigationBarColor({
frontColor: '#000000',
backgroundColor: '#ffffff'
});
}
});
}
}
})
```
当用户在页面中切换日间模式和夜间模式时,可以通过 `wx.setStorageSync('nightMode', nightMode)` 方法将夜间模式的状态存储在本地缓存中,以便下次打开小程序时能够读取到之前的夜间模式状态。同时,也可以在页面中调用 `getApp().globalData.nightMode = true/false` 来实时更新夜间模式状态。
阅读全文