演示APP
推荐浏览器扫码安装
用来设置或查看全局配置
在任意需要使用的文件内引入 WxConfig.uts
即可配置,修改后立即生效。
import { WxConfig } from '@/uni_modules/wx-ui/libs/config.uts'
let wxConfig = new WxConfig();
类型 |
---|
WxConfig |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
theme | WxThemeType | 是 | - | 目前的主题色彩列表 |
setConfig | (Config)=>void | 是 | - | 设置全局配置方法 |
setThemeColor | (color, themeName?)=>void | 是 | - | 设置主题色列表中的任意一项的方法 |
WxThemeType
类型与 WxSetThemeType
类型 一致,唯一区别是 WxSetThemeType
是设置时使用的,参数可选填,WxThemeType
是读取时使用的。
设置全局配置
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
Config | WxSetConfigType | 是 | - | 全局配置 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
theme | WxSetThemeType | 是 | - | 主题色彩列表 |
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
primary | string | 否 | #3c9cff | 主题色 |
primaryDark | string | 否 | #398ade | 主题色暗色 |
primaryDisabled | string | 否 | #9acafc | 主题色禁用色 |
primaryLight | string | 否 | #ecf5ff | 主题色亮色 |
warning | string | 否 | #f9ae3d | 警告色 |
warningDark | string | 否 | #f1a532 | 警告暗色 |
warningDisabled | string | 否 | #f9d39b | 警告禁用色 |
warningLight | string | 否 | #fdf6ec | 警告亮色 |
success | string | 否 | #5ac725 | 成功色 |
successDark | string | 否 | #53c21d | 成功暗色 |
successDisabled | string | 否 | #a9e08f | 成功禁用色 |
successLight | string | 否 | #f5fff0 | 成功亮色 |
error | string | 否 | #f56c6c | 错误色 |
errorDark | string | 否 | #e45656 | 错误暗色 |
errorDisabled | string | 否 | #f7b2b2 | 错误禁用色 |
errorLight | string | 否 | #fef0f0 | 错误亮色 |
info | string | 否 | #909399 | 信息色 |
infoDark | string | 否 | #767a82 | 信息暗色 |
infoDisabled | string | 否 | #c4c6c9 | 信息禁用色 |
infoLight | string | 否 | #f4f4f5 | 信息亮色 |
main | string | 否 | #333333 | 主要文字色 |
content | string | 否 | #606266 | 常规文字色 |
secondary | string | 否 | #909193 | 次要文字色 |
placeholder | string | 否 | #c0c4cc | 占位文字色 |
background | string | 否 | #f3f4f6 | 背景色 |
disabled | string | 否 | #c8c9cc | 禁用色 |
border | string | 否 | #e7e6e4 | 边框色 |
设置主题色列表中的任意一项
名称 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
color | string(string.ColorString) | 是 | - | 要设置的颜色 |
themeName | string | 否 | primary | 要设置的主题色名称 |
值名称 | 描述 |
---|---|
primary | 主题色 |
primaryDark | 主题色暗色 |
primaryDisabled | 主题色禁用色 |
primaryLight | 主题色亮色 |
warning | 警告色 |
warningDark | 警告暗色 |
warningDisabled | 警告禁用色 |
warningLight | 警告亮色 |
success | 成功色 |
successDark | 成功暗色 |
successDisabled | 成功禁用色 |
successLight | 成功亮色 |
error | 错误色 |
errorDark | 错误暗色 |
errorDisabled | 错误禁用色 |
errorLight | 错误亮色 |
info | 信息色 |
infoDark | 信息暗色 |
infoDisabled | 信息禁用色 |
infoLight | 信息亮色 |
main | 主要文字色 |
content | 常规文字色 |
secondary | 次要文字色 |
placeholder | 占位文字色 |
background | 背景色 |
disabled | 禁用色 |
border | 边框色 |
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<text>当前主题色: {{primaryColor}}</text>
<button @click="randomThemeColor()">随机主题色(应用在全局)</button>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup>
import { WxConfig, WxSetConfigType } from '@/uni_modules/wx-ui/libs/config.uts'
let wxConfig = new WxConfig();
// 使用主题色彩列表中的primary
let primaryColor = computed<string>((): string=>{
return wxConfig.theme.primary
})
// 随机主题色
let randomThemeColor = (()=>{
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
let rgbStr = "rgb(" + r + "," + g + "," + b + ")"
wxConfig.setThemeColor(rgbStr, 'primary')
// 也可以通过直接打点进行设置
// wxConfig.theme.primary = rgbStr
})
onLoad((_:OnLoadOptions)=>{
// 修改全局配置
wxConfig.setConfig({
theme: {
primary: '#3c9cff'
}
} as WxSetConfigType)
})
</script>