> 文章列表 > uniapp小程序封装常用工具函数

uniapp小程序封装常用工具函数

uniapp小程序封装常用工具函数

1. formatTime格式化时间

function formatTime(time, format) {if (typeof time !== 'number' || typeof format !== 'string') {return time}var formateArr = ['Y', 'M', 'D', 'h', 'm', 's']var returnArr = []var date = new Date(time)returnArr.push(date.getFullYear())returnArr.push(date.getMonth() + 1)returnArr.push(date.getDate())var hour = date.getHours()returnArr.push(hour > 9 ? hour : '0' + hour)var minute = date.getMinutes()returnArr.push(minute > 9 ? minute : '0' + minute)var second = date.getSeconds()returnArr.push(second > 9 ? second : '0' + second)for (var i in returnArr) {format = format.replace(formateArr[i], returnArr[i])}return format
}

该工具函数用于格式化时间戳为指定格式的时间字符串。使用时传入时间戳和格式化格式,返回格式化后的时间字符串。
例如:

let time = formatTime(1555552000, 'Y-M-D h:m:s')
// time = 2019-04-20 16:00:00

传入时间戳是毫秒级的,格式化字符的含义,如Y表示年,M表示月份,D表示日期等。

2. throttle防抖

function throttle(fn, interval) {var enterTime = 0    // 触发的时间var gapTime = interval    // 间隔时间var resultreturn function () {var context = thisvar args = argumentsvar nowTime = +new Date()if (nowTime - enterTime > gapTime) {fn.apply(context, args) enterTime = nowTime     // 记录本次触发时间} }
}

该工具函数用于防止函数被高频触发,产生性能问题。使用时传入需要防抖的函数和防抖间隔时间。返回的函数在间隔时间内再次触发,不会执行函数,直到间隔时间过后再执行函数。
使用例子:

var touchstartFn = throttle(function(){// 高频触发代码}, 500)// 事件绑定document.addEventListener('touchstart', touchstartFn)

意间隔时间如果间隔时间太长会影响功能,太短无法达到防抖效果。

3. deepClone深拷贝

function deepClone(obj) {if (typeof obj !== 'object' || obj === null) return objlet cloneObj = Array.isArray(obj) ? [] : {}for (let key in obj) {cloneObj[key] = typeof obj[key] === 'object' ? deepClone(obj[key]) : obj[key]}return cloneObj
}

该工具函数用于深拷贝对象、数组。通过递归的方式拷贝对象和数组的所有子属性。
使用例子:

let obj = {a: 1,b: {c: 2}
}
let cloneObj = deepClone(obj)
obj.a = 2     // 改变obj
console.log(cloneObj.a) // 1    cloneObj未改变

对象或数组嵌套层次不能太深,否则会超出递归调用栈,导致拷贝失败。

4. bitOperator按位运算

function bitOperator(num1, num2, operator) {switch (operator) {case '&':   // 与return num1 & num2case '|':   // 或  return num1 | num2case '^':   // 异或return num1 ^ num2case '~':   // 取反return ~num1case '<':   // 左移return num1 << num2case '>':   // 右移return num1 >> num2}
}

该工具函数用于执行按位与(&)、或(|)、异或(^)、取反(~)、左移(<)和右移(>)运算。
使用例子:

let result = bitOperator(2, 3, '&')   // result = 2   2 & 3 = 2
let result = bitOperator(2, 3, '|')   // result = 3   2 | 3 = 3
let result = bitOperator(2, 3, '^')   // result = 1   2 ^ 3 = 1
let result = bitOperator(2, 1, '<')   // result = 4   2 << 1 = 4 

5. randomColor随机颜色

function randomColor() {let rgb = []for (let i = 0; i < 3; ++i) {let color = Math.floor(Math.random() * 256).toString(16)color = color.length == 1 ? '0' + color : colorrgb.push(color)}return '#' + rgb.join('')
}

生成随机颜色,返回格式为#RRGGBB的颜色值。通过随机生成RGB值来得到各种随机颜色。
使用例子:

let color = randomColor() 
// color = #52a3ef 

使用时无须传参,直接调用即可得到随机颜色。

6. uuid生成UUID

function uuid() {let s = []let hexDigits = '0123456789abcdef'for (let i = 0; i < 36; i++) {s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)}s[14] = '4'  // bits 12-15 of the time_hi_and_version field to 0010s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)  // bits 6-7 of the clock_seq_hi_and_reserved to 01s[8] = s[13] = s[18] = s[23] = '-'let uuid = s.join('')return uuid 
}

该工具函数用于生成UUID(Universally Unique IDentifier)。UUID是一种按照标准生成的编号,通常用来作为标识符,保证全球唯一。
使用例子:

let uuid =  uuid()
// uuid = '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

使用时无须传参,直接调用即可得到UUID。

8. checkIDCard校验身份证

function checkIDCard(idCard) {let idCardReg = /^[1-9][0-9]{5}([1][9][0-9]{2}|[2][0][0|1][0-9])([0][1-9]|[1][0|1|2])([0][1-9]|[1|2][0-9]|[3][0|1])[0-9]{3}([0-9]|[X])$/if (!idCardReg.test(idCard)) {return false}let idCardWi = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2]let idCardY = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2]let idCardWiSum = 0for (let i = 0; i < 17; i++) {idCardWiSum += idCardWi[i] * idCard[i] }let idCardMod = idCardWiSum % 11let idCardLast = idCardY[idCardMod]  if (idCardLast != idCard[17].toUpperCase()) {return false}return true
}

该工具函数用于校验中国公民身份证号码是否正确。它采用正则表达式判断格式是否正确,并结合校验码算法判断最后一位校验码是否正确。

使用例子:

