微信端H5开发整体解决方案

2024年3月26日 178次阅读 来源: rand

用一周的时间上线了一个基于微信端的H5，把微信内置浏览器的坑几乎都踩了一遍，稍做总结，希望我所遇到的问题，各位同学都不在遇到

视频

禁止视频全屏

<video  controls  x5-playsinline="" playsinline="" webkit-playsinline="" >
   <source src="url" type="audio/mp4">
   您的浏览器不支持 video 标签
</video>

图片

不得不说，图片一直都是H5中流量占用的大头，大于500kb的图片在无线端的加载几乎慢成了翔，优化H5的第一步就是，优化图片的显示，目前我用了了两种方式来优化图片

在线压缩

对jgp和png的格式的图片全部压缩一遍，压缩率几乎可以达到百分之五十，对速度的提升非常明显，建议H5上线之前必须进行一次

在线图片压缩网站参考

第三方cdn

cdn的作用就不说了，谁用谁知道，将压缩后的图片存在cdn的空间上面，用户体验又可以提升一大步，如果公司有自己的cdn服务器那是最好的，如果没有的话就去借助七牛或者又拍云之类的服务，个人开发者几乎可以免费使用

关于加载进度

可以毫不夸张的说，所有你看到的H5加载进度，都是假的。javascript根本没有办法精确的计算到页面的加载进度，最多计算出一个大概的值，但我们也并不需要对么精确的值，我们只需要一个最小化的时间期限，只要在这个时间期限之内，可以保证百分之九十以上的概率加载ok就可以了，so，定一个时间，然后随机增加加载进度显示的数字

  var load=document.getElementById('loading');
  var index=0;
  var timer=setInterval(function(){
     if(index>5){
         clearInterval(timer);
         //some code
     }else{
        load.innerHTML=parseInt(load.innerHTML)+Math.floor(Math.random()*10+10)+'%';
        index++;
     }
  }, 1000)
})()

我是这么做的，定了五秒的时间，每秒随机一个10-20之间的整数，加在加载进度上，五秒之后，停止计时器，开始执行最终的业务逻辑

关于背景音乐自动播放

默认情况下，我们添加一段audio自动循环播放的代码是这样的

<audio id='bkMusic' loop="loop" autoplay='autoplay'  src="./wav/bk.mp3" ></audio>

但是在微信端你这么搞，是行不通的。微信内置浏览器不支持autoplay,必须用一个事件促发才能播放。那么onload会是最佳的促发方式

window.onload=function(){
    ···some code
    $('#bkMusic')[0].play();
}

这里有一个坑，就是如果你在onload里面还有其他的业务逻辑，那么必须先执行其他的业务，最后在执行音频的play(),如果先执行play(), 你的音频会播放，但是其他的逻辑没反应了，至于为什么会这样，有待我继续深入研究

关于动画animation

微信内置浏览器使用的是qq浏览器的X5内核，动画属性并不能完美的兼容，必须添加-webkit-前缀，当然，我们可以使用自动化工具一次性生成所有前缀，那样就更不存在任何问题了，下面贴一段我利用opacity属性做的呼吸灯的动画,很简单的动画，就是不停的改变opacity的值。从透明到不透明再到透明

#light img{
    animation: mylight 4s linear  infinite;
    -moz-animation: mylight 4s linear  infinite;    
    -webkit-animation: mylight 4s linear  infinite;    
    -o-animation: mylight 4s linear  infinite;    
}
@keyframes mylight
{
0%   {opacity: 0;}
50%  {opacity: 1;}
100% {opacity: 0;}
}
@-webkit-keyframes mylight 
{
0%   {opacity: 0;}
50%  {opacity: 1;}
100% {opacity: 0;}
}

关于动画GPU加速

关于垂直滚动条

常见问题解决

禁止移动端双击会放大屏幕

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

禁止ios端识别手机号码自动添加下划线

<meta name="format-detection" content="telephone=no" />

今天补完，先干活

    原文作者：rand
    原文地址: https://segmentfault.com/a/1190000004047272
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