? ? H5其實就是一個微型網頁，一個H5的開發時間很少，但是需要用到的功能確實很多，下面就來總結一下一個H5的開發流程。

一、需求分析

? ? ? ? H5也是一個小型的網站，網站的開發就離不開需求分析，只有做好需求分析后才能更好的設計頁面，設計接口。下面簡單介紹一下接口的設置準則。

? ? ? 與后端數據的交流一般有兩種方式；同步和異步，同步傳遞的數據可以通過頭文件中傳遞，在php頁面中通過php變量的方式獲取：$sharekey。而異步獲取數據時就要通過接口請求，接口的后臺返回值格式和前端的傳入值格式要開發人員自己協調，但是微信內為了保證數據安全，一般都會傳入五個值：name、key、ukey、timestamp、nonce。

二、處理設計稿

? ? ? ?設計提供的psd稿，需要前端人員根據自己的需要來規整psd稿，將psd按照一個特定的規則還放置，然后通過ps腳本文件來處理psd，生成自己需要的圖片文件，將每一個圖片里面的信息賦值給圖片名，然后再在通過php去讀取該圖片的信息，生成自己需要的數據格式，即前端頁面需要的配置表。

? ?注：具體的ps腳本文件和php批處理文件存放在我的百度網盤中工作積累文件夾。

三、生成簡單頁面

? ? ? php生成了config文件，然后通過js寫配置表，生成簡單的頁面，然后再在該頁面中添加邏輯。我們開發時會通過一個loading.js實現圖片資源的預加載和讀取配置表。

四、微信分享設置

? ? ? ?微信分享也是一個必不可少的功能，這個功能的實現需要后臺去配置公眾號等，而前端只需要傳遞分享標題，分享語和分享圖片。微信分享開發的配置在微信開發者文檔里面有介紹。

五、音頻設置

? ? ? ? 音頻的問題中，我們在原生audio的基礎上寫了一個sound對象來操作，如果需要多音頻播放，也可以用howler.js庫。

六、統計

? ? ?可以通過learnCound來實現統計，自己編寫的AV.analytics.js文件添加到項目中，然后通過log()添加統計

也可以使用百度統計，具體見官方文檔。

七、上傳七牛云cdn加速

上傳cdn很簡單，可以使用工具QsunSync，上傳時要設置路徑方式和上傳方法

總結

以上是生活随笔為你收集整理的H5开发流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。