安装

// 如果您的项目是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() //获取系统信息