Skip to content

全局工具库 (uni.$mu) v2.1.0

MuzhiyuUI 实现了原生级的 UniApp 全局命名空间挂载 (uni.$mu)

main.js 中使用 app.use(muzhiyuUI) 注册插件后,可以在任何页面、任何 <script setup>、任何工具 JS 函数或请求拦截器零 import 直接调用 uni.$mu


⚡ 1. 零 import 全局调用示范 (uni.$mu)

javascript
// 1. 发起 HTTP 网络请求 (全局拦截器自动处理)
uni.$mu.http.get('/api/user/profile').then(res => {
  console.log('用户信息:', res)
})

// 2. 命令式 Toast 弹窗 / 顶部 Notify 通知
uni.$mu.toast('操作成功', 'success')
uni.$mu.notify({ message: '您有一条新的订单提醒', type: 'warning' })

// 3. 手机号/姓名/身份证自动脱敏
console.log(uni.$mu.maskPhone('13812345678')) // "138****5678"
console.log(uni.$mu.maskName('欧阳六六'))     // "欧**六"

// 4. 正则校验与表单规则批量引擎
console.log(uni.$mu.validator.isMobile('13812345678')) // true

// 5. 易读格式化 (金额 / 文件大小 / 相对时间)
console.log(uni.$mu.formatMoney(1234567.89)) // "1,234,567.89"
console.log(uni.$mu.formatFileSize(1048576))  // "1.00 MB"
console.log(uni.$mu.timeAgo(Date.now() - 3600000)) // "1小时前"

📦 2. 按需 ESM 模块导入方式

如果您偏好显式模块导入,同样支持 ES Module 方式解构引入:

javascript
import { http, toast, notify, util, validator, validate, clipboard, color } from 'muzhiyu-ui' // 或 '@/uni_modules/muzhiyu-ui'

toast('保存成功', 'success')
notify({ message: '系统消息', type: 'primary' })

📑 3. 完整工具函数 API 索引清单


🔤 1. 数据脱敏与格式化 (util)

方法名说明入参返回值示例
maskPhone(num)手机号中间 4 位脱敏(num: string | number)string'13812345678''138****5678'
maskName(name)中文姓名隐藏中间字脱敏(name: string)string'张三''张*', '欧阳六六''欧**六'
maskIdCard(idCard)18 位身份证号码脱敏(idCard: string)string'110101199003072345''110101********2345'
formatMoney(money, decimals)金额千分位格式化(money: number, decimals = 2)string1234567.89'1,234,567.89'
formatFileSize(bytes)文件字节大小转 KB/MB/GB(bytes: number)string1048576'1.00 MB'
formatDate(format, date)日期时间自定义格式化(format: string, date: Date | number)string('YYYY-MM-DD', Date.now())'2026-07-24'
timeAgo(date)转换为人性化相对时间(date: Date | string | number)stringDate.now() - 300000'5分钟前'
padZero(num, targetLength)数字高位补零对齐(num: number | string, targetLength = 2)stringpadZero(5)'05'
trim(str)清除文本首尾空格(str: string)string' test ''test'
replaceAll(text, search, rep)全局替换匹配文本(text: string, search: string, rep: string)stringreplaceAll('a-b-c', '-', '/')'a/b/c'

🧮 2. 算法与辅助工具 (util)

方法名说明入参返回值示例
debounce(fn, delay)函数防抖 (停止触发后才执行)(fn: Function, delay = 300)Functionconst onSearch = uni.$mu.debounce(search, 300)
throttle(fn, interval)函数节流 (间隔指定时间执行)(fn: Function, interval = 300)Functionconst onScroll = uni.$mu.throttle(scroll, 200)
deepClone(obj)递归深拷贝对象/数组(obj: any)anyconst newObj = uni.$mu.deepClone(oldObj)
omit(obj, keys)剔除对象中指定的 key(obj: Object, keys: Array<string>)Objectomit({a:1, b:2}, ['b']){a:1}
pick(obj, keys)挑选对象中指定的 key(obj: Object, keys: Array<string>)Objectpick({a:1, b:2}, ['a']){a:1}
clamp(num, min, max)约束数值在 [min, max] 区间(num: number, min: number, max: number)numberclamp(120, 0, 100)100
randomInt(min, max)生成指定区间的随机整数(min: number, max: number)numberrandomInt(1, 10)7
uniqueId(prefix)生成带前缀的唯一随机 ID(prefix = 'mu')stringuniqueId('card')'card_17698200_a8f9'
isAndroid()判断当前是否为 Android/鸿蒙-booleanuni.$mu.isAndroid()
isHarmonyOS()判断当前是否为 HarmonyOS-booleanuni.$mu.isHarmonyOS()
isIOS()判断当前是否为 iOS/macOS-booleanuni.$mu.isIOS()

