对于一个产品,会有一个大体上的风格样式和主题色;
但是如果对于某些希望能够自定风格的,如某些app上的不同主题,会同时更改背景颜色,字体颜色,顶部栏颜色等等;
在小程序上实现起来却不是很方便,以下是我现在使用的设置方式:
1.从服务器获取主题色,并将其置于app.globalData
2.在需要使用的页面获取到该颜色值,然后setData进页面数据
3.在页面上元素中添加style="background-color:{{color}}"
而以上是我所有需要此颜色的页面都会进行2.3步操作,感觉很繁琐
有没有什么更加简便的方式来实现类似的功能
用css变量实现
优点:
只需设置最顶层元素style,内部元素直接在wxss中取值
切换主题色不需要频繁setData,响应迅速
不受组件样式隔离影响
css变量并没有全部机型都兼容吧
支持度见此 https://caniuse.com/#feat=css-variables
9102年了要不要兼容Android5以下和iOS9.3以下就看个人选择了。
看产品吧
需要兼顾极少数使用老旧机型用户的产品应该不会需要自定义主题这种功能