微信小程序封装的公共常用方法(二)

216 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第6天,点击查看活动详情

话接上回

方法六:手机号加密显示

有些地方是需要做手机号脱敏显示的比如查看别人的资料,以及简历详情等等,未登录进行脱敏显示

function encryptPhone(val) {
  if (!val) return '';
  return val.slice(0, 3) + '****' + val.slice(7);
};

方法七:数据类型判断

js的数据类型判断必不可少,上上篇文章中的封装请求里面的参数判断就是用的这个

function judgeDataType(value) {
  let type = typeof value;
  if (type !== 'object') { // 如果是基本数据类型,直接返回
    return type;
  }
  // 如果是引用数据类型,再进一步判断;
  return Object.prototype.toString.call(value).replace(/^\[object (\S+)\]$/, '$1').toLowerCase();
};

方法八:网络判断

小程序有要求进行无网络处理就要进行判断,这里是用了微信的方法,封装了一下方便进行全局使用 我是在微信小程序项目中在每次跳转页面以及发送请求时进行了判断

function checkingNetworkStatus(callback) {
  wx.getNetworkType({
    success(res) {
      const networkType = res.networkType
      if (networkType != 'none') {
        if (callback) {
          callback()
        }
      } else {
        showToast('网络异常,请检查网络状态!', '', 3000);
      }
    },
    fail(err) {
      console.log('网络状态错误', err);
      showToast('网络异常,请检查网络状态!', '', 3000);
    }
  })
};

方法九:节流

多用于 input 框输入时,显示匹配的输入内容的情况

function throttle(fn, interval) {
  let enterTime = 0 // 触发时间
  const gapTime = interval || 300 // 间隔时间默认300ms
  return function () {
    const context = this
    const backTime = new Date() // 第一次函数return即触发的时间
    if (backTime - enterTime > gapTime) {
      fn.call(context, arguments)
      enterTime = backTime // 赋值给第一次触发的时间,保存第二次触发的时间
    }
  }
};

方法十:防抖

多用于页面 scroll 滚动,或者窗口 resize,或者防止按钮重复点击等情况

 function debounce(fn, interval) {
 let timer
 const gapTime = interval || 1000 // 间隔时间,如果interval不传,则默认1000ms
 return function () {
   clearTimeout(timer)
   const context = this
   const args = arguments // 保存此处的arguments,因为setTimeout是全局的,arguments不是防抖函数需要的。
   timer = setTimeout(function () {
     fn.call(context, args)
   }, gapTime)
 }
};

方法十一:表单正则

就是一些常用正则收藏

//表单正则
const regObj = {
  // 车牌号正则
  plateNumberReg: /^[\u4e00-\u9fa5]{1}[A-Z]{1}[A-Z_0-9]{5}$/,
  // 姓名验证
  enterReg: /^[\u4E00-\u9FA5]{1}[\u4E00-\u9FA5·]{0,18}[\u4E00-\u9FA5]{1}$/,
  // 手机号正则
  phoneReg: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,
  // 身份号码正则
  identityReg: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
  // 详细地址正则
  addressReg: /^[\u4E00-\u9FA50-9A-Za-z_—-\s\((.+?)\)\((.+?)\)]+$/,
  // 图片类型正则
  imageReg:/^(\s|\S)+\.(jpg|png|JPG|PNG|jpeg|JPEG)$/
};