免费企业网站建设介绍,网络app推广公司,做视频网站付费版,章丘灵通环保设备在哪个网站上做的需求 :
在我们现有项目基础上, 把原来的颜色替换成另一个颜色, 同时需要为下一个项目预留出来随时更换主题色, 实现一键换色
实现 :
1. 介绍 兼容不同项目对主题色及图标的需求 主要通过以下对css颜色和icon主题色图标两个模块的切换
scss/less的css变量config/index.js中的…需求 :
在我们现有项目基础上, 把原来的颜色替换成另一个颜色, 同时需要为下一个项目预留出来随时更换主题色, 实现一键换色
实现 :
1. 介绍 兼容不同项目对主题色及图标的需求 主要通过以下对css颜色和icon主题色图标两个模块的切换
scss/less的css变量config/index.js中的projectId及config.mainColoruni.scss 中的 $uni-color-primary
2. 代码 2.1 css颜色 2.1.1 使用scss变量定义颜色 /common/common.scss 定义主色调与副色调等其他公用同色系scss变量 ❗❗注意 : 编写代码时, 遇到主题色系颜色, 不要直接写死, 比如 background: #FBF4E4; 应写成 background: $jl-main-color; 2.1.2 使用config/index.js中的config.mainColor定义颜色(作用于js上)/config/index.js定义主色调与副色调等其他公用同色系scss变量 : 部分情况中, 需要通过js逻辑定义或控制颜色的变化, 需要在template及script中引用到主题色系, 因此在config/index.js 中引入使用❗❗注意 : 编写js代码时, 遇到主题色系, 不要写死颜色, 比如 this.activeColor #FBF4E4, 应写成 this.activeColor this.config.mainActiveColor2.1.3 /uni.scss 替换 $uni-color-primary❗❗uniapp插件主题色会默认引用/uni.scss $uni-color-primary, 因此颜色更换及打包时同步需把此处颜色更换 2.2 图标2.2.1 使用config/index.js中的projectId作为图标目录的切换打包时切换projectId , 并确保static/pic 有此目录❗❗注意 : 编写代码时, 遇到主题色系图标, 不要直接写死, 比如 image src/static/pic/youning/wifi1.png/image, 应写成 image :src/static/pic/${projectId}/wifi1.png/image背景图也不要在style标签中定义, 因为style标签中无法使用js变量3. 注意点 ❗❗注意 : 编写代码时, 遇到主题色系颜色, 不要直接写死, 比如 background: #FBF4E4; 应写成 background: KaTeX parse error: Expected EOF, got # at position 71: …activeColor #̲FBF4E4, 应写成 t…{projectId}/wifi1.png 背景图也不要在style标签中定义, 因为style标签中无法使用js变量
总之, 遇到主题色系相关的颜色和图标, 切记不要写死!
