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

一、需求分析

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

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

二、處理設(shè)計稿

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

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

三、生成簡單頁面

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

四、微信分享設(shè)置

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

五、音頻設(shè)置

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

六、統(tǒng)計

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

也可以使用百度統(tǒng)計，具體見官方文檔。

七、上傳七牛云cdn加速

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。