当前位置：首页 > news >正文

微信小程序动态切换窗口主题色

news 2025/7/26 11:52:19

在微信开发者工具中动态切换主题颜色会感觉切换页面时有主题颜色闪烁问题，但在真机调试中没有闪烁问题。

1. 设置支持的主题色

在app.js中添加以下内容：

App({/* 省略其它无关代码 */onLaunch() {// 从缓存读取主题色const theme = wx.getStorageSync('theme') || this.globalData.theme;if (theme) {this.globalData.theme = themethis.setTheme(theme)}},/*** 设置主题色* @param theme*/setTheme(theme) {// 动态更新CSS变量wx.setStorageSync('theme', theme)this.globalData.theme = themeconst page = getCurrentPages()[getCurrentPages().length - 1]page.setData({theme: this.globalData.themeColors[theme]});},globalData: {theme: 'black', // 默认主题themeColors: {pink: {name:'粉色',value: 'pink',primary: '#1890ff',background: '#ffffff', // 仅支持黑白两色text: '#ff55a0'},black: {name:'黑色',value: 'black',primary: '#E6E7E9',background: '#ffffff',text: '#000000'}}},
})

2. 创建`themeMixin.js`文件

建议放到utils目录下：如下代码中会将小程序的窗口颜色、窗口标题、TabBar选中文字设置成指定主题颜色，如果有其他需求，可自行添加。

function applyTheme(pageInstance) {const app = getApp()const theme = app.globalData.themewx.setNavigationBarColor({frontColor: app.globalData.themeColors[theme].background,backgroundColor: app.globalData.themeColors[theme].text})wx.setTabBarStyle({selectedColor: app.globalData.themeColors[theme].text})pageInstance.setData({theme: app.globalData.themeColors[theme]})
}module.exports = {applyTheme
}

3. 页面js中初始化主题样式

下面是某页面的JS文件

const { applyTheme } = require('../../utils/themeMixin.js')
Page({/* 省略其它无关代码 */onLoad(options) {this.applyTheme();},
})

4. 页面wxml中应用主题颜色

这里只示例了字体颜色，背景颜色相同道理。

<view style="color:{{theme.text}}">/* 省略其它无关代码 */</view>

5. 动态切换主题颜色

// 当前是动态切换主题的页面js省略版本
const {applyTheme} = require('../../utils/themeMixin.js')Page({/* 省略其它无关代码 */switchTheme(){// 这里的black是模拟赋值，通过选择框等方式让用户动态选择const theme = "black"; getApp().setTheme(theme);applyTheme(this);}
})