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

2023-10-27

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 result

  return function () {
     var context = this
     var args = arguments
     var 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 obj
  let 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 & num2
    case '|':   // 或  
      return num1 | num2
    case '^':   // 异或
      return num1 ^ num2
    case '~':   // 取反
      return ~num1
    case '<':   // 左移
      return num1 << num2
    case '>':   // 右移
      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 : color
    rgb.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 0010
  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1)  // bits 6-7 of the clock_seq_hi_and_reserved to 01
  s[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 = 0
  for (let i = 0; i < 17; i++) {
    idCardWiSum += idCardWi[i] * idCard[i] 
  }
  let idCardMod = idCardWiSum % 11
  let 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 % 10
    checkNum = 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 % 10
    checkNum2 = 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便是临时路径
	});

15.临时路径转base64兼容小程序APP,PC端

/**
 * @description 本地图片转base64 * @param {number} path 图片本地路径 * @returns Promise对象 */
const toBase64 = (path) => {	
return new Promise((resolve, reject) => {		
// #ifdef APP-PLUS		
plus.io.resolveLocalFileSystemURL(path, (entry) => {		entry.file((file) => {			
		let fileReader = new plus.io.FileReader()				fileReader.readAsDataURL(file)				fileReader.onloadend = (evt) => {					let base64 = evt.target.result.split(",")[1]					resolve(base64)				}			})		})	
			// #endif	
	// #ifdef H5	
		uni.request({			url: path,			responseType: 'arraybuffer',			success: (res) => {				resolve(uni.arrayBufferToBase64(res.data))			}		})		
		// #endif		
		// #ifdef MP-WEIXIN		
		uni.getFileSystemManager().readFile({			filePath: path,			encoding: 'base64',			success: (res) => {				resolve(res.data)			}		})	
			// #endif	
			})}export {	toBase64}

使用方法:单独封装到tool.js文件夹,然后在需要使用的地方先引入,

let convert = require('./tool.js')
convert.toBase64(tempFilePaths[0]).then((res) => {
							this.imgBase64 = res						})

总结

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

uniapp小程序封装常用工具函数 的相关文章

