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 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数据太大,没办法全部放在这里。文章来源地址https://www.toymoban.com/news/detail-493280.html

到了这里,关于uniapp小程序封装常用工具函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • lodash-es 工具库常用工具函数和案例详解,字节跳动面试真题

    文章目录 一、概述 二、安装及使用 2.1 安装 2.2 浅拷贝 clone 2.3 深拷贝 cloneDeep 2.4 防抖 debounce 2.5 节流 throttle 2.6 打乱值 shuffle 三、Vue 动画案例 一、概述 Lodash中文文档 Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库,算是从 Underscore 分离出来的超集。 Lodash 通过降

    2024年04月10日
    浏览(61)
  • Unity 编辑器选择器工具类Selection 常用函数和用法

    点击封面跳转下载页面 在Unity中,Selection类是一个非常有用的工具类,它提供了许多函数和属性,用于操作和管理编辑器中的选择对象。本文将介绍Selection类的常用函数和用法,并提供相应的示例代码。 功能: 获取或设置当前活动的上下文对象。 示例代码: 功能: 获取或

    2024年02月14日
    浏览(46)
  • Unity 编辑器预制体工具类PrefabUtility 常用函数和用法

    在Unity中,预制体(Prefab)是一种非常有用的工具,它允许我们创建可重复使用的对象和场景元素。Unity提供了许多内置的工具和函数来处理预制体,其中一个重要的类就是PrefabUtility。PrefabUtility类提供了一系列函数,用于创建、实例化和管理预制体。在本文中,我们将介绍

    2024年02月14日
    浏览(44)
  • Unity Shader编辑器工具类ShaderUtil 常用函数和用法

    Unity的Shader编辑器工具类ShaderUtil提供了一系列函数,用于编译、导入和管理着色器。本文将介绍ShaderUtil类中的常用函数和用法。 函数签名: public static bool CompileShader(string source, out string error); CompileShader函数用于编译一个着色器。它接受一个字符串参数source,表示要编译的着

    2024年02月14日
    浏览(36)
  • 13个程序员常用开发工具用途推荐整理

    作为一名刚入门的程序员,选择合适的开发工具可以提高工作效率,加快学习进度。在本文中,我将向您推荐10个常用的开发工具,并通过简单的例子和代码来介绍它们的主要用途。 Visual Studio Code(VSCode)是一个免费、开源且跨平台的代码编辑器,支持多种编程语言。它具有

    2024年02月07日
    浏览(75)
  • 程序员常用的代码比较工具,你更喜欢哪款?

    目录 💡 Linux 命令行的对比工具 一. diff 二. vimdiff命令 💡 GUI 比对工具  三. WinMerge 四. Diffuse 五. Code Compare 六. Beyond Compare 七. UltraCompare 八. Altova DiffDog 九. Kompare 十. Meld 十一. XXdiff 十二. KDiff3 十三. TkDiff 💡 在线文本比较工具 十四. jq22 💡 其他 | 已停止更新的对比工具  十五

    2023年04月27日
    浏览(53)
  • Python程序员常用的IDE和其它开发工具

    “工欲善其事,必先利其器”,如果说 编程 是程序员的手艺,那么IDE就是程序员的吃饭家伙了。 IDE的全称是Integration Development Environment(集成开发环境),一般以代码编辑器为核心,包括一系列周边组件和附属功能。一个优秀的IDE,最重要的就是在普通文本编辑之外,提供

    2024年01月18日
    浏览(53)
  • 前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

    在项目开发中,我们经常会使用一些工具函数,也经常会用到例如 loadsh 等工具库,但是这些工具库的体积往往比较大,如果项目本身已经引入了这些工具库,那么我们就没有必要再引入一次,所以我们需要自己封装一些工具函数,来简化我们的开发。 在 src/utils 目录下创建

    2024年02月20日
    浏览(61)
  • 【Powershell 】(Windows下)常用命令 | 命令别名 | 运行Windows命令行工具 | 运行用户程序(vim、gcc、gdb)

    微软官方Powershell文档:https://learn.microsoft.com/zh-cn/powershell/ 命令详细说明,在PDF的最后面: PowerShell 是一种用于自动化的 命令行 shell 和 脚本语言 。 Wikipedia 包含以下关于 shell 的描述: shell 通过提示用户输入、解释其输入,然后处理基础操作系统的输出来管理用户系统交互(

    2024年02月13日
    浏览(47)
  • 分享20+个在线工具网站,60+常用工具

    💂 个人网站:【工具大全】【游戏大全】【神级源码资源网】 🤟 前端学习课程:👉【28个案例趣学前端】【400个JS面试题】 💅 寻找学习交流、摸鱼划水的小伙伴,请点击【摸鱼学习交流群】 今天给大家分享20+在线工具网站和 60个常用在线工具+前端工具 欢迎大家访问:h

    2024年02月09日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包