小程序原生开发中一个变量控制页面的主题 javascript前端小程序

【小程序原生开发中一个变量控制页面的主题】废话少说，先看效果

文章图片

github地址经典逻辑推理题（求个关注～～）
普通的网页项目可以很容易的实现换肤功能，可以通过js改变link元素中引入的css主题样式链接。但是微信小程序不能动态改变wxss文件，所以需要其他的方案来实现。
从网上大致查了一些方案，这两种方式都需要在wxml页面中引入很多变量，对于复杂的页面看起来就不那么美观。

为元素增加一个class后缀，通过更改后缀名称对应不同的类名
配色以对象形式保存在globalData中，每个页面中获取主题色，并在页面中使用的地方通过style来改变页面的样式。

思路:
小程序wxss中使用的var变量需要在外层元素的样式中事先定义好，此时如果改变外层元素中定义变量的位置，就可以方便的引用不同的主题样式变量。
实现举例：
只需要在js中动态改变theme变量的值为全局引用的wxss中定义的主题类名（theme-green，theme-dark)即可动态改变最外层view中的主题样式。

wxml：标题 wxss: .title { background: var(--title-bg); }全局wxss: .theme-green { --text-color: unset; --page-bg: rgba(233,251,239,1); --title-bg: rgba(184,241,204,0.5); /** 页面最外层公用的一些样式 */ color: var(--text-color); background: var(--page-bg); } .theme-dark { --text-color: white; --page-bg: rgba(0, 0, 0,1); --title-bg: rgba(31, 32, 34,1); /** 页面最外层公用的一些样式 */ color: var(--text-color); background: var(--page-bg); }