| 微信小程序动态更改主题色 | 您所在的位置：网站首页 › 小程序框架wepy › 微信小程序动态更改主题色 |
|
动态更改主题色最关键的一个点就是利用css的颜色变量，话不多说，直接上代码块吧 颜色配置文件 themeSystem.js const state={ // 绿色系主题 green:`--secondColor:#50C090;--themeColor:#29A883;`, // 蓝色系主题 blue:`--secondColor:#3358E7;--themeColor:#1940DB;`, } function setTheme(theme){ if(theme==1){ wx.setStorageSync('systemTheme',state.blue) wx.setStorageSync('systemThemeCode','blue') return state.blue }else if(theme==2){ wx.setStorageSync('systemTheme',state.green) wx.setStorageSync('systemThemeCode','green') return state.green } } module.exports = { setTheme }在app.js中引入 这一步主要是通过后台配置的主题色来修改前端保存的主题色 app.js const theme = require("./utils/themeConfig") App({ async onLaunch() {}, async onShow(){ theme.setTheme(1) //这里我只是示范，setTheme方法里面具体的值可以根据后端接口返回 } })使用时： 使用时可以直接在页面最外层的view上引入一个变量theme，也就是我们配置的颜色具体内容，利用css的继承性，整个页面都可以使用 |
| CopyRight 2018-2019 实验室设备网 版权所有 |