『uniapp』onThemeChange监听主题样式，动态主题不正确生效，样式被覆盖的坑

---

欢迎关注 『uniapp』 专栏，持续更新中
欢迎关注 『uniapp』 专栏，持续更新中

问题示例代码

我这个业务场景是在跟随系统主题（深色/浅色模式）的情况下 用户在设置中修改了主题后app自动适应主题。

开启了主题监听

			uni.onThemeChange(({theme}) => {console.log('onThemeChange', theme)uni.setStorageSync('sys_theme', theme)if (uni.getStorageSync('theme_isAuto')) {uni.setStorageSync('theme_mode', theme)}})

在onshow中根据读取的主题设置颜色样式

				this.theme_mode = uni.getStorageSync('theme_mode')//设置顶部导航背景颜色this.navbarBackground = {background: this.theme_mode === 'dark' ? this.themeConfig.dark.navBgColor : this.themeConfig.light.navBgColor};//顶部导航字体颜色this.navTxtStyle = this.theme_mode === 'dark' ? this.themeConfig.dark.navTxtStyle : this.themeConfig.light.navTxtStyle;console.log('ok', this.theme)

排查了半天bug最后发现输出日志的结果

'ok', this.theme
'theme_mode', theme

也就是我们的onshow都执行完毕了，onThemeChange才姗姗来迟，当然无法成功渲染页面。

---

解决思路1（缺点影响显示效果有延迟）

延迟执行，虽然很low，但是一步到位。（我最后才想到这个办法~）最关键的是之前试了没有成功，一直以为不可行，后来发现是因为没有把this.theme_mode = uni.getStorageSync('theme_mode')放到setTimeout里面。

			setTimeout(() => {this.theme_mode = uni.getStorageSync('theme_mode')//设置顶部导航背景颜色this.navbarBackground = {background: this.theme_mode === 'dark' ? this.themeConfig.dark.navBgColor : this.themeConfig.light.navBgColor};//顶部导航字体颜色this.navTxtStyle = this.theme_mode === 'dark' ? this.themeConfig.dark.navTxtStyle : this.themeConfig.light.navTxtStyle;}, 100);

---

解决思路2——通过路由刷新页面（缺点只适用于部分网页）

本质是用uni.reLaunch 页面跳转，而且会导致你无法跳转回原来的网页

在app.vue的onLaunch中

  onLaunch() {uni.onThemeChange(({ theme }) => {console.log('onThemeChange', theme);// 触发路由刷新this.refreshPageRoute();});},

在app.vue的methods中

// 触发路由刷新的方法
refreshPageRoute() {// 获取当前页面路由路径const pages = getCurrentPages();const currentPage = pages[pages.length - 1];const route = currentPage.route;console.log(`/${route}`); // 注意使用反引号（`）来实现字符串插值// 使用 uni.reLaunch 方法刷新当前页面uni.reLaunch({url: `/${route}`});
} 

---

解决思路3——vuex（没学会~）

使用 Vuex 管理状态： 如果你的应用使用了 Vuex 来管理全局状态，你可以在主题变化时更新一个全局状态，然后在需要更新的页面中监听这个状态的变化，在变化时手动调用 onShow 方法。

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2024 mzh

Crated：2024-4-1

欢迎关注 『uniapp』 专栏，持续更新中
欢迎关注 『uniapp』 专栏，持续更新中
『未完待续』

---