今天這部分主要講小程序前端功能的開發
因爲我偏後端，css是個人弱項，可能不少人和我同樣開發小程序不知道如何下手，但願本篇文章對你有幫助
個人學習路線是：
大略看一遍小程序的api文檔
而後在github上找一些小程序(我傾向於找有readme附圖的那種)
而後download下來去跑起來 而後在看代碼。(最快速的學習是可以學習別人優秀的代碼這個我很贊同)
我收藏了一個代碼寫的不錯的開源電影推薦的小程序
做者的代碼目錄結構我很喜歡(本次demo的開發我借鑑了)
本次demo的前端流程很簡單：
錄音=>上傳=>展現返回結果
下手以前：
但願能找到一個開源的帶錄音功能的demo能幫助我快速上手，
終於找到一個比較適合的開源demo：
https://github.com/WalkingFrog/SiYu-WX
雖然該項目的做者說
項目年久失修，學習價值有限。。
可是ui ico部分，對我來講太有幫助啦
(感謝做者)
本身寫css是避免不了的那麼
我但願能找一個相似於bootstrap庫的css庫能幫助我快速排版佈局
我在github搜索到了一個ZanUI小程序專用的css庫，
https://www.youzanyun.com/zanui/weapp#/zanui/base/icon
(果然很贊)
具體代碼我已經放到了github上面了
下面就說說我在開發過程當中遇到的一些問題和解決方法
1.小程序的component功能個人理解像是asp.net mvc中的PartialView。使用的時候不要忘記將wxss文件也要引用到主wxss裏面。
例如你本身寫了一個loading的組件。
若是你在index.wxml裏面用到了message.wxml 不要忘記要將message.wxs import到index.wss，不然樣式就加載不進來(不要認爲會默認約定加載)
2.
bindtouchstart
和
bindlongtap
的使用區別
剛開始的時候我用的是
bindlongtap
可是測試發現屢次我長按了事件沒有被調用
而後我換成了
bindtouchstart
可是又太靈敏了，而後採用的是settimeout 200毫秒，並在
bindtouchend
方法進行
clearTimeout的方式解決的。
3.動畫效果,好比出現錄音的動畫，用小程序自帶的動畫功能對我來講有點難，我就用了多組圖片切換的方式解決
哈哈，這樣真的可行。
4.錄音和播放都採用了小程序最新的api
錄音對象：
wx.getRecorderManager()
音頻播放對象：wx.createInnerAudioContext()
這2個對象都提供時間註冊 例如 onStart onStop onError等等。我原來覺得是註冊屢次會覆蓋，其實這個相似於c#的多播委託 實際上是+=的概念
下篇文章會講後端的代碼實現邏輯以及音頻轉換會遇到的坑，但願你們多多支持