h5活动页踩坑总结

来到公司也写过几个h5,最常见的坑也踩过了，记录下方便没有写过h5的同学查阅。

1.微信ios下音乐不能自动播放

微信下音乐播放

        // 微信自动播放音乐
        document.addEventListener('DOMContentLoaded', function () {
            function audioAutoPlay() {
                var audio_ = document.getElementById('music');
                audio_.play();
                document.addEventListener("WeixinJSBridgeReady", function () {
                    audio_.play();
                }, false);
            }
            audioAutoPlay();
        });

IOS系统默认没有交互下不会自动触发媒体事件，可以采用了一个在加载页中加入一个按钮，当加载完成的时候，点击按钮，引导用户完成背景音乐的自动播放，代码如下：

$("html").one('touchstart',function(){
    audio.play();
})

2.ios下音乐旋转按钮暂停问题

iOS 上 animation-play-state 失效,所以不能用普通的animation动画
html

        <div class="music">
            <img class="musicImg animate" src="./images/music.png" alt="">
        </div>

less

@r: 75rem;
.music{
    width: 60/@r;
    height: 60/@r;
    background-size: 100% 100%;
    position: absolute;
    top: 20/@r;
    right: 20/@r;
    z-index: 100000;
    
    img{
        width: 100%;
        height: 100%;
    }

}
.animate {
    animation: round 5s linear infinite;
}

@keyframes round {
    100% {
        transform-origin: center center;
        transform: rotate(1turn);
    }
}

js

     var isPlaying = true;
     var container = $('.music')[0];
     var image = $('.musicImg')[0];

    image.addEventListener('click', function bindEvent() {
           isPlaying ? pause() : play();
    });

    function pause() {
            isPlaying = false;
            var iTransform = getComputedStyle(image).transform;
            var cTransform = getComputedStyle(container).transform;
            container.style.transform = cTransform === 'none'
                ? iTransform
                    : iTransform.concat(' ', cTransform);
                   image.classList.remove('animate');
                   music.pause();
    }

     function play() {
         isPlaying = true;
         image.classList.add('animate');
         music.play();
     }

链接描述

3.overflow: auto在Ios中滑动不流畅

方案一：

在滚动容器内加-webkit-overflow-scrolling: touch

但这个方案有一个问题，在页面内具有多个overflow：auto的情况下，那些具有 绝对定位（absolute, fixed） 属性的元素，也会跟着滚动。

方案二：

body {overflow-x: hidden}

即，给 body 元素添加overflow-x：hidden。然后在滚动容器内加overflow-y: auto

4.安卓下键盘弹出绝对定位出错

这个问题主要的思路是监听resize事件，键盘弹出是设置absolute为static。

       window.onresize = () => {
            // 处理安卓键盘问题
            if (this.resizeLock) {
                $('.fabu').css({ position: 'static' });
                this.resizeLock = !this.resizeLock;
            } else {
                $('.fabu').css({ position: 'absolute' });
                this.resizeLock = !this.resizeLock;
            }
        };

5.ios下微信chooseImage接口图片显示不出来的问题

这个问题产生的原因
iOS WKWebview 网页开发适配指南
具体可以参考这篇博客的解决方法
微信开发 关于wx.getLocalImgData那点事儿 已解决！
但是通过微信提供的window.wxjs_is_wkwebview判断是否是ios设备是测试机iphone同样缺返回了undefined并没有判断正确，然后换了种方式判断设备类型

        var ua = navigator.userAgent.toLowerCase();
        if (/iphone|ipad|ipod/.test(ua)) {
            // alert("iphone");
            vm.isIos = true;
        } else if (/android/.test(ua)) {
            // alert('android');
            vm.isIos = false;
        }

判断微信客户端的方法

6.user-select: none;在ios上的问题导致input无法选择的问题。

最初添加这个属性本来是想禁止用户选择文字，在安卓上没有问题，但在ios上这个属性导致了input输入框无法选中获取焦点。

还有单选框，复选框移动页面消失，是受被全局样式影响了input,textarea{-webkit-appearance: none;};

7.new Date()设置日期在IOS的兼容问题

一般这样创建一个日期变量

var d = new Date("2017-08-11 12:00:00");

发现在iOS中不兼容，返回valid Date。
IOS中不支持 - 连接日期
需要写成

var d = new Date("2017-08-11 12:00:00".replace(/-/g, "/"));