使用css控制
/* app.wxss */
/* web开发中顶层变量的key名是:root,小程序使用page */
page {
--themeColor: red;
}
// 使用
view {
color: var(--themeColor)
}
这样的缺点是:
我们无法通过 js 来更灵活的控制,只能手动去代码中改page { --themeColor: red;}
,当然在非小程序的项目里能拿到 dom 元素,当然也可以用 js 获取和修改全局 css 变量的,详情看这里
所以要看接下来的方法
使用js控制
// config/theme.js
const viewData = {
myStyle: `
--themeColor: #3b6ace;
`
}
export default viewData
// pages/index/index.js
import viewData from '../../config/theme'
Page({
data: {
viewData: viewData
}
})
给最大的view标签上注入你的全局 css,然后就可以在项目中用啦
// pages/index/index.wxml
<view style="{{ viewData.myStyle }}"></view>
// pages/index/index.wxss
// 使用
view {
color: var(--themeColor)
}
这样就可以实现,后台配置小程序主题,小程序自动变色的功能啦~
作者:css变量系列(2):小程序中使用css变量实现改变主题颜色_小程序css variabel_Lvan的前端笔记的博客-CSDN博客