我目前的所参与的工作是基于微信场景的项目，经常会遇到一些问题。这里是一些相关的问题及解决方案的集合。

问题及解决方案

这里一部分是我自己的经历，也有一部分是从参考链接中获取信息并记录的。

分享或保存海报时，海报绘制残缺不全

我们的海报是后端生成，然后使用流的形式返回到前端的。QA在测试的时候发现在分享或者保存海报的时候，海报上存在大片的黑色区域。

后经排查是后端配置的Buffer空间太小，导致海报还没有完全绘制完成的时候就被中断了。解决方案是扩大Buffer空间。

字体文件太大

用fontmin工具进行字体剪裁，只提取所需的字体。

保存网页快照到本地照片

前端遍历dom节点，使用html2canvas将dom渲染到canvas上。

const el = document.querySelector('#result')
html2canvas(el).then(canvas => {
    const img = new Image()
    img.style.display = "block"
    // 将 canvas 导出成 base64
    img.src = canvas.toDataURL('image/jpeg')
    // 添加图片到预览
    document.querySelector('#preview').appendChild(img)
})

IOS上音频不支持自动播放

iOS不允许在用户没有任何交互行为的情况下自动播放，影响用户体验。解决方案是监听touchstart方法，在用户触摸屏幕任何地方后开始播放音频。

el.addEventListener('touchstart', function () {
    if (!hasInteracted) { // 只触发一次
        hasInteracted = true
        musicEl.play()
    }
})

微信长按图片无法识别二维码

提高二维码容错率，二维码密度越高，识别精度越高。

参考链接

H5 实现保存图片的采坑记录(不仅限于标题的内容哦).
微信H5页面前端开发，大多数人都会遇到的几个兼容性坑.

微信开发问题及解决方案集锦