项目中封装的一些方法

        这周一直再忙着找工作入职，然后也没有时间和精力来学习一些新的知识，所以这几天的就把以前项目中做的一些封装的一些公用方法总结了一下。然后在以后的工作中或许还能用得到，这样的话就直接拿来用就可以了。最后还有最近项目中遇到的移动端问题以及解决方案。

       第一、在一些项目中如果是用jquery开发中一个页面跳转到另外一个页面都会传递一些参数，那么跳转到新的页面如何获取到URL上的参数值呢。

function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null)return unescape(r[2]);
    return null;
}
在新页面直接引入后调用方法就能获取到
var uuid = GetQueryString('uuid') 

        第二、在移动端H5页面有时候需要判断打开环境是什么

//判断打开环境
var browser = function () {
    var ua = navigator.userAgent.toLowerCase();
    if (ua.match(/alipay/i) == 'alipay') {
        // alert('我是支付宝')
        return 'zhifubao'
    } else if (ua.match(/micromessenger/i) == 'micromessenger') {
        // alert('我是微信')
        return 'weixin'
    } else if (ua.match(/safari/i) == 'safari') {
        // alert('我是网页')
        return 'liulanqi'
    }
};

       第三、日期，格式化，data:为js的Date对象，str，为格式化字符串,如"yyyy-MM-dd"

  dateChange: (date, str) => {
    let o = {
      "M+": date.getMonth() + 1, //月份
      "d+": date.getDate(), //日
      "h+": date.getHours(), //小时
      "m+": date.getMinutes(), //分
      "s+": date.getSeconds(), //秒
      "q+": Math.floor((date.getMonth() + 3) / 3), //季度
      "S": date.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(str)) {
      str = str.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (let k in o) {
      if (new RegExp("(" + k + ")").test(str)) {
        str = str.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return str;
  },

       第四、项目中有时候会根据数组中的 指定key值 和 这个key值的 value，获取该对象

  getObjectFromArray:(arr=[],keyName,value)=>{
    let obj ={},item={};
    for(let i=0;i<arr.length;i++) {
      item = arr[i];
      if (item[keyName] == value) {
        obj = item;
        break;
      }
    }
    return obj;
  },

      第五、计算跟字体大小 REM 对根元素

  HtmlFontSize = () => {
    let docWidth = document.documentElement.clientWidth;
    let htmlDom = document.getElementsByTagName("html")[0]
    let countFontSize = Math.round(10 * (docWidth / 375));
    /* 兼容 ipad 字体 */
    if (countFontSize > 12) return htmlDom.style.fontSize = '12px'
    htmlDom.style.fontSize = countFontSize + 'px';
    window.countFontSize = countFontSize;
    console.log(`跟字体：1 REM= ${countFontSize}PX`);
  };

       第六、js去除字符串空格（空白符）

( 1 ) replace正则匹配方法

　　去除字符串内所有的空格：str = str.replace(/\s*/g,"");

　　去除字符串内两头的空格：str = str.replace(/^\s*|\s*$/g,"");

　　去除字符串内左侧的空格：str = str.replace(/^\s*/,"");

　　去除字符串内右侧的空格：str = str.replace(/(\s*$)/g,"");

( 2 ) str.trim()方法

trim()方法是用来删除字符串两端的空白字符并返回，trim方法并不影响原来的字符串本身，它返回的是一个新的字符串。

　　缺陷：只能去除字符串两端的空格，不能去除中间的空格

单独去除左侧空格则使用 str.trimLeft(); //var str_1 = str.trimLeft();

　　单独去除右侧空格则使用 str.trimRight();//var str_1 = str.trimRight();

( 3 ) JQ方法：$.trim(str)方法

$.trim() 函数用于去除字符串两端的空白字符。

　　注意：$.trim()函数会移除字符串开始和末尾处的所有换行符，空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时，它们将被保留，不会被移除。

     第七、移动端遇到的一些问题

1.ios版本 在微信浏览器打开的时候 如果调用微信的 WeixinJSBridgeReady 自动播放音频功能那么不能用单页面跳转 window.location.href = ///

2.ios版本 若有点击事件 若标签是span标签 那么设置样式 cursor：pointer 可以解决点击无效

3.在vue中因为是单页面怎么给每个页面的title怎么设置单独的名字

(1) npm install vue-wechat-title

(2) 在main.js中使用 Vue.use(require('vue-wechat-title'))

(3) 配置路由

{
	path: '/unitWords',
	name: 'UnitWords',
	component: UnitWords,
	meta: {
		title: '练习和测试'
	}
},

(4) 在 index.vue中引入 <div v-wechat-title="$route.meta.title"></div>

4. 如果引用 微信的sdk 获取录音等功能 那么页面跳转必须是window.location.href = ///

因为调用微信sdk获取参数时接口传参数 url: window.location.href.split('&')[0]

若页面包含&等参数 那么必须把参数截取掉 否则调取微信sdk不成功

5. 移动端自动播放音频 功能的实现

<audio id="autoPlay" autoplay="autoplay" preload="auto" ref="msc_audio"/>

const msc_audio = this.$refs.msc_audio; 音频的链接

在mounted中 写

document.addEventListener(
	"WeixinJSBridgeReady",
	function() {
		clickAudio.load();
	},
	false
);

6.在微信浏览器中声音录制功能如果长时间按页面那么会触发右击事件弹出“在浏览器中打开”

document.oncontextmenu = function(e) {

    e.preventDefault();

};

这个方法可以限制弹“在浏览器中打开”