国产前端神器 @qnvip/core 一站式搞定 90% 业务痛点
Lodash 作为前端工具库标杆确实能打,但在国内业务场景里总有些水土不服。想要个 deepClone 得引入整个库,处理 URL 参数还要额外装 qs,遇到手机号脱敏、身份证校验这些中国特色需求,只能自己写正则硬扛。
@qnvip/core 就是为解决这些问题而来,源自一线大厂业务沉淀,轻量聚合还懂国内生态,堪称前端开发的效率加速器。
三大核心优势 为啥选它不踩坑
1 深耕国内生态 精准适配本土需求
专门针对国内业务场景优化,不用再自己折腾适配方案:
- 小程序生态全覆盖,一键生成微信、支付宝、字节、京东等平台跳转链接
- 内置手机号、15/18 位身份证、中文姓名校验与脱敏逻辑,合规需求轻松满足
- 适配 ElementUI、AntD 等主流组件库,数据结构无缝衔接
2 全能聚合 一个顶五个
装了它,这些依赖都能省:
- 替代 lodash:内置 debounce、throttle、deepClone 等常用工具
- 替代 qs/query-string:parseParams、paramsToQuery 搞定 URL 参数
- 替代 copy-to-clipboard:copyText 实现剪贴板复制
- 替代 file-saver:downloadFile 统一文件下载
- 替代 uuid:generateUID 生成唯一标识
3 企业级品质 用着放心
- 全量 TypeScript 编写,类型提示精准到每一个参数
- 支持 ESM 按需加载,未使用代码自动剔除,不增加冗余
- 零第三方依赖,代码底座干净纯粹,无潜在风险
实用场景直击 解决实际问题才靠谱
场景一 跨端跳转不再头疼
混合开发中,H5 唤起各平台小程序的 Scheme 协议复杂,参数编码容易出错。用 generatePlatformLink 一键搞定,还能反向解析 Scheme 参数:
php
import { generatePlatformLink, schemeToParams } from '@qnvip/core'
// 生成支付宝小程序跳转链接
const alipayLink = generatePlatformLink({
platform: 'ALIPAY',
appId: '202100xxxx',
page: 'pages/home/index',
query: { id: '123', from: 'sms' }
})
// 解析 Scheme 参数
const scheme = 'alipays://platformapi/startapp?appId=2021&page=pages%2Findex&query=a%3D1'
const params = schemeToParams(scheme)
场景二 数据脱敏合规又灵活
个人信息保护越来越严,语义化调用就能实现精准脱敏,还支持少数民族姓名校验:
javascript
import { desensitize, isTrueName } from '@qnvip/core'
const user = {
phone: '13812345678',
idCard: '110101199001011234',
name: '张三丰'
}
console.log(desensitize(user.phone, { type: 'phone' })) // 138****5678
console.log(desensitize(user.idCard, { type: 'idcard' })) // 110***********1234
console.log(isTrueName('迪丽热巴·迪力木拉提')) // true
场景三 中后台开发提效翻倍
针对 Select 下拉框、Table 表格等高频场景,封装专属工具:
php
import { generateSelectOption, findValueToLabel, filterInvalidValues } from '@qnvip/core'
// 后端数据转组件选项
const serverData = [{ region_id: 101, region_name: '北京' }, { region_id: 102, region_name: '上海' }]
const options = generateSelectOption(serverData, 'region_name', 'region_id')
// 状态值转文字
const statusLabel = findValueToLabel([{ label: '已上架', value: 1 }], '1', { defaultValue: '-' })
// 清洗表单空值
const query = filterInvalidValues({ keyword: '手机', type: '', date: null })
场景四 页面安全与文件交互
arduino
import { setWaterMark, downloadFile, getImageDimensions } from '@qnvip/core'
// 添加全屏水印
setWaterMark('绝密资料 严禁外传')
// 兼容多浏览器文件下载
downloadFile(blobData, '报表.xlsx')
// 图片上传前校验尺寸
const { width, height } = await getImageDimensions(file)
快速上手
bash
# npm 安装
npm install @qnvip/core
# pnpm 安装(推荐)
pnpm add @qnvip/core
不用复杂配置,引入即用,让开发精力集中在核心业务上。
海云前端丨前端开发丨简历面试辅导丨求职陪跑