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

一，安卓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组件

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

用户的系统时间被设置快了五分钟，导致二维码页面一直刷新，因为代码中用了当前时间new Date()，这个是以浏览器的系统时间为准的，因为系统时间变更了，导致获取到的时间不对。
**解决：**时间的东西，还是用服务器时间为好