随机推荐

  • 让CSS flex布局最后一行列表左对齐的N种方法

    写在前面 精简版 可以直接移步我的另一篇博客 适用于行列数都不确定的情况 https blog csdn net HD243608836 article details 129854063 一 justify content对齐问题描述 在
  • 通信总线协议一 :UART

    文章目录 通信总线协议一 UART 1 通信基础 1 1 并行 串行 1 2 单工 双工 1 3 同步 异步 1 4 波特率 2 Uart通信协议 3 硬件连接 4 uart存在的问题 通信总线协议一 UART 1 通信基础 1 1 并行
  • 如何在线将Ubuntu 18.04升级到Ubuntu 20.04

    将Ubuntu 18 04升级到Ubuntu 20 04 在将系统升级运行到下一个主要发行版本之前 请确保已备份当前系统 以使您可以恢复原状 以防万一 备份过程不在本指南的范围内 运行系统更新 首先将Ubuntu 18 04系统软件包更新和
  • 深入学习jquery源码之trigger()与triggerHandler()

    深入学习jquery源码之trigger 与triggerHandler trigger type data 概述 在每一个匹配的元素上触发某类事件 这个函数也会导致浏览器同名的默认行为的执行 比如 如果用trigger 触发一个 subm
  • C#异步编程案例学习——异步加载大资源文件1 之 使用 BeginInvoke 与 EndInvoke

    C 异步编程案例学习 异步加载大资源文件1 之 使用 BeginInvoke 与 EndInvoke C 中 BeginInvoke 与 EndInvoke 的一个简单的使用案例 异步编程模型模式 APM 异步编程中的 BeginInvok
  • CentOS 6.4利用xampp安装bugfree3

    1 下载xampp 安装 http www apachefriends org zh cn xampp html 直接执行 run文件安装 默认会安装到 opt lampp 2 启动xampp root localhost opt lamp
  • 米哈游服务器位置,米哈游(米哈游账号中心系统)

    只要绑定了手机号就不要紧了 别人也无法用这个邮箱改密码 别人用也是无法验证 去官网下载崩坏3 不要在小米游戏这种第三方应用市场下载 有人买了米哈游的账号被找回吗 我买的三无号直接登不上 登陆的时候提示说没有这个账号 所以最好不要买 自己注册
  • 对SFBC空频编码和FSTD-SFBC频率切换分集与空频编码的MIMO系统误码率matlab仿真

    目录 一 理论基础 二 核心程序 三 测试结果 一 理论基础 Space Frequency Block Code SFBC 是TD LTE系统中的一种抗干扰技术 其基本原理与Wimax中基于Alamuti 编码的STBC类似 LTE标准中
  • 服务器如何安装 宝塔国外版本

    linux服务器如何安装 宝塔国外版本 centos安装方式 yum install y wget wget O install sh http www aapanel com script install 6 0 en sh bash i
  • fiddlerJScript脚本工具类,轻松写出fiddler 脚本,完成数据抓取

    fiddler是常用的抓包工具 fiddlerJScript脚本是用JScript NET 编写的 使用起来和JS 还是有很多区别的 目前网络上的文章比较分散 有些内容也比较旧 对新手不友好 所以自己动手写了一个工具类 封装了一些常用的方法
  • 进程概念(详解)

    进程概念 基本概念 进程的描述 pcb pcb task struct中内容分类 查看进程 查看进程的信息 通过系统调用来查看进程的标识符 创建进程 fork 杀掉进程 kill 进程状态 特殊进程 僵尸进程 孤儿进程 进程的优先级 PRI
  • java获取季度日期

    获取季度第一天和最后一天 获取当前季度日期 方式一 param dateStr 当前日期字符串 默认为当前日期 return String 季度起始日期 季度结束日期 public static String getSeasonDay St
  • Nginx+Tomcat搭建高性能负载均衡集群

    本文转载至 http blog csdn net wang379275614 article details 47778201 一 工具 nginx 1 8 0 apache tomcat 6 0 33 二 目标 实现高性能负载均衡的Tom
  • Node.js详解(四):连接MongoDB

    文章目录 一 安装MongoDB访问驱动 二 连接数据库 三 添加数据 四 添加多条数据 五 修改数据 六 查询数据 1 查询单条记录 2 查询多条记录 七 删除数据 八 完整示例代码 1 路由 Api 接口 2 运行结果 MongoDB
  • 从不懂到会用,PID从理论到实践~笔记

    从不懂到会用 PID从理论到实践 哔哩哔哩 bilibili PID的适用性 一阶 二阶的线性系统 前馈系统只是对干扰做一个补偿 单闭环系统 双闭环控制系统 一个是还没发生干扰但我知道你会干扰进行反应 一个是看到你对我干扰后并发生后才进行反
  • Nginx重中之重的知识点

    1 反向代理 proxy pass http baidu com location proxy pass http atcui com 代理服务器的概念 代理服务器 客户机在发送请求时 不会直接发送给目的主机 而是先发送给代理服务器 代理服
  • wenstorm 快捷键(java)

    向下复制一行 Duplicate Lines Ctrl Down 修改变量名与方法名 Alt Shift R 向下移动行 Alt Down 显示设置窗口 Ctrl Alt S 向上开始新的一行 Start New Line before c
  • Vscode 调试arm64 linux内核

    对于linux内存系列的阅读和测试记录 https zhuanlan zhihu com p 105069730 https zhuanlan zhihu com p 510289859 搭建arm64内核调试环境 安装工具 sudo ap
  • BAT大佬分享:Linux 工程师的 6 类好习惯和 23 个教训

    一 线上操作规范 1 测试使用 当初学习 Linux 的使用 从基础到服务到集群 都是在虚拟机做的 虽然老师告诉我们跟真机没有什么差别 可是对真实环境的渴望日渐上升 不过虚拟机的各种快照却让我们养成了各种手贱的习惯 以致于拿到服务器操作权限
  • uniapp小程序封装常用工具函数

    1 formatTime格式化时间 function formatTime time format if typeof time number typeof format string return time var formateArr