码迷,mamicode.com
首页 > Web开发 > 详细

html5项目的注意事项

时间:2017-05-11 18:29:50      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:定义   function   family   bsp   origin   记录   方便   好的   效果   

  前几天做了一个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项目的注意事项

标签:定义   function   family   bsp   origin   记录   方便   好的   效果   

原文地址:http://www.cnblogs.com/zhangbob/p/6841939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!