H5端常用工具类(持续更新)

因为此工具类会一直更新，所以工具比较多，如果有需要查询的可以直接 CTRL+F 搜索关键字。如果有建议的可以留言，有帮助到大家的，麻烦大家点个关注点个赞，谢谢大家支持。

1、是否是全面屏手机(无需参数)

export function judgeBigScreen() {  // 这里根据返回值 true 或false ,返回true的话 则为全面屏 
let result = false;
const rate = window.screen.height / window.screen.width;
let limit = window.screen.height == window.screen.availHeight ? 1.8 : 1.65; // 临界判断值  
if (rate > limit) {
  result = true;
}
return result;
};

2、从地址栏取参数

/**
*@param name->需要获取的参数名
*/
export function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    if (window.location.href.split('?')[1]) {
      var r = window.location.href.split('?')[1].match(reg);
    }
    if (r != null) return decodeURI(decodeURI(r[2])); return null;
  }

3、封装promise请求（jQuery），根据项目需求自行添加header

/**
 * 封装接口请求
 * @param url 除主域名以外的请求路径
 * @param type 请求的类型，get|post
 * @param data 请求的数据
 * @returns {Promise<unknown>} 返回请求结果
 */
export function httpRequest(url, type, data) {
    return new Promise(
        function(resolve, reject) {
            var headers = {
                'Content-Type': "application/json"
            }
          // jwt解析必须要加 Bearer + token
            if ($.getCookie('token')) {
                headers.Authorization = 'Bearer '+$.getCookie('token')
            }
            $.ajax({
                url: getAdminBaseURL() + url,
                type: type,
                data: data,
                headers: headers,
                success: function(result) {
                    resolve(result)
                },
                fail: function() {
                    reject()
                }
            })
        }
    )
}

4、vue中Request和response拦截器

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import VueCookie from 'vue-cookie';
import Util from '../components/common/Util';
import Config from '../config.js';

import qs from 'qs';

// let getBaseUrl = Config.homeUrl;
let ROOT = Config.apiUrl;
Vue.use(VueAxios, axios);

// 将全局的根地址绑定到axios的默认基础路径
// Vue.axios.defaults.baseURL = ROOT;
Vue.axios.defaults.baseURL = ROOT;

// 设置公共请求header信息
Vue.axios.defaults.headers = {
  'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};

/**
 * sendPost请求
 * @param url
 * @param params 参数默认为空对象
 * @returns {Promise}
 */
export function sendPost(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data)
      .then(response => {
        resolve(response.data);
      }).catch(err => {
        reject(err);
      });
  });
}

/**
 * sendGet请求
 * @param url
 * @param params 参数默认为空对象
 * @returns {Promise}
 */
export function sendGet(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, data)
      .then(response => {
        resolve(response.data);
      }).catch(err => {
        reject(err);
      });
  });
}

// http request拦截器
Vue.axios.interceptors.request.use(
  (config) => {
    let loginToken = VueCookie.get('login-token');
    config.headers['login-token'] = loginToken;
    // console.log(config)
    if (config.url.indexOf('/JSON') == 0) {
      config.headers['Content-Type'] = 'application/json;charset=UTF-8';
      config.url = config.url.substr(5);
    } else {
      config.data = qs.stringify(config.data);
    }

    // if (config.method == 'get') {
    // }
    return config;
  },
  (error) => {
    // Do something with request error
    return Promise.reject(error);
  }
);

// http response 拦截器
Vue.axios.interceptors.response.use(
  (response) => {
    if (response.status == 200) {
      var resultMap = response.data;
      if (resultMap) {
        if (!resultMap.code) {
          return response;
        } else {
          if (resultMap.code == 200) {
            return response;
          } else {
            if (resultMap.msg) {
              if (resultMap.code == 310 || resultMap.code == 311) {
                // alert(resultMap.code)
                setTimeout(function () {
                  // 退出登录 移除当前域中的token
                  VueCookie.remove('login-token', { domain: Util.getOptionDomain() });
                }, 100);
                // window.location.href = getBaseUrl + '/login.html';
              } else {
                return response;
              }
            }
          }
        }
      }
    } else {
      return response;
    }
  },
  (error) => {
    // window.location.href = getBaseUrl + '/login.html'
    return Promise.reject(error);
  }
);
export default axios;

5、获取前几天日期

    /**
     *  获取前几日日期
     * @param {*} dayNumber  几天前天数 如果不传值就是当天
     * @returns   有入参返回{},无入参返回''
     */
function getday (dayNumber) => {
    let days = [];
    let startAndEnd = {};
    var Datee = new Date();
    if (!dayNumber) {
        let dateItem = new Date(Datee.getTime() - 60 * 60 * 1000); //使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
        let y = dateItem.getFullYear(); //获取年份
        let m = dateItem.getMonth() + 1; //获取月份js月份从0开始，需要+1
        let d = dateItem.getDate(); //获取日期
        let valueItem = y + '-' + m + '-' + d; //组合
        return valueItem
    }
    for (let i = 0; i <= dayNumber * 24; i += 24) { //144是前六天的小时数
        let dateItem = new Date(Datee.getTime() - i * 60 * 60 * 1000); //使用当天时间戳减去以前的时间毫秒（小时*分*秒*毫秒）
        let y = dateItem.getFullYear(); //获取年份
        let m = dateItem.getMonth() + 1; //获取月份js月份从0开始，需要+1
        let d = dateItem.getDate(); //获取日期
        m = addDateZero(m); //给为单数的月份补零
        d = addDateZero(d); //给为单数的日期补零
        let valueItem = y + '-' + m + '-' + d; //组合
        days.push(valueItem); //添加至数组  
    }

    startAndEnd.startTime = days[days.length - 1];
    startAndEnd.endTime = days[0]
    return startAndEnd;
}

function addDateZero(time) {
    if (time.toString().length == 1) {
        time = '0' + time.toString();
    }
    return time;
}

6、Canvas自动换行

 // 自动换行
    /**
     * @text:文字
     * @maxWidth:最大宽度
     * @lineHieght:行高
     */
    CanvasRenderingContext2D.prototype.wrapText = function(text, x, y, maxWidth, lineHeight) {
        if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {
            return;
        }

        var context = this;
        var canvas = context.canvas;

        if (typeof maxWidth == 'undefined') {
            maxWidth = (canvas && canvas.width) || 300;
        }
        if (typeof lineHeight == 'undefined') {
            lineHeight = (canvas && parseInt(window.getComputedStyle(canvas).lineHeight)) || parseInt(window.getComputedStyle(document.body).lineHeight);
        }

        // 字符分隔为数组
        var arrText = text.split('');
        var line = '';

        for (var n = 0; n < arrText.length; n++) {
            var testLine = line + arrText[n];
            var metrics = context.measureText(testLine);
            var testWidth = metrics.width;
            if (testWidth > maxWidth && n > 0) {
                context.fillText(line, x, y);
                line = arrText[n];
                y += lineHeight;
            } else {
                line = testLine;
            }
        }
        context.fillText(line, x, y);
    };
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。