h5活动项目的填坑经历——ios背景音乐自动播放，生成海报等

背景：

活动是在微信浏览器里使用的，主要坑点在背景音乐自动播放，生成海报图。海报图选择了html2canvas去生成，回想起来全是坑。

一、背景音乐自动播放问题

音乐自动播放在安卓里都好说，一个autoplay解决。
主要是在ios里需要特殊处理，分为2个场景：

（1）h5页面在微信浏览器中：此时可以借助wx.ready，拿到video，使它开始播放，直接贴上代码。

// 微信里自动播放音频
export function iosPlay(id, configParam) {
    wx.ready(function() {
        var globalAudio=document.getElementById(id);
        if(configParam) {
            globalAudio && globalAudio.play();
        } else {
            globalAudio && globalAudio.pause()
        }

    });
}

（2）h5页面在app中：

此时自动播放受到webview的控制，需要app伙伴配合修改。

二、海报问题

（1）生成海报时背景音乐重叠问题

这个原因是html2canvas插件导致，猜测是它生成海报时，会把所有dom元素再过一遍，找到我们选中的dom节点，而这个时候，video的autoplay又被触发了一遍，导致背景音乐重叠。

（2）生成海报时图片问题

1）把html2canvas的设置useCors: true。允许其加载cors的图片。
2）遇到报错

Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

解决：

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = url;

3）遇到一个问题，有一个动态二维码，是后端返回一个地址，那个地址动态生成返回一个二维码。这样无法画到canvas上，改为后端直接返回图片base64。

三、oppo半屏问题

低版本安卓机上，键盘顶起再收起之后，可显示的屏幕只有一半了。
解决办法是在输入框blur的时候加上window.scroll(0, window.innerHeght)。

四、ios低版本机型字体放大问题

在某些小屏手机上，一些浏览器会为了可读性，放大字体，这样容易导致布局错乱。
通过 -webikt-text-size-adjust:none可禁用此功能。

参考：

canvas图片跨域问题

corssOrigin

text-size-adjust