那些不得不提的坑(持续添加中)

Posted 2020-09-26 伊优

1、关于手机QQ浏览器和微信内置浏览器（默认理解微信内置浏览器就是qq浏览器）

（1）不兼容es6语法

　　项目前台用的是vue，后台java，移动端。前期开发主要是在电脑上模拟手机看效果，一直也没啥问题，后来完成的差不多了就在手机看看效果，看看兼容性吧，结果，果然存在问题，

在手Q和微信进入页面之后没有内容，在其他浏览器显示正常，然后开始查资料，问前辈，才知道，vue中特别是钩子函数那块，自己大部分用的es6语法，而es6语法显然目前并没有被所有

浏览器兼容，而不幸的是手Q目前是没有兼容的，所以赶紧改语法，换成比较保险的语法格式，ok，页面完美显示。

（2）后台返回的数据格式，有时是object有时是string

　　用vue做项目，取值，显示值非常方便，返回的基本上就是对象，然后就直接取值，做展示就好了，可是这次遇到的问题就更奇葩，在本地测试，所有浏览器都是ok的，然后上服务器，

在正式环境中做测试，又不幸的手Q和微信又有问题了，这两个根本不能登录，有时不停的操作，可能会登上去，但是这显然是不行的，所以又开始了不停找bug之旅，不停的测试，定位，终于发现，

在最初后台返回数据的时候，在正常浏览器和手Q浏览器得到的数据格式是不一样的，在正常浏览器得到的object，所以我可以直接通过“ . ”取数据，可是手Q浏览器得到的是string，那我肯定就不能在直接

“ . ”来得到数据了，所以根本登录不了。所以没办法，我只好在每一个返回数据的接口处，都先判断该数据是什么类型，如果是string则JSON.parse（）方法，把string转化为object,这样就可以正常读取数据了。

　　但是到现在，我还是没有想明白，为什么会有这样的情况，绝对是浏览器得问题吗，显然不是的，因为我在本地的时候，用任何浏览器都是可以的，为啥到了服务器之后，手Q的数据格式就变成string了呢？

真的不明白，但是我会继续研究的，后期如果知道再做更新。

2 、神奇的split()函数

　　在项目中，客户需要有一个日历，通过选择任意一天，在页面上显示当周的周一和周日的日期，日历就找的插件做的，一般的插件就是点击一下得到当前选择的日期，我稍微对选择的日期做下处理，

在日历页面弹窗，点击确定的时候，有一个回调函数，在回调函数里，通过得到的当前日期，通过一系列处理（toLocaleDateString()），得到当周的周一和周日，但是此时我得到的日期格式为2017/7/1，而我们接口中用的格式为

2017-07-01，所以必须对日期格式进行转化，因为本人对正则表达式是只会用不会写，所以就开始找相关的正则，可是很不幸，没有找到，那没办法，就只能用笨办法了，手动的进行分割，再判断是否添加0吧，

问题就在这个时候发生了，因为我在电脑上看到的，得到的日期格式为2017/7/1，所以就直接按照“/”来处理，结果后来发现，手机和pc只能兼容一个，我又觉得不对劲了，难道split方法还存在兼容性，然后就在直接弹窗看数据到底什么样的，

果然，在pc和移动上得到的日期格式是不一样的，一种的2017/7/1，一种的2017-7-1，具体哪个是哪个我现在也忘了，但是不管那种格式，都是不能用的，我要的是2017-07-01，所以此时，我又通过神奇的网站，找的一个正则表达式

 re =/^(20[01]\d|1\d{3}|[1-9]\d\d?|\d)\/([1-9]|1[0-2])\/(3[01]|[1-2]\d|\d)$/;

判断是否为 2017/7/1格式，如果2017/7/1格式，则split(‘/‘)，else  split(‘-‘)，好了也算经历了千辛万苦总算解决了

3、onfocus事件的触发

　　　　还是在日历插件上，在好不容易完后  2 之后，我又发现一个悲伤的事情，这个日历在ios上触发一点点都不灵敏，我点10次，能弹出一次，已经算是很给面子了，这可怎么整，然后又开始查资料，查了半天没找到有用的信息，

我很好奇，难道这种奇葩的问题，真的只有我一个人遇到吗，突然灵光一现，反正都是要触发input，从而触发日历插件，那么ciick不也可以吗，果断更换，结果，真的可以呀，虽然都说click在移动端的会有300ms的延时，但是我总体测试，

点下来也没觉得啥，反正目前我还没找到比较好的解决方案，此路不通，再换一条咯。

　　好了，这就是我最近遇到的比较奇葩的问题，以后如果再有，会继续写4、5、6的，这些bug在经历的时候，真的觉得很奇葩，但解决之后还是很有成就感的！嘻嘻