taro框架之一些方法的封装（部分使用了ts的语法）

1.弹窗的封装

import Taro from '@tarojs/taro'

// interface LoadingInterface {
//   showError(message:string, time: int): void /* 错误消息提示框 */
//   showSuccess(message:string, time: int): void /* 正确消息提示框 */
//   showLoading (message:string): void /* 页面缓冲加载 */
//   hideLoading():void /* 关闭页面缓冲加载 */
// }
export function showError(message: string, time: int) {
  Taro.showToast({ title: message || '输入错误', icon: 'none', duration: time || 2000 })
}

export function showSuccess(message: string, time: int) {
  Taro.showToast({
    title: message || '输入正确',
    icon: 'success',
    duration: time || 2000
  })
}


export function showLoading(message: string, delay = 0) {
  setTimeout(() => {
    Taro.showLoading({
      title: message || '加载中',
      icon: 'loading'
    })
  }, delay)
}


export function hideLoading() {
  Taro.hideLoading()
}

2.form表单的一些正则校验

/*
 * @Author: soongmao
 * @Date: 2019-11-22 16:12:08
 * @Last Modified by: soongmao 
 * @Last Modified time: 2021-01-15 10:15:38
 * 正则验证类
 */

 /* 手机正则校验 */
export const telreg = (_str) => {
  let regstr = /^1[3456789]\d{9}$/;
  return regstr.test(_str);
}

/* 固定电话正则校验 */
export const fixedTelreg = (_str) => {
let regstr = /^\d{3}-\d{7,8}|\d{4}-\d{7,8}$/;
return regstr.test(_str);
}

/* 验证码正则校验 */
export const codereg = (_str) => {
  let regstr = /^\d{6}$/;
  return regstr.test(_str);
}

/* 身份证正则校验 */
export const cardreg = (_str) => {
  let regstr = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
  return regstr.test(_str);
}

/* 图片base64正则校验 */
export const imagereg = (_str) => {
  let regstr = /image\/\w+/;
  return regstr.test(_str);
}
export const basereg = (_str) => {
  let regstr = /^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/;
  return regstr.test(_str);
}

/* 修改密码正则校验 */
export const passwordreg = (_str) => {
  let regstr = /^(?=.*[a-zA-Z])[a-zA-Z0-9_\\u4e00-\\u9fa5]{6,20}$/;
  return regstr.test(_str);
}


//星号替代
export const starReplace=(str, frontLen, endLen)=>{
  //str：要进行隐藏的变量  frontLen: 前面需要保留几位    endLen: 后面需要保留几位
  var len = str.length - frontLen - endLen;
  var star = '';
  for (var i = 0; i < len; i++) {
    star += '*';
  }
  return str.substring(0, frontLen) + star + str.substring(str.length - endLen);
}

//清楚空格
export const emptyreg = (_str) => {
   _str=_str.replace(/\s+/g,"");
  return _str;
}

//金额控制
export const currencyReg = (value) =>{
  value = value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符
  value = value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的
  value = value.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
  value = value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数
  return value
}

//银行卡正则校验
export const bankreg = (_str) => {
  _str=_str.replace(/\s+/g,"");
  let regstr=/^([1-9]{1})(\d{14}|\d{18})$/
  return regstr.test(_str);
}

//银行卡截取后四位
export const bankcutout = (_str) => {
  _str=_str.replace(/\s+/g,"");
  return _str.substr(_str.length - 4);
}


/* 邮箱正则校验 */
export const mailreg = (_str) => {
  let regstr = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
  return regstr.test(_str);
}

3.请求方法的封装

import Taro from '@tarojs/taro'
import { BASE } from '@/src/config/config'
import { showLoading,showError } from '@/src/utils/loading-utils'
import { getKey } from './storage-utils'


const HTTP_STATUS = {
  SUCCESS: 200,
  CLIENT_ERROR: 400,
  AUTHENTICATE: 401,
  FORBIDDEN: 403,
  NOT_FOUND: 404,
  SERVER_ERROR: 500,
  BAD_GATEWAY: 502,
  SERVICE_UNAVAILABLE: 503,
  GATEWAY_TIMEOUT: 504
}

