必须用独立js函数实现十六进制转rgb，因uni-app vue 3模式已移除filters且小程序不支持管道符；推荐使用兼容#fff、#ffffff等格式的hextorgb函数，并在onload/watch/computed中安全调用。
不能用过滤器把十六进制颜色转 RGB。
uni-app 的 filters 机制在 Vue 3 模式（默认）下已被完全移除，且小程序平台（微信、支付宝、字节等）压根不执行 filter 函数。即使你在 H5 端强行配置了 Vue.filter('hexToRgb', ...)，它也无法在小程序真机或 App 端运行——这不是写法问题，是底层不支持。
更关键的是：颜色转换本身是纯计算逻辑，但「过滤器」这个概念在 uni-app 里早已失效，强行往 template 里写 {{ color | hexToRgb }} 只会静默失败，控制台通常连报错都没有。
为什么 hex → RGB 必须写成普通函数
-
<code>filters是 Vue 2 的遗留 API，uni-app 3.x 基于 Vue 3，setup()和<script setup></script>中没有filters选项 - 小程序编译器不会解析
|管道符，遇到就跳过，color | hexToRgb渲染结果就是原始字符串 - 即使你降级到 Vue 2 模式（main.js 里用
Vue.filter），也仅 H5 有效，其他平台仍不可用
所以，所有颜色转换逻辑必须：
- 封装为独立 JS 函数（如
hexToRgb） - 在
data、computed或setup()中显式调用 - 避免任何依赖模板语法的“自动触发”幻想
hexToRgb 函数怎么写才真正跨平台
下面这个版本能处理 #fff、#FFFFFF、fff、FF6B35 四种常见格式，返回标准 rgb(r,g,b) 字符串：
const hexToRgb = (hex) => {
if (!hex) return 'rgb(0,0,0)'
let c = hex.replace(/^#/, '')
if (c.length === 3) {
c = c.split('').map(x => x + x).join('')
}
const r = parseInt(c.substring(0, 2), 16)
const g = parseInt(c.substring(2, 4), 16)
const b = parseInt(c.substring(4, 6), 16)
return `rgb(${r},${g},${b})`
}
使用时直接调用：
-
<code>hexToRgb('#FF6B35')→rgb(255,107,53) -
<code>hexToRgb('fff')→rgb(255,255,255)
注意：不要试图在 data 里写成 mainColor: hexToRgb(this.colorHex) —— 此时 this.colorHex 还未初始化，会得 NaN。应放在 onLoad、watch 或 computed 里安全调用。
想在 CSS 里动态用 RGB 分量？JS + CSS 变量是唯一路径
CSS 本身无法解析十六进制字符串，color-mix()、color() 等新函数都不能做字符串拆解。
可行做法是：
- 用 JS 解析出 R/G/B 数值：
const { r, g, b } = hexToRgbObj(hex) - 写入 document.documentElement.style：
document.documentElement.style.setProperty('--r', r) - 在 CSS 中引用：
background-color: rgb(var(--r), var(--g), var(--b));
漏掉 fallback 会很危险：如果 JS 执行失败或变量未设置，整个颜色就会退成浏览器默认色（通常是透明或黑色）。务必加一层兜底，比如：
background-color: #FF6B35; background-color: rgb(var(--r), var(--g), var(--b));
实际项目里最容易被忽略的，是把「H5 能跑通」误判为「全平台可用」。一次 | hexToRgb 在开发者工具里看着正常，上线后小程序白屏、App 颜色错乱，问题就出在这里。别省那几行函数调用，老老实实封装、显式调用、分平台验证。
