年度账单h5 移动端兼容问题以及优化建议(vue)

1. 定时器 

   vue实例中定义timer多余，创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护；建议使用   this.$once(‘hook:beforeDestory’,()=>{}) 
   

       _CountDownLoop() {
         let timer = null;
         timer = setInterval(() => {
         // to do
         }, 1000);
         this.$once('hook:beforeDestroy', () => {
           clearInterval(timer);
           timer = null;
         });
       }, 

2. 微信背景音乐不播放

   引入

    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>

      document.addEventListener('WeixinJSBridgeReady', () => {
   
         this.$refs.audio.play();
   
       }, false);

3. ios 11 12音乐播放两次

   <audio ref="loading"  loop src="../../assets/audio/loading.mp3" atoplay  preload />

   标签中使用 atoplay  导致
   解决

   <audio ref="loading"  loop src="../../assets/audio/loading.mp3" preload />
   mounted() {
   　　this.$refs.audio.play();
   }
    

4. swiper兼容

   不兼容ios10以下版本，导致白屏问题；可降低到swiper4* ，如3.4.2，可以兼容到iOS8，也可以选择不使用；
   swiper6 autoplay不生效，回退到5.x版本以下就可以正常使用了

5. html2cancas

   html2canvas 1.0.0-rc.7在H5微信内置浏览器ios13.6、13.4系统下不能转换图片；换成1.0.0-rc.4  "html2canvas": "1.0.0-rc.4" , 

6. ios移动端 boder-dotted 显示是方块

7. 隐藏iphonex 或以上版本 底部白条

     body{
       padding-top: env(safe-area-inset-top);
       padding-left: env(safe-area-inset-left);
       padding-right: env(safe-area-inset-right);
       padding-bottom: env(safe-area-inset-bottom);
     }