💬 3. JS 命令式组件触发 (toast / notify / loadingPage)

可以在任意非 .vue 组件的外部工具 JS 中直接呼出/关闭全局弹窗控件:

javascript
// 1. 触发 Toast
uni.$mu.toast('操作成功', 'success')
uni.$mu.toast.hide() // 手动关闭

// 2. 触发 顶部 Notify 通知
uni.$mu.notify({ message: '未读新消息', type: 'primary', duration: 3000 })
uni.$mu.notify.hide() // 手动关闭

// 3. 触发 全屏加载页 LoadingPage
uni.$mu.loadingPage('正在加载数据...')
uni.$mu.loadingPage.hide() // 手动关闭

// 4. 原生全屏遮罩 Loading
uni.$mu.showLoading('加载中...')
uni.$mu.hideLoading()

✅ 4. 表单正则校验与批量引擎 (validator & validate)

常用正则单项校验库 (uni.$mu.validator)

方法名说明示例
isNullOrEmpty(val)检查是否为空或未定义 (null/undefined/'')validator.isNullOrEmpty('')true
isMobile(val)检查中国大陆 11 位手机号validator.isMobile('13812345678')true
isEmail(val)检查电子邮箱格式validator.isEmail('user@domain.com')true
isIdCard(val)检查 18 位身份证 (含加权校验码计算)validator.isIdCard('110101199003072345')true
isCarNo(val)检查新能源 8 位与燃油车 7 位车牌号validator.isCarNo('粤B88888')true
isAmount(val)检查合法金额格式validator.isAmount('99.50')true
isNum(val)检查是否全为纯数字validator.isNum('12345')true
isUrl(val)检查 URL 网址validator.isUrl('https://muyulingxi.com')true
isChinese(val)检查纯汉字文本validator.isChinese('木之羽')true
isPostalCode(val)检查 6 位邮政编码validator.isPostalCode('518000')true
isIP(val)检查 IPv4 地址validator.isIP('192.168.1.1')true

表单批量校验引擎 (uni.$mu.validate)

零繁琐配置,传入数据对象与规则配置数组,自动返回第一个未通过的错误提示文本(如果返回空字符串 "" 则表示校验全部通过):

javascript
const formData = {
  mobile: '13812345678',
  email: 'invalid-email'
}

const rules = [
  { name: 'mobile', rule: ['required', 'isMobile'], msg: ['请填写手机号', '手机号格式不正确'] },
  { name: 'email', rule: ['required', 'isEmail'], msg: ['请填写邮箱', '邮箱格式不正确'] }
]

const errorMsg = uni.$mu.validate(formData, rules)

if (errorMsg) {
  uni.$mu.toast(errorMsg, 'error')
} else {
  console.log('表单校验全部通过,提交接口!')
}

📋 5. 跨平台剪贴板读写 (clipboard)

自动兼容 H5 (navigator.clipboard / execCommand)、微信小程序与 Native App 的剪贴板 API:

javascript
// 1. 复制文本到系统剪贴板
uni.$mu.clipboard.copy('Hello MuzhiyuUI').then(success => {
  if (success) uni.$mu.toast('已复制到剪贴板', 'success')
})

// 2. 读取剪贴板内容
uni.$mu.clipboard.read().then(text => {
  console.log('剪贴板最新文本:', text)
})

🎨 6. 颜色转换与混合计算 (color)

用于前端按压色彩合成、主题色加深/减淡及 Hex ↔ RGB 转换:

javascript
// 1. RGB 转 Hex 十六进制
console.log(uni.$mu.color.rgbToHex(23, 23, 23)) // "#171717"

// 2. Hex 转 RGB 对象
console.log(uni.$mu.color.hexToRgb('#171717')) // { r: 23, g: 23, b: 23 }

// 3. 两种颜色按权重比例混合 (生成按压状态色)
console.log(uni.$mu.color.mix('#171717', '#FFFFFF', 0.8)) // "rgb(69,69,69)"

基于 MIT 协议开源发行