移动端开发过程中的一些坑

一，安卓6及以下机型白屏

原因：用vue3框架写的，这个框架基于Proxy对象来实现。这个特性在浏览器内核Chrome49版本才引入。而安卓6及以下的版本，webview的内核版本低于Chromium49，导致白屏。
解决：弹窗让用户升级系统版本。

二，测试环境首屏白屏一段时间

原因：有个外部引用的js是外链，而项目部署在内网。在内网环境下，链接不到这个资源。阻塞了页面的渲染。等资源超时了，才会执行后续的渲染。所以看起来就是白屏一段时间（六七秒），才渲染出页面。
解决：script引入的时候，使用defer属性，让它不阻塞页面的渲染。或者按需引入这个js。

 <script> function addScript(url){ 
    var script = document.createElement('script'); script.setAttribute('type','text/javascript'); script.setAttribute('src',url); script.setAttribute('defer',true); document.getElementsByTagName('body')[0].appendChild(script); } if(navigator.userAgent.toLowerCase().indexOf('qiyuesuo') !== -1){ 
    //小敏app addScript('/P1StaRes/zbxw/jem.js') } if(navigator.userAgent.toLowerCase().indexOf('lcsmy') !== -1){ 
    //龙城市民云app addScript('https://apps.eshiyun.info/jsapi/2.0.0/eshiminjs.min.js') } </script> 

三，vant的loading未取消

现象：toast("报错信息”)之后，请求接口，接口的toast.loading未关闭，导致用户无法点击。
原因：vant的toast是单例模式，当toast("报错信息”)之后，默认展示时间是1500ms，在这期间又发送有toast.loading的请求，并且在axios全局封装中toast.clear(),就会把toast("报错信息”)关闭掉，而没有关闭toast.loading。
又因为toast是单例模式，页面有多个请求时，toast.clear（）会关闭掉其他的loading。
例如：

function aboutClick() { 
    Toast('该功能尚未开放，敬请期待~'); setTimeout(() => { 
    Toast.loading({ 
    duration: 0 }); setTimeout(() => { 
    Toast.clear(); }, 350); }, 100); } 

普通的Toast(‘该功能尚未开放，敬请期待~’);很快就会被关闭掉。而Toast.loading并没有被关闭。
解决：项目中使用Toast.clear（），普通的toast信息让它自己关闭，至于需要loading的，用自定义的toast组件

四，用户手机的系统时间被修改了

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/ydkf/11008.html