全局工具库 (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) | string | 1234567.89 ➔ '1,234,567.89' |
| formatFileSize(bytes) | 文件字节大小转 KB/MB/GB | (bytes: number) | string | 1048576 ➔ '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) | string | Date.now() - 300000 ➔ '5分钟前' |
| padZero(num, targetLength) | 数字高位补零对齐 | (num: number | string, targetLength = 2) | string | padZero(5) ➔ '05' |
| trim(str) | 清除文本首尾空格 | (str: string) | string | ' test ' ➔ 'test' |
| replaceAll(text, search, rep) | 全局替换匹配文本 | (text: string, search: string, rep: string) | string | replaceAll('a-b-c', '-', '/') ➔ 'a/b/c' |
🧮 2. 算法与辅助工具 (util)
| 方法名 | 说明 | 入参 | 返回值 | 示例 |
|---|---|---|---|---|
| debounce(fn, delay) | 函数防抖 (停止触发后才执行) | (fn: Function, delay = 300) | Function | const onSearch = uni.$mu.debounce(search, 300) |
| throttle(fn, interval) | 函数节流 (间隔指定时间执行) | (fn: Function, interval = 300) | Function | const onScroll = uni.$mu.throttle(scroll, 200) |
| deepClone(obj) | 递归深拷贝对象/数组 | (obj: any) | any | const newObj = uni.$mu.deepClone(oldObj) |
| omit(obj, keys) | 剔除对象中指定的 key | (obj: Object, keys: Array<string>) | Object | omit({a:1, b:2}, ['b']) ➔ {a:1} |
| pick(obj, keys) | 挑选对象中指定的 key | (obj: Object, keys: Array<string>) | Object | pick({a:1, b:2}, ['a']) ➔ {a:1} |
| clamp(num, min, max) | 约束数值在 [min, max] 区间 | (num: number, min: number, max: number) | number | clamp(120, 0, 100) ➔ 100 |
| randomInt(min, max) | 生成指定区间的随机整数 | (min: number, max: number) | number | randomInt(1, 10) ➔ 7 |
| uniqueId(prefix) | 生成带前缀的唯一随机 ID | (prefix = 'mu') | string | uniqueId('card') ➔ 'card_17698200_a8f9' |
| isAndroid() | 判断当前是否为 Android/鸿蒙 | - | boolean | uni.$mu.isAndroid() |
| isHarmonyOS() | 判断当前是否为 HarmonyOS | - | boolean | uni.$mu.isHarmonyOS() |
| isIOS() | 判断当前是否为 iOS/macOS | - | boolean | uni.$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)"