今天大佬在群里发了如下截图,说有用户在微信群里反馈,问我是什么问题。这里使用了阿里云的滑动验证,用户滑动后就出来了这个有问题的页面样式。首先去阿里云找文档。看到只有加载uab.js超时才会出现错误码01,但是抓包没有发现加载uab.js文件。不知道为什么,但是明明这个是在阿里的滑动验证js报错的,我的js是不会承担这个bug的。但是因为这里在样式开发的时候没有考虑到这种情况,所以我没有额外写css来美化它来匹配当前页面。符合风格。得和老大商量一下,把这个界面的样式处理一下。于是调出chrome中对应的界面,找到对应的id,加了一段css,下面的“刷新”和“反馈”按钮就不再“害羞”了。补充相应的设计。内容可以完整显示就OK了。将编译好的代码上传到测试服务器后,奇怪的事情发生了。在chrome(手机模式)上好像可以,但是在手机上不行。一直以为是缓存,结果html文件也加了css后缀,为什么一直缓存在手机上,于是刷新页面,重启app,结果都是徒劳...补充指向其他元素的样式呢?不试也无所谓,试一试还真管用,那为什么在手机上不行呢???这个点唯一的猜测就是这个东西在PC端生成的dom和手机端的不一样吧?或者ID和类不同?如果你想看到app内嵌的页面中的元素,那么可以使用神器vconsole.js,一个在移动端非常好用的调试工具。一些老版本的vconsole.js在console中没有Element项,所以这里参考了较新的版本。引入之后,初始化页面:varvconsole=newVConsole();这时嵌入页面的右下角会有一个绿色的小块,点击即可。如图,进入Element项。果然,对于我要改变样式的元素,阿里滑动验证插入了一个id为nc_1-stage-3的div,但是看我的电脑,发现id是nc_2-stage-3,确实是在同一个状态下出来了同一种元素,但是不知道为什么要这样处理。好吧,我只能写对应正确id的css了!vconsole.js由腾讯开发。我们公司一直用这个来调试嵌入式h5。它可以打印日志、查看元素和页面请求。它易于使用!