let valid = checkIDCard('45030319990821232X') 
// valid = true
let valid = checkIDCard('45030319990821231X')
// valid = false  最后一位校验码错误

9. checkPhone校验手机号

function checkPhone(phone) {let phoneReg = /^1[3-9]\\d{9}$/return phoneReg.test(phone)
}

该工具函数用于校验手机号格式是否正确。采用正则表达式匹配11位数的数字,以1开头,第二位数为3-9的手机号。
使用例子:

let valid = checkPhone('18912341234')
// valid = true
let valid = checkPhone('28912341234') 
// valid = false   第二位数不在3-9范围内

10. checkEmail校验邮箱

function checkEmail(email) {let emailReg = /^[a-z0-9]+([._\\\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/return emailReg.test(email)
}

该工具函数用于校验邮箱地址格式是否正确。采用正则表达式匹配xxxx@xxxx.xxx结构的邮箱,其中xxxxx代表5-63个字母、数字、点号或减号。

使用例子:

let valid = checkEmail('1234567@qq.com')  
// valid = true 
let valid = checkEmail('1234567@.com.cn')  
// valid = false   中间只有一个点,格式错误

11. isBankCount 校验银行卡格式

function isBankCount(bankno)  { let banknoReg = /^[0-9]{13,25}$/if (!banknoReg.test(bankno)) {uni.showToast({title: '银行卡号格式错误',icon: 'error',duration: 2000})return false}if (bankno.length < 13 || bankno.length > 25) {uni.showToast({title: '银行卡号长度错误',  icon: 'error',duration: 2000})return false}var newArr = []for (var i = 0; i < bankno.length; i++) {newArr.push(bankno.substr(i, 1))}if (bankno.length == 19) {    // 19位1个校验位  var checkNum = 0  for (var i = 0; i < 18; i++) {checkNum = checkNum + parseInt(newArr[i]) * (i % 2 == 0 ? 1 : 2)}checkNum = checkNum % 10 == 0 ? 10 : checkNum % 10checkNum = 10 - checkNum } else if (bankno.length == 20) { // 20位2个校验位var checkNum1 = 0 var checkNum2 = 0 for (var i = 0; i < 18; i++) {if (i % 2 == 0) {checkNum1 = checkNum1 + parseInt(newArr[i])      } else {checkNum2 = checkNum2 + parseInt(newArr[i]) * 2 if (checkNum2 > 9) checkNum2 = checkNum2 - 9  }}checkNum1 = checkNum1 % 10 == 0 ? 10 : checkNum1 % 10checkNum2 = checkNum2 % 10 == 0 ? 10 : checkNum2 % 10 checkNum1 = 10 - checkNum1  checkNum2 = 10 - checkNum2} // Luhn算法if (bankno.length == 16 || bankno.length == 18) { var lastNum = bankno.substr(bankno.length - 1, 1) var first15Num = bankno.substr(0, bankno.length - 1)var newArr = []for (var i = first15Num.length - 1; i > -1; i--) {  newArr.push(first15Num.substr(i, 1))}// Luhn校验代码...}if (checkNum == lastNum && bankno.length == 19) {  return true  } else if (checkNum1 == lastNum[0] && checkNum2 == lastNum[1] && bankno.length == 20) {return true  } else {uni.showToast({title: '银行卡号校验失败',  icon: 'error',duration: 2000})return false} 
}

银行卡号Luhn算法校验,确保卡号输入正确,避免误操作。Luhn算法也称模10算法,是一种简单的校验算法,广泛用于信用卡号、银行卡号等账号的有效性校验。使用时直接调用参数为银行卡号就行isBankCount(num)

11.isSameMonth 判断两天时间是否是同一个月

function isSameMonth  (date1, date2)  {var start = new Date(date1.replace("-", "/").replace("-", "/"));var end = new Date(date2.replace("-", "/").replace("-", "/"));return start.getFullYear() == end.getFullYear() && start.getMonth() == end.getMonth();
}

使用方法 : isSameMonth (第一天时间,第二天时间)

12.getFirstDay 获取本月第一天是几月几号

function getFirstDay  ()  {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var firstDay = year + "-" + month + "-01";return firstDay;
}

使用方法:getFirstDay ()直接调用

13.checkDate 两天日期不允许超过指定天数

function checkDate  (dataone, datatwo,dayNum) {var start = new Date(dataone.replace("-", "/").replace("-", "/"));var end = new Date(datatwo.replace("-", "/").replace("-", "/"));var days = end.getTime() - start.getTime();var time = parseInt(days / (1000 * 60 * 60 * 24));if (time > dayNum) {uni.showToast({title: ``两天日期不允许超过${dayNum}天!`,icon: 'error'})return false;} else {return true;}
}

使用方式: checkDate(第一天时间, 第二天时间,相隔天数)

14.base64src base64转临时路径

function base64src(base64data, fun){const base64 = base64data; //base64格式图片const time = new Date().getTime();const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "share" + ".mp4";//如果图片字符串不含要清空的前缀,可以不执行下行代码.const imageData = base64.replace(/^data:video\\/\\w+;base64,/, "");const file = wx.getFileSystemManager();file.writeFileSync(imgPath, imageData, "base64");fun(imgPath);
};

使用方法:

	base64src('对应的base64码', (res) => {//res便是临时路径});

总结

类似的工具函数还有很多,这里暂时不一一列举了,上面提到的银行卡校验,还可以使用阿里公开的一个校验接口https://ccdcapi.alipay.com/validateAndCacheCardInfo.json?cardNo=银行卡号码&cardBinCheck=true 这个接口会返回对应的银行简称,银行卡类型,如果想要显示对应的银行logo的话,可以联系我,由于JSON数据太大,没办法全部放在这里。