微信小程序踩坑之路

前段時間公司要求作了一個微信小程序，如今趁着還算空閒，總結一下小程序中所遇到的問題。

有微信提供的文檔接口和開發者工具，完成起來老是感受那麼暢快，可是在手機上預覽後，老是會有這樣那樣的問題：

一、背景圖片的問題

　　微信要求打包的小程序不超過1M，也許是出於這個緣由，微信不容許用本地圖片，但可使用image標籤來展現圖片，或者將背景圖轉爲base64，也或者用圖片網絡地址也能夠，將圖片存到服務器上，可是每次圖片有修改都要從新上傳，如此也是很麻煩；base64圖片編碼若是圖片大的話編碼會很長，可是這種也算方面些；

二、圖片問題：通常頁面背景圖選擇用png格式的圖片，可是在小程序中，通常格式的圖片做爲背景圖會很模糊，因此選擇了矢量圖svg來做爲背景圖base64轉碼；

三、數據接口：小程序規定接口必須是https的請求，必須在小程序的管理後臺配置好請求域名，上傳域名，開發工具能夠是http；

四、頁面之間的跳轉：小程序的頁面跳轉有wx.navigateTo、wx.redirectTo、wx.switchTab、wx.navigateBack四種跳轉方式，同時規定跳轉不能超過5層；跳轉的實現經過bindtap點擊事件或組件navigator 

<navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在當前頁打開</navigator>

可是連續點擊的話頁面會進行屢次跳轉，這時候個人解決辦法是判斷僅讓點擊一次執行操做；

五、文本框的默認提示文字：當光標到文本框內，獲取焦點時，默認提示文字會閃動，這個沒有去解決；

六、文本框設置爲密碼框時：當文本框爲密碼框時，type="text"，手機鍵盤第一次輸入數字後閃動到字母鍵盤，這個沒有去解決；

七、按鈕的點擊效果：文檔中提示當hover-class="none"時，沒有點擊效果，可是並非如此；當button按鈕設置爲鏤空時，仍然有效果的出現，所以不設置鏤空就能夠了；

八、消息提示框類型：小程序只提供了兩種消息提示框類型：success、loading；對於有些須要提示的地方老是不合時宜，所以就本身寫了一個；

九、小程序的佈局：佈局用了rpx佈局，基本適應了大部分手機的大小，可是小屏手機就須要特別適應；

十、錄音功能：小程序的錄音格式是silk的，在其餘播放控件上是不能播放的，wx.playVoice是能夠播放本地緩存錄音文件的；因此上傳錄音文件必需要進行轉碼，這個咱們是有後臺進行轉碼處理的。

 

　　大概就是這些吧，個人記性不是太好，總之，小程序的總體的框架體系仍是極好的。。。