const customInterceptor = (chain) => {

  const requestParams = chain.requestParams

  return chain.proceed(requestParams).then(res => {
    // console.log(res,'这个是http请求')
    if (res.statusCode === 200) {
      return Promise.resolve(res.data)
    }
    
        
        
    
    // 只要请求成功，不管返回什么状态码，都走这个回调
    // hideLoading()   // 处理安卓机 MiniProgramError Z.createEvent is not a function 问题
    // if (res.statusCode === HTTP_STATUS.NOT_FOUND) {
    //   return Promise.reject("请求资源不存在")

    // } else if (res.statusCode === HTTP_STATUS.BAD_GATEWAY) {
    //   return Promise.reject("服务端出现了问题")

    // } else if (res.statusCode === HTTP_STATUS.FORBIDDEN) {
    //   // 清缓存，跳登录
    //   return Promise.reject("没有权限访问");

    // } else if (res.statusCode === HTTP_STATUS.AUTHENTICATE) {
    //   // token过期，请缓存，跳登录
    //   // Taro.setStorageSync("Authorization", "")
    //   // pageToLogin()
    //   return Promise.reject("需要鉴权")

    // } else if (res.statusCode === HTTP_STATUS.SUCCESS) {
    //   const data = res.data
    //   if (data.retcode === 200) {
    //     return Promise.resolve(data.result)
    //   }
    //   else {
    //     // showError(data.retMsg) // 取消展示错误提示
    //     return Promise.reject("??????")
    //   }

    // } else {
    //   return Promise.reject("未知错误")
    // }
  }).catch(res => {
    // hideLoading()
    console.log('超时res--', res)
    return Promise.reject()
  })
}

// 加入log和数据处理拦截器
Taro.addInterceptor(Taro.interceptors.logInterceptor)
Taro.addInterceptor(customInterceptor)

export default function request(url: string, method: string,
  data?= {}, {
    contentType = 'application/json',
    needLoading = true,
    delayLoading = 0,
  }: {
    contentType?: string
    needLoading?: boolean
    delayLoading?: number //ms
  } = {}) {

  if (needLoading) {
    showLoading('加载中', delayLoading)
  }

  const token = getKey('openId');
  const _params = {
    url: BASE + url,
    method: method,
    data: data,
    header: {
      'content-type': contentType,
      'authorization': '',
      'openid':token
    },
  }

  return Taro.request(_params)
}

4.封装缓存的方法

import Taro from '@tarojs/taro'

const TIME_LIMIT_TAG = "redis"
/**
 *
 * @param key 插入的key
 * @param value 插入的值
 * @param timeExpire 过期时间，单位秒
 */
export function putKey(key: string, data: string, timeExpire = 0): void {
  if (timeExpire !== 0) {
    let newtime = Date.parse(new Date())
    newtime = newtime / 1000 + timeExpire;
    Taro.setStorageSync(key + TIME_LIMIT_TAG, newtime + "")
  }
  Taro.setStorage({key, data})
}

export function getKey(key: string): void {
  const expireTime = parseInt(Taro.getStorageSync(key + TIME_LIMIT_TAG))
  if (expireTime) {
      if (parseInt(expireTime) < Date.parse(new Date()) / 1000) {
          Taro.removeStorageSync(key);
          console.log("过期了")
          return ''
      }
  }
  const res = Taro.getStorageSync(key)
  if (res !== '') {
      return res
  } else {
      return ''
  }
}

/**
* 删除
*/
export function removeKey(key: string): void {
  Taro.removeStorageSync(key);
  Taro.removeStorageSync(key + TIME_LIMIT_TAG);
}

/**
* 清除所有key
*/
export function clearKey(): void {
  Taro.clearStorageSync();
}

5.防止用户多次点击

//处理是否双击按钮操作
isDoubleClick() {
  const currentTime =  Date.now();
  const timeInterval = currentTime - lastClickTime;
  if (0 < timeInterval&& timeInterval< 1500) {
    return true;//如果间隔在0-1.5秒内就是快速重复点击
  }
  lastClickTime = currentTime;
  return false;
}

后续封装了，还会继续添加。。。