需要:依据后盾返回的 主题色和主题背景 动静设置款式
如果是简简单单的能够间接操作的 style 就不足为虑
style="background-color:{{data.background_color ? data.background_color :'#181C2A'}}"
然而不排除某些在组件上不能间接操作的、加以批改的存在
于是乎收罗了一种解决办法
举个栗子,如下:
在 js 中
Page({
data: {
theme: {style: ''}
},
})
...
// 简简单单赋个值 属性名 如 --color
let primary_color = `--color:` +(res.data.primary_color || `#50b7c1`)
this.setData({'theme.style': primary_color,})
...
在 wxml 中
<!-- 将 css 变量赋值给 style-->
<view class="themeView" style="{{theme.style}}">
</view>
在 wxss 中
/* 应用 var */
.themeView{color: var(--color);
}