前言：

本文的实现目标是全局配置小程序的整体主题色，包括本地图标的色调。第一步实现在本地可以统一修改整体的主题色以及本地图标的颜色；第二步实现通过后台接口动态调整小程序前端的整体主题色以及本地图标颜色。本地图标的主题色调整需要使用svg格式的图片，关于svg图片颜色修改可以参考文章uniapp开发微信小程序——实现动态修改svg图标颜色。

一、统一配置

1、uni.scss

这里使用uni.scss文件来做全局的颜色配置。uniapp的编译器在webpack配置中对uni.scss做了特殊处理，使每个scss文件都被注入了uni.scss，达到配置全局可用的效果。

style节点只需要加上lang="scss"，就可以直接引用uni.scss中配置好的变量，无需import导入。

<style lang="scss">
</style>

这里直接用默认的uni.scss文件内容：

/* 颜色变量 *//* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色/* 边框颜色 */
$uni-border-color:#c8c7cc;/* 尺寸变量 *//* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;

我们在需要引用的页面的style节点加上lang="scss"之后，就可以在样式中直接使用uni.scss中配置好的颜色变量，这里以 $uni-color-primary 为例：

<style lang="scss">.quare-v{width: 200rpx;height: 200rpx;background-color: $uni-color-primary;}
</style>

<view class="content"><view class="quare-v"></view>
</view>

可以看到展现出来的效果，背景颜色为uni.scss中设置好的颜色：

2、js引用uni.scss中变量

以上展示了在style中直接引用uni.scss中配置好的颜色变量。下面来看一下在js中可不可以去引用uni.scss中的颜色变量呢。

js中是不可以直接引用uni.scss中的变量的，首先需要在uni.scss中通过export导出颜色变量，然后在js中import引入uni.scss就可以调用其中配置好的颜色变量了。

uni.scss文件中导出变量示例如下，加上如下代码就可以了：

:export {uni_color_success: $uni-color-success
}

在js中引入uni.scss文件：

import styles from '../../uni.scss'

在需要使用到配置好的颜色的地方，使用如下代码，就可以调用到：

styles.uni_color_success

效果如下：

this.bagColor = styles.uni_color_success;

<view class="content"><view class="square-v" :style="{'background-color': bagColor}"></view><view class="square-v"></view>
</view>

结合文章uniapp开发微信小程序——实现动态修改svg图标颜色。我们可以使用引用的颜色变量的值，修改svg图片的颜色：

在整个工程中，需要用到颜色的样式和js中我们都引入uni.scss，在uni.scss中配置统一的颜色变量。就可以实现修改一处颜色值，全局的颜色都被修改的功能，达到本地统一配置修改全局主题色的目的。

uniapp 微信小程序配置全局主题色、实现动态修改主题色相关推荐

【原创】微信小程序云开发通过input输入框动态修改云数据库的数据
[原创]微信小程序云开发通过input输入框动态修改云数据库的数据效果: 可以在小程序的显示界面中,渲染出数据库的相关内容,并且可以在显示界面中,直接修改数据库中的数据. 初始状态图: 点击获取数据 ...
微信小程序引入ECharts，并自定义动态修改表内参数配置
ECharts官方并没有给出小程序的相关参考,但是有大神做出了ECharts-小程序版,可以直接引用. 效果图引用步骤 1.下载文件 GitHub - ecomfe/echarts-for-weix ...
微信小程序wxss---对应css样式（动态修改css样式）
微信中wxss有些类似于scss,可以引用外联样式.但是不知道怎么继承css样式下图是微信中动态绑定css样式,实现css样式的动态修改
uni-app 微信小程序设置全局的分享onShareAppMessage
创建一个 mixins ,我的文件路径为 : common/share.js export default {onShareAppMessage(res) { //发送给朋友return {}},on ...
uni-app微信小程序封装全局判断是否登录方法结合全局变量
新建的uni-app项目会有个app.vue文件,在此文件下 onLaunch应用生命周期封装一个方法(把全局变量定义一下): 注意:onLaunch应用生命周期只会触发一次 app.vue: < ...
微信小程序开发文档-小程序配置 /全局配置
# 全局配置小程序根目录下的 app.json 文件用来对微信小程序进行全局配置.文件内容为一个 JSON 对象,有以下属性: # 配置项属性类型必填描述最低版本 entryPagePat ...
Uni-app微信小程序开发
Uni-app微信小程序开发环境配置下载好h5和微信小程序,在h5中创建一个uni-app空项目第一次运行到微信小程序的时候,需要将小程序的安装路径放到运行下面文件含义 Pages:存放页面文 ...
【大白话学习】UniApp 微信小程序与APP应用开发零基础入门教程(一）---基础页面框架搭建
写在前面话: 随着互联网的快速发展,微信小程序应用的快速便捷,不用下载安装等的优势越来越明显,于是,我就开始着手于小程序开发的学习,虽然微信提供了开发工具,但它只能生成小程序 ,不能生成APP,那么有 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...

uniapp 微信小程序配置全局主题色、实现动态修改主题色

前言：

一、统一配置

uniapp 微信小程序配置全局主题色、实现动态修改主题色相关推荐

最新文章

热门文章