安装
// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令： // npm init -y // 安装 npm install uview-ui // 更新 npm update uview-ui
在main.js全局引入
import uView from 'uview-ui'; Vue.use(uView);
工具函数的使用
1. 函数防抖、节流
/** * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */ this.$u.debounce(func, wait = 500, immediate = false) this.$u.debounce(() => { alert('防抖') }, 500) /** * 节流原理：在一定时间内，只能触发一次 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */ this.$u.throttle(func, wait = 500, immediate = true) this.$u.debounce(() => { throttle('节流') }, 500)
2. 对象转url参数
/** * 对象转url参数 * @param {*} data,对象 * @param {*} isPrefix,是否自动加上"?" */ this.$u.queryParams(data = {}, isPrefix = true, arrayFormat = 'brackets') let test = this.$u.queryParams({a:1,b:2,c:3,d:4}) console.log(test) //输出 ?a=1&b=2&c=3&d=4
3. 路由封装
/** * 路由跳转方法，该方法相对于直接使用uni.xxx的好处是使用更加简单快捷 * 并且带有路由拦截功能 * options对象内容 { * type: 'navigateTo', * url: '', * delta: 1, // navigateBack页面后退时,回退的层数 * params: {}, // 传递的参数 * animationType: 'pop-in', // 窗口动画,只在APP有效 * animationDuration: 300, // 窗口动画持续时间,单位毫秒,只在APP有效 * intercept: false, // 是否需要拦截 * } * params 传递的参数 */ this.$u.route(options = {}, params = {}) this.$u.route({ type: 'navigateTo', url: 'pages/order/GoodsReturn/index', params: {a:1,b:2} })
4. 时间格式化
// 其他更多是格式化有如下: // yyyy:mm:dd|yyyy:mm|yyyy年mm月dd日|yyyy年mm月dd日 hh时MM分等,可自定义组合 this.$u.timeFormat(dateTime = null, fmt = 'yyyy-mm-dd') let date = this.$u.timeFormat(new Date()) console.log(date) // 输出 2023-04-13
5. 求两个颜色渐变之间的值
/** * 求两个颜色之间的渐变值 * @param {string} startColor 开始的颜色 * @param {string} endColor 结束的颜色 * @param {number} step 颜色等分的份额 * */ this.$u.colorGradient(startColor = 'rgb(0, 0, 0)', endColor = 'rgb(255, 255, 255)', step = 10) let colorList = this.$u.colorGradient('rgb(0, 0, 0)','rgb(255, 255, 255)') console.log(color) //输出 ["#000000", "#1a1a1a", "#333333", "#4d4d4d", "#666666", "#808080", "#999999", "#b3b3b3", "#cccccc", "#e6e6e6"]
6. 生成全局唯一guid字符串
/** * 本算法来源于简书开源代码，详见：https://www.jianshu.com/p/fdbf293d0a85 * 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier) * 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题 * 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时候,会导致组件内的数据可能出现错乱 * v-for的时候,推荐使用后端返回的id而不是循环的index * @param {Number} len uuid的长度 * @param {Boolean} firstU 将返回的首字母置为"u" * @param {Nubmer} radix 生成uuid的基数(意味着返回的字符串都是这个基数),2-二进制,8-八进制,10-十进制,16-十六进制 */ this.$u.guid(len = 32, firstU = true, radix = null) let uuid = this.$u.guid(10) console.log(uuid) // 输出 upOaeDJn7p
7. 获取主题相关颜色
// ,info|success|warning|primary|default|error this.$u.color.success
8. 根据type获取图标名称
/** * 根据主题type值,获取对应的图标 * @param String type 主题名称,primary|info|error|warning|success * @param String fill 是否使用fill填充实体的图标 */ this.$u.type2icon(type = 'success', fill = false) this.$u.type2icon('success')
9. 打乱数组的顺序
this.$u.randomArray(array = []) let arr = this.$u.randomArray([1,2,3,4,5,6]) console.log(arr) // 输出 [1, 5, 2, 3, 4, 6]
10. 对象和数组的深度克隆
// 深度克隆 this.$u.deepClone(obj)
11. 对象和数组的深度拷贝
// JS对象深度合并 this.$u.deepMerge(target = {}, source = {}) let newObj = this.$u.deepMerge({a:1,b:2,c:3}, {e:1,f:2,g:3}) console.log(newObj) // 输出 {a: 1, b: 2, c: 3, e: 1, f: 2,g:3}
12. 添加单位
// 添加单位，如果有rpx，%，px等单位结尾或者值为auto，直接返回，否则加上rpx单位结尾 this.$u.addUnit(value = 'auto', unit = 'rpx') let value = this.$u.addUnit(200) console.log(value) // 输出 200rpx
13. 规则检验
/** * 验证电子邮箱格式 */ this.$u.test.email(value) /** * 验证手机格式 */ this.$u.test.mobile(value) /** * 验证URL格式 */ this.$u.test.url(value) /** * 验证日期格式 */ this.$u.test.date(value) /** * 验证ISO类型的日期格式 */ this.$u.test.dateISO(value) /** * 验证十进制数字 */ this.$u.test.number(value) /** * 验证整数 */ this.$u.test.digits(value) /** * 验证身份证号码 */ this.$u.test.idCard(value) /** * 是否车牌号 */ this.$u.test.carNo(value) /** * 金额,只允许2位小数 */ this.$u.test.amount(value) /** * 中文 */ this.$u.test.chinese(value) /** * 只能输入字母 */ this.$u.test.letter(value) /** * 只能是字母或者数字 */ this.$u.test.enOrNum(value) /** * 验证是否包含某个值 */ this.$u.test.contains(value) /** * 验证一个值范围[min, max] */ this.$u.test.range(value) /** * 验证一个长度范围[min, max] */ this.$u.test.rangeLength(value) /** * 是否固定电话 */ this.$u.test.landline(value) /** * 判断是否为空 */ this.$u.test.empty(value) /** * 是否json字符串 */ this.$u.test.jsonString(value) /** * 是否数组 */ this.$u.test.array(value) /** * 是否对象 */ this.$u.test.object(value) /** * 是否短信验证码 */ this.$u.test.code(value, len = 6)
14. 对象和数组的深度克隆
// 随机数 this.$u.random(min, max)
15. 去除空格
// 随机数 this.$u.trim(str, pos = 'both')
16. toast提示
// toast提示 this.$u.toast(title, duration = 1500)
17. 获取父组件参数
// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法 // this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx this.$u.getParent(name, keys)
18. 获取整个父组件
// 获取父组件的参数，因为支付宝小程序不支持provide/inject的写法 // this.$parent在非H5中，可以准确获取到父组件，但是在H5中，需要多次this.$parent.$parent.xxx // 这里默认值等于undefined有它的含义，因为最顶层元素( this.$u.$parent(name = undefined)
19. 获取系统信息
this.$u.os() //ios或android this.$u.sys() //获取系统信息
