更新记录
1.0.0(2026-02-04)
下载此版本
常用功能和 uni-app API 封装的工具库,旨在提高开发效率。
平台兼容性
uni-app(3.6.16)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| √ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
其他
通用工具库使用文档 (common/utils.js)
common/utils.js 是一个集成了常用功能和 uni-app API 封装的工具库,旨在提高开发效率。
📦 引入方式
1. 局部引入(推荐)
import utils from '@/common/utils.js';
utils.toast('Hello');
2. 全局挂载
在 main.js 中挂载:
import utils from '@/common/utils.js';
// Vue 3
app.config.globalProperties.$utils = utils;
uni.$utils = utils;
使用时:
this.$utils.toast('Hello'); // Options API
uni.$utils.toast('Hello'); // 任意位置
🛠️ API 列表
1. 时间/日期处理 (Date)
| 方法名 |
参数 |
描述 |
示例 |
| formatDate |
(time, format) |
格式化时间 |
utils.formatDate(Date.now(), 'YYYY-MM-DD') |
| getRelativeTime |
(time) |
获取相对时间 |
utils.getRelativeTime(Date.now() - 60000) // "1分钟前" |
| getDayOfWeek |
(date, prefix) |
获取星期几 |
utils.getDayOfWeek(new Date()) // "周三" |
| addToDate |
(date, amount, unit) |
时间加减 |
utils.addToDate(new Date(), 1, 'day') |
| getStartOfDay |
(date) |
获取当天开始时间 |
utils.getStartOfDay(new Date()) |
| getEndOfDay |
(date) |
获取当天结束时间 |
utils.getEndOfDay(new Date()) |
| getDaysInMonth |
(year, month) |
获取某月天数 |
utils.getDaysInMonth(2023, 2) // 28 |
| isLeapYear |
(year) |
是否闰年 |
utils.isLeapYear(2024) // true |
| getDateDetails |
(date) |
获取详细日期信息 |
utils.getDateDetails(new Date()) // {year, month...} |
| isSameDay |
(date1, date2) |
是否同一天 |
utils.isSameDay(d1, d2) |
| compareDate |
(date1, date2) |
比较日期大小 |
utils.compareDate(d1, d2) // 1, -1, 0 |
| isBirthday |
(birthday, dateToCheck) |
是否生日 |
utils.isBirthday('1990-10-01') // true/false |
2. 字符串与数字 (String & Number)
| 方法名 |
参数 |
描述 |
示例 |
| truncateString |
(str, length) |
字符串截断 |
utils.truncateString('这是一个很长的文本', 5) // "这是一个..." |
| formatMoney |
(number, decimals) |
金额千分位 |
utils.formatMoney(12345.67) // "12,345.67" |
| formatFileSize |
(size) |
文件大小格式化 |
utils.formatFileSize(1024) // "1.00 KB" |
| formatPhoneNumber |
(phone, separator) |
手机号344格式 |
utils.formatPhoneNumber('***') // "138 0013 8000" |
| maskString |
(str, start, end, mask) |
字符串脱敏 |
utils.maskString('***') // "138****8000" |
| camelToKebab |
(str) |
驼峰转连字符 |
utils.camelToKebab('fooBar') // "foo-bar" |
| kebabToCamel |
(str) |
连字符转驼峰 |
utils.kebabToCamel('foo-bar') // "fooBar" |
| clamp |
(num, min, max) |
限制数字范围 |
utils.clamp(120, 0, 100) // 100 |
| randomString |
(len) |
随机字符串 |
utils.randomString(16) |
| padZero |
(num) |
数字补零 |
utils.padZero(5) // "05" |
3. 数据校验 (Validation)
| 方法名 |
参数 |
描述 |
示例 |
| isPhoneNumber |
(phone) |
验证手机号 |
utils.isPhoneNumber('***') |
| isEmail |
(email) |
验证邮箱 |
utils.isEmail('test@example.com') |
| isIDCard |
(idCard) |
验证身份证 |
utils.isIDCard('110101199003071234') |
| isEmpty |
(value) |
验证空值 |
utils.isEmpty([]) // true |
4. 树形结构操作 (Tree) ✨
| 方法名 |
参数 |
描述 |
示例 |
| listToTree |
(list, id, pid, children) |
列表转树 |
utils.listToTree(list) |
| treeToList |
(tree, children) |
树转列表 |
utils.treeToList(tree) |
| findNode |
(tree, func, children) |
查找节点 |
utils.findNode(tree, node => node.id === 1) |
5. URL 与 数组处理 (URL & Array)
| 方法名 |
参数 |
描述 |
示例 |
| parseUrlParams |
(url) |
URL参数解析 |
utils.parseUrlParams('?id=1') // {id: "1"} |
| objToUrlParams |
(obj) |
对象转URL参数 |
utils.objToUrlParams({id:1}) // "id=1" |
| uniqueArray |
(arr) |
数组去重 |
utils.uniqueArray([1,1,2]) // [1,2] |
| shuffleArray |
(arr) |
数组乱序 |
utils.shuffleArray([1,2,3]) |
| groupBy |
(arr, key) |
数组分组 |
utils.groupBy(list, 'type') |
6. 颜色处理 (Color)
| 方法名 |
参数 |
描述 |
示例 |
| hexToRgba |
(hex, opacity) |
Hex转RGBA |
utils.hexToRgba('#ff0000', 0.5) |
7. UI 与 系统 (UI & System)
| 方法名 |
参数 |
描述 |
示例 |
| toast |
(title, icon, duration) |
提示框 |
utils.toast('成功', 'success') |
| showLoading |
(title) |
显示Loading |
utils.showLoading() |
| hideLoading |
() |
隐藏Loading |
utils.hideLoading() |
| showModal |
(content, title, showCancel) |
模态弹窗(Promise) |
await utils.showModal('确认删除?') |
| copy |
(content) |
复制文本 |
utils.copy('text') |
| makePhoneCall |
(phone) |
拨打电话 |
utils.makePhoneCall('10086') |
8. 节点与尺寸 (Node & Size) ✨
| 方法名 |
参数 |
描述 |
示例 |
| getRect |
(selector, component) |
获取节点信息 |
await utils.getRect('.box', this) |
| getRectAll |
(selector, component) |
获取所有节点信息 |
await utils.getRectAll('.item', this) |
| px2rpx |
(px) |
px转rpx |
utils.px2rpx(100) |
| rpx2px |
(rpx) |
rpx转px |
utils.rpx2px(200) |
9. 对象操作 (Object) ✨
| 方法名 |
参数 |
描述 |
示例 |
| pick |
(obj, keys) |
选取属性 |
utils.pick({a:1,b:2}, ['a']) // {a:1} |
| omit |
(obj, keys) |
排除属性 |
utils.omit({a:1,b:2}, ['b']) // {a:1} |
10. 辅助函数 (Helper) ✨
| 方法名 |
参数 |
描述 |
示例 |
| sleep |
(ms) |
睡眠/延迟 |
await utils.sleep(1000) |
| random |
(min, max) |
范围随机数 |
utils.random(10, 20) |
| safeJSONParse |
(str, defaultValue) |
安全解析JSON |
utils.safeJSONParse('bad json', {}) |
11. 更多校验 (Validation) ✨
| 方法名 |
参数 |
描述 |
示例 |
| isURL |
(str) |
验证URL |
utils.isURL('https://...') |
| isChinese |
(str) |
验证中文 |
utils.isChinese('你好') |
12. 增强 uni-app 功能
| 方法名 |
参数 |
描述 |
示例 |
| routerPush |
(url, params) |
带参路由跳转 |
utils.routerPush('/pages/test', {id:1}) |
| previewImage |
(urls, current) |
图片预览 |
utils.previewImage(['http...']) |
13. 其他
- setStorage / getStorage / removeStorage / clearStorage: 安全的缓存操作
- debounce / throttle: 防抖与节流
- deepClone: 深拷贝