微信h5兼职总结

最近接了一个微信h5的兼职，特来做一些总结，以供今后再次使用做参考

1. 页面滚动效果库，wow.js，这个库配合animate.css，简直就是h5神器

2. 苹果手机上，直接改audio的currentTime参数无效，需要配合canplay事件

 if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {    
    document.getElementById('bgMusic').addEventListener('canplay', function() {   
        bgmMusic.currentTime = currentTime;     
    });
 } 
 else {     
    bgmMusic.currentTime = currentTime; 
 }

3. 苹果手机，用onclick事件会有点击失效（需要点击两次），可以用zepto.js内置的touch事件代替，比如touchstart。但是用touchstart时，在用wow.js会有问题，元素还没加载完时点击空白处（元素即将展示的地方）时，会直接跳转绑定的链接。所以后来，用fastclick.js处理点击事件了。完美兼容安卓和苹果端，有时候轮子还是好用呀。

4. 纯h5分享给朋友时，设置缩略图的办法，在之前塞一张jpg格式的图片。设置隐藏透明度都没用，必须加载出来。可以设置成加载一完成就隐藏，没办法中的办法。最好还是配置公众号参数。

5. 移动端机型适配，建议采用rem + media查询的方式

6. h5生成海报功能可参考用html2canvas库，注意点：如果html中用到了图片，一定要是生产环境试（或者本地起个服务，总之file访问html没法成功），才能生成成功

function generatePage() {  html2canvas(document.querySelector("#capture"), {    allowTaint: false  }).then(canvas => {    canvas.setAttribute("id", "mycanvas")    let imageData = canvas.toDataURL(1);    let img = new Image();    img.src = imageData;    img.style.width = '100%';    document.body.appendChild(img)    // document.querySelector("#goal").src = imageData;  });}

7. h5页面分享朋友圈和朋友的过程记录

• 准备企业公众号账号和密码，配置js安全域名（h5页面的域名）

• 搭建公众号开发后台（php java node.js等均可），作用就是需要给前端提供一个接口，用于返回appid, timestamp, nonceStr, signature这些必要参数

• 拿到服务端返回的微信所需参数，进行相关js编写，下面贴了代码

• 微信会提供一个txt文件，应该是用来验证合法身份的。然后把这个文件放到h5所在的服务器上即可

• 大功告成