问题背景:模块功能已经开发完成上线,做了移动端的适配后,需要微信内置浏览器打开,问题就在这里,谷歌打开是正常的,微信无法正常打开。
(注:这是开发踩坑的记录,解决问题方案可直接跳到 2 - 3)查看即可)
1.分析
因为谷歌、火狐等都正常,所以这是个兼容性的问题,本地代码会报一个replaceAll的问题。
2.问题解决
1)尝试调试
因为最新版本的微信已经没有了右键调试的功能,所以首先想的是要可以实际的调试一下。
推荐这个,底下一篇就可以实现了(内附文件下载路径)微信浏览器:简单三步打开调试工具 - 必忘我 - 博客园https://www.cnblogs.com/conne/p/15884968.html
2)安装成功
安装成功后,是可以看到控制台,但是无法看到打印,并且页面直接白屏,然后,然后,就只能更新最新版本了因为最新版本 ,最新版本起码本地会报一个replaceAll的错误,下面是我原来的代码:
const path_new = path?.replaceAll("_", " ");
怎么看都没有错误,我怀疑path数据没拿到,也就是内置浏览器没有path,然后我尝试在代码里面加入使用,其他字符串的方法,但是没有报错,这就说明问题是在replaceAll身上的;
3)根因
打开百度,搜了一下replaceAll方法,一个兼容性的帖子引起了我的注意:
https://www.csdn.net/tags/NtzaUg1sNTUxMDUtYmxvZwO0O0OO0O0O.htmlhttps://www.csdn.net/tags/NtzaUg1sNTUxMDUtYmxvZwO0O0OO0O0O.html很幸运和我的问题一模一样:问题是replaceAll的兼容性问题,查资料得到,ES2021在2021年提供 的String.prototype.replaceAll 方法,微信的内置浏览器可能不支持,这就是根本原因了。
4)解决
那就替换掉吧,当然使用replace,replace(/A/g, ‘B’);使用B替换掉所有的A即可。
总结:刚开始没有怀疑replcaceAll方法的问题,是误以为replaceAll是很早就有的js方法,实际上2021年才加入的api,很多低版本不兼容,且一直怀疑数据有问题,加上无法进行调试,就很急躁,做了几年前端,很需要努力学习,加油啊。