前幾天做了一個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項目的註意事項