前几天做了一个H5项目，过程挺坎坷的，结束的时候差点把我吓傻。总结了一些心得和注意事项在这里记录下来，避免以后犯同样的错误。

　　这个项目比较紧，面板的时间只有1.5天（实际所用时间3天，加班啦，我的周末……），客户的需求是通过一个通过css3动画和明星视频把客户吸引到广告页面。另外客户要求埋点，接入他们的代码用以统计访问的数据量。

　　首先说技术方面的难点和注意事项。一个H5一般包含的内容并不多，主要是动画效果。所以务必做成一个页面，这样用户体验会更好，也方便用户拿到想要的访问量等数据（这次我是做了三个页面，体验不太好的）。开头是个邮件箱子，邮箱门需要在用户点击后打开，这里我们采用transform:roate()做一个3d翻转，注意要利用transform-origin定义翻转的轴。使用audio标签引入背景音乐文件，设置autoplay属性。但是ios系统在和用户交互的情况下才能播放背景音乐，这是我们在加入wx.ready(function () {audio.play()});即可在wx文件加载完毕后实现ios系统的自动播放背景音乐。另外是点击明星头像播放相应的视频，起初我是打算用html的map标签实现，其实不管是单页面还是多页面，我们可以用div定位到不同点击元素的上面，再给div定义点击事件或添加a标签来实现点击不同区域相应不同事件的功能。最后就是一个渐变动画了，而且是图片的渐变，这在我看来，以现在的技术无法实现的，好在我们可以采用序列帧的做法，点击事件一触发，我们就开始播放序列帧，很简单，要注意图片的预加载，否则会有卡顿的现象发生。

　　说一下注意事项，埋点一定要做，而且要做好，根据甲方提供的代码功能，把相应的接口嵌入到自己代码里，这样会有友好的访问数据生成，切记，一旦没有做好，整个项目就GG一半了。

　　这次最需要汲取的教训有两点：1、H5页面一定要写在一个Html里面；2、埋点一定要做好，埋点： 根据埋点的类型（访问时调用、点击时调用、分享时调用）在不同事件后加入相应的第三方埋点代码。

html5项目的注意事项