web手机端H5开发常用js方法

介绍一下在web手机端日常开发常用的一些js方法；

1，是否是移动端

/** 是否是移动端 **/
export function isMobile() {
    
    
  const ua = navigator.userAgent.toLowerCase();
  return /mobile|android|iphone|ipad|phone/i.test(ua);
}

2，是否是手机尺寸

/** 是否是手机尺寸   */
export function isPhoneSize() {
    
    
  const w = getViewWidth();
  return w <= 600;
}

3，是否支持触摸事件

/** 是否支持触摸事件  */
export function hasTouchEvent() {
    
    
  return 'ontouchstart' in window;
}

4，获取窗口高度

/** 获取窗口高度 */
export function getViewHeight() {
    
    
  return window.innerHeight || document.documentElement.clientHeight;
}

5，已滚动到底

/** 已滚动到底 */
export function isScrollEnd(el) {
    
    
  return el.scrollTop + el.clientHeight === el.scrollHeight;
}

6，获取窗口宽度

/** 获取窗口宽度 */
export function getViewWidth() {
    
    
  return window.innerWidth || document.documentElement.clientWidth;
}

7，判断终端以及浏览器

/**
 * 判断终端以及浏览器
 * userAgent string User-Agent信息
 */
export const readUserAgent = () => {
    
    
  const ua = window.navigator.userAgent.toLowerCase();
  let data = {
    
    
    terminal: '',
    browser: '',
    terminalType: {
    
    },
  };
  data.terminalType = {
    
    
    trident: ua.indexOf('Trident') > -1, // IE内核
    presto: ua.indexOf('Presto') > -1, // opera内核
    webKit: ua.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
    gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') === -1, // 火狐内核
    mobile: !!ua.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
    ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
    android: ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1, // android终端
    iPhone: ua.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
    iPad: ua.indexOf('iPad') > -1, // 是否iPad
    webApp: ua.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部
    weixin: /MicroMessenger/i.test(ua), // 是否微信
    qq: ua.match(/\sQQ/i) === ' qq', // 是否QQ
  };

  // 判断品牌
  if (data.terminalType.ios || data.terminalType.iPhone || data.terminalType.iPad) {
    
    
    data.terminal = '苹果';
  } else if (data.terminalType.android) {
    
    
    data.terminal = '安卓';
  } else {
    
    
    data.terminal = 'PC';
  }

  // 判断浏览器
  if (/msie/i.test(ua) && !/opera/.test(ua)) {
    
    
    data.browser = 'IE';
  } else if (/firefox/i.test(ua)) {
    
    
    data.browser = 'Firefox';
  } else if (/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua)) {
    
    
    data.browser = 'Chrome';
  } else if (/opera/i.test(ua)) {
    
    
    data.browser = 'Opera';
  } else if (/iPad/i.test(ua)) {
    
    
    data.browser = 'iPad';
  } else if (/webkit/i.test(ua) && !(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))) {
    
    
    data.browser = 'Safari';
  } else {
    
    
    data.browser = '未知';
  }
  return data;
};

8，获取横竖屏状态

// 获取横竖屏状态
export const getOrientationStatu = () => {
    
    
  let orientationStatu;
  if (window.screen.orientation.angle == 180 || window.screen.orientation.angle == 0) {
    
    
    // 竖屏
    orientationStatu = '竖屏';
  }
  if (window.screen.orientation.angle == 90 || window.screen.orientation.angle == -90) {
    
    
    // 横屏
    orientationStatu = '横屏';
  }
  return orientationStatu;
};

9，获取当前地址栏参数

/**
 * 获取当前地址栏参数
 * names:想要获取的参数  urls：完整的地址栏链接
 */
export const getQueryString = (names, urls) => {
    
    
  urls = urls || window.location.href;
  return (
    decodeURIComponent(
      (new RegExp('[?|&]' + names + '=' + '([^&;]+?)(&|#|;|$)').exec(
        urls
        // eslint-disable-next-line no-sparse-arrays
      ) || [, ''])[1].replace(/\+/g, '%20')
    ) || null
  );
};