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

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

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防抖

```js
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     // 记录本次触发时间
 } 

}
}

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

```js
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是一种按照标准生成的编号,通常用来作为标识符,保证全球唯一。
使用例子:
```js
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数据太大,没办法全部放在这里。

目录
相关文章
|
21天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
146 3
|
1月前
|
缓存 小程序 UED
如何利用小程序的生命周期函数实现数据的加载和更新?
如何利用小程序的生命周期函数实现数据的加载和更新?
54 4
|
28天前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
40 0
微信小程序更新提醒uniapp
|
1月前
|
小程序 数据可视化 数据管理
小程序可视化设计工具-支持一键导出小程序,WebApp及后台管理
小程序可视化设计工具-支持一键导出小程序,WebApp及后台管理
38 3
|
1月前
|
移动开发 小程序 数据可视化
微信小程序可视化开发工具之动态数据
微信小程序可视化开发工具之动态数据
36 3
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
34 2
|
1月前
|
小程序 UED 开发者
小程序的生命周期函数
小程序的生命周期函数
54 1
|
25天前
|
小程序 数据可视化 API
低代码可视化-uniapp商城首页小程序-代码生成器
低代码可视化-uniapp商城首页小程序-代码生成器
20 0
|
27天前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
44 0
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
101 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目