2019-08-20|2019-08-20 前端开发填坑之路合集 2019-08-20前端开发填坑之路合集

1.Vue动态绑定ref并获取的方法

绑定语法:ref="`thumb${item.gspecid}`" 获取语法： this.$refs[`thumb${item.gspecid}`]

2.H5页面获取url参数

//1.0版本 function getUrlParam(name) { //封装方法 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 } let id = getUrlParam('id')//调用方法，参数为url地址传递参数名//例子： url地址为： www.xxxx.com?id=1& let id = getUrlParam('id') console.log(id)//输出1//2.0版本 //上面的代码获取的中文会乱码，故有如下方法。 function getUrlParam(name) { //封装方法 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var l = decodeURI(window.location.search); var r = l.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }

3.关于js、css在每次引用之后添加版本号，使其能区分版本：

4.关于HTML的缓存，在中间加入以下代码：

5.百度地图根据标注点位置设置缩放比例

let points = [point1,point2,point3]; let view = map.getViewport(eval(points)); let mapZoom = view.zoom; let centerPoint = view.center; map.centerAndZoom(centerPoint, mapZoom);

6 根据key值删除数组对应内容给array对象增加两个函数：

Array.prototype.indexOf = function(val) { for (var i = 0; i < this.length; i++) { if (this[i] == val) return i; } return -1; }; Array.prototype.remove = function(val) { var index = this.indexOf(val); if (index > -1) { this.splice(index, 1); } };

执行的时候，直接对应的array对象，array.remove('对应的值');
转载于:https://my.oschina.net/jasonwung/blog/647901
7.删除Vue依赖文件夹

cnpm install -g rimraf rimraf node_modules

npm i安装依赖缺少node-sass，cnpm安装

cnpm install node-sass@latest

8.JQ弹出层底部滚动问题解决（只注重解决思路，有思路即可）

//点击出现弹出层 $('.toggle').on('click',function(){ this.bodyScroll=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; $('body').addClass('no-scroll').css({top : -this.bodyScroll}); }) //关闭弹出层时 $('.close').on('click', function() { $('body').css("top", "").removeClass('no-scroll'); $(window).scrollTop(this.bodyScroll); }) ———————————————— 版权声明：本文为CSDN博主「白日有梦」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_37026254/article/details/98597033

9.微信code静默授权并获取open_id后页面返回上一页死循环跳转解决方案通过百度查找到相关问题找到如下解决方案：原文地址传送门

文章图片
image.png

文章图片
image.png 以下是根据文章思路结合自己业务需求更改的代码如下:

function getUrlParam(name) { //封装方法 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参数 if (r != null) return unescape(r[2]); return null; //返回参数值 } let code = getUrlParam('code')//获取页面URL的code参数 let openID = '', const sessionCode = sessionStorage.getItem('code') function weChatBind() { if (!code && !sessionCode) { // sessionStorage和url链接同时没有code参数时跳转微信授权页获取code if (/MicroMessenger/.test(window.navigator.userAgent)) { $.ajax({ url: api_uri1, type: 'get', dataType: 'json', headers: headers, data: { params: window.location.search.substr(1) }, success: function (res) { if (res.result != 1) { // 我的项目后端已拼接了微信授权的跳转链接,请求拿到链接用location.replace打开即可 window.location.replace(res.result) } }, }); } }else if(!sessionCode){ /*** 此时微信重定向回来该登录页面时url是带有code参数的, 而sessionStorage里面没有code参数, 将URL的code参数存进sessionStorage里面并跳转回上一页 ***/ sessionStorage.setItem('code', code) history.back() } else { // 跳转回来时利用sessionStorage里面的code值请求接口拿到微信open_id即可,并可以解决微信授权返回上一页死循环跳转 $.ajax({ url: api_uri2, type: 'get', dataType: 'json', headers: headers, data: { 'code': sessionCode, }, success: function(res) { if(res.errorcode == 0) { openID = res.result } }, }); } }

10.js获取7天之前的日期或者7天之后的日期（网上摘取的，记录自己使用）

function fun_date(num) { var date1 = new Date(); //今天时间 var time1 = date1.getFullYear() + "-" + (date1.getMonth() + 1) + "-" + date1.getDate() console.log(time1); var date2 = new Date(date1); date2.setDate(date1.getDate() + num); //num是正数表示之后的时间，num负数表示之前的时间，0表示今天 var time2 = date2.getFullYear() + "-" + (date2.getMonth() + 1) + "-" + date2.getDate(); console.log(time2); return time2; } fun_date(7);

11.input文本框实现输入英文时自动触发事件,输入中文时要输入完成后才触发事件使用quill富文本时遇到的坑，解决思路如下：
以下内容转载于：文章链接，可查看原文，提供解决思路。
需求:

英文(英文输入法): 每输入一个字母都触发一次事件; 中文(拼音输入法): 输入完成后才触发事件,不是每打一个拼音就触发

实现:

$(function(){ var flag = true; $('#dev_region_search').on('compositionstart',function(){ flag = false; }); $('#dev_region_search').on('compositionend',function(){ flag = true; }); $('#dev_region_search').on('input',function(){ setTimeout(function(){ if(flag){ searchRegion(); } },0); }); });

思路:

compositionstart: 输入开始时触发compositionend: 选择字/词完成输入时触发而直接输英文是不触发compositionstart,compositionend事件的,所以开始的标识flag为true才会走后面的searchRegion()方法,输入中文的则结合compositionstart,compositionend来判断输入完成情况决定走不走后面的searchRegion()方法.这里加的延时setTimeout是因为默认情况下input比compostionend先执行了,导致flag标识不准确.