Skip to content

演示APP

推荐浏览器扫码安装

WxConfig

用来设置或查看全局配置

使用

在任意需要使用的文件内引入 WxConfig.uts 即可配置,修改后立即生效。

js
import { WxConfig } from '@/uni_modules/wx-ui/libs/config.uts'
let wxConfig = new WxConfig();

返回值

类型
WxConfig

WxConfig 的属性值

名称类型必填默认值描述
themeWxThemeType-目前的主题色彩列表
setConfig(Config)=>void-设置全局配置方法
setThemeColor(color, themeName?)=>void-设置主题色列表中的任意一项的方法

WxThemeType 类型与 WxSetThemeType 类型 一致,唯一区别是 WxSetThemeType 是设置时使用的,参数可选填,WxThemeType 是读取时使用的。

setConfig(Config)

设置全局配置

参数

名称类型必填默认值描述
ConfigWxSetConfigType-全局配置

WxSetConfigType

名称类型必填默认值描述
themeWxSetThemeType-主题色彩列表

WxSetThemeType

名称类型必填默认值描述
primarystring#3c9cff主题色
primaryDarkstring#398ade主题色暗色
primaryDisabledstring#9acafc主题色禁用色
primaryLightstring#ecf5ff主题色亮色
warningstring#f9ae3d警告色
warningDarkstring#f1a532警告暗色
warningDisabledstring#f9d39b警告禁用色
warningLightstring#fdf6ec警告亮色
successstring#5ac725成功色
successDarkstring#53c21d成功暗色
successDisabledstring#a9e08f成功禁用色
successLightstring#f5fff0成功亮色
errorstring#f56c6c错误色
errorDarkstring#e45656错误暗色
errorDisabledstring#f7b2b2错误禁用色
errorLightstring#fef0f0错误亮色
infostring#909399信息色
infoDarkstring#767a82信息暗色
infoDisabledstring#c4c6c9信息禁用色
infoLightstring#f4f4f5信息亮色
mainstring#333333主要文字色
contentstring#606266常规文字色
secondarystring#909193次要文字色
placeholderstring#c0c4cc占位文字色
backgroundstring#f3f4f6背景色
disabledstring#c8c9cc禁用色
borderstring#e7e6e4边框色

setThemeColor(color, themeName?)

设置主题色列表中的任意一项

参数

名称类型必填默认值描述
colorstring(string.ColorString)-要设置的颜色
themeNamestringprimary要设置的主题色名称

themeName

值名称描述
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边框色

示例

html
<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>

演示效果