微信小程序裏碰到的坑和小知識

本文做者：dongtao   來自：受權地址

 

本人低級程序員,如下bug不能確保在其它地方能夠以相同的緣由復現.
同時, 出現不少bug的緣由是小程序的基本知識還有編碼的基本功不到位形成

路還很長,共勉

---

目錄

1. 資源 (資源加載時候會出現的問題)
2. API (api在使用中有可能會碰到)
3. 工具 (模擬器和真機調試有可能出現的問題)
4. 兼容 (在真機上調試時候有可能出現的問題)

---

資源篇

1. 已解決
   在app.wxss裏設置了圖片路徑,在IDE里正常無誤,可是在手機上是沒有顯示的,
   解決辦法:(這段話位置放那麼偏~ )
   

    
   
   問題描述
   

   代碼截圖 app.wxss.png
   
   

   模擬器裏的效果.png
   
   

   手機裏的效果.png
2. 已解決
   更新: 如下在模擬器裏是能夠的可是在手機上是無效的! 緣由參考第一條
   app.wxss裏的圖片路徑要按照組件文件夾的圖片路徑來寫

   //用最上面的1來距離 這個樣式最開始在一個pages文件夾裏,因此圖片路徑是 ../../imgs/XXX, 按理說若是把這個樣式提取到外面的app.wxss裏的話 圖片路徑應該改成./imgs/XXX.. 然而改爲這樣以後在模擬器都沒法生效.

3. 已解決
   在index點擊跳轉到login時候,標記三的部分沒有寫page()進行實例化,致使2 的頁面加載時候沒加載相應的js
   , 會報如下錯
   

    
   
   

    

---

API 篇

1. 未解決
   用小程序自帶的底部導航組件的話, 無法實現跟微信原生底部小紅點或者消息提醒的功能
2. 已解決
   picker使用時候 picker組件裏必需要有內容,放一個值爲空的變量並無做用
   

    

   這裏我若是隻保留{{age}}的話, 這個組件是沒法觸發的. 組件裏面必須至少要有1個字符(哪怕是1),這個組件才能夠被觸發,可是空格是不行 放一個寬高爲100%,display:block的view,若是view裏沒內容,view是不會顯示的, 必需要在view裏放東西,哪怕一個數字也行. 而後這裏只能寫成了這種(本來需求是這個日期選擇器默認狀態是空,)

3. 已解決
   沒仔細考證,網上說圖是無法批量上傳的,因此這裏只能用單個上傳,成功後遞歸調用來解決批量上傳.
   如下代碼有一個錯誤,第十會說到文件上傳的另外一個問題
   

    
4. 已解決
   textArea 沒有bindinput事件

   以前描述: 有個業務場景是檢測多行輸入框,若是有值,按鈕立馬變成可點擊. 然而textarea是沒有input事件的, 最後只能用blur進行失去焦點的時候監聽 解決辦法: blur的在電腦上的體驗如描述所說,但是真正在手機上運行的時候, 體驗和需求中的一致...

5. 已解決:
   wx.uploadFile 中formData參數問題:
   • 這個接口的formData 微信在處理的時候 已經用formData進行了包裝. 因此這裏是沒有必要本身用formData來傳遞參數的(好比註釋掉的代碼)
   • 扯淡的是, 傳遞了form格式的參數以後 在瀏覽器和安卓下, 接口是能夠正常使用的, 並不會報什麼錯
   • 可是! 在ios裏 會直接報錯, 不是運行異常,是直接紅色的報錯.!!!!!
     

      

---

工具

1. 已解決
   結論:
   手機預覽的時候會進行域名合法校驗的, 模擬器裏的關閉域名校驗只是對模擬器有效
   問題描述:
   • 模擬器裏開啓"開發工具不開啓域名校驗"以後在模擬器裏是能夠用http的,可是當在手機上預覽的時候http並不能用, 模擬器開的這個 只負責在模擬器裏.
   • 若是不開啓的話, 而且在APP配置信息裏,沒有設置合法域名的話, 在模擬器裏是可使用圖片上傳之類的接口,可是在手機上並不能夠
     

      

---

兼容

1. 已解決
   在手機上 在外部容器給定高度的狀況下,容器裏的input的高度設100%在ios上是無效的.可是在模擬器和安卓下面是正常的(具體規律還沒掌握清楚)
2. 未解決
   輸入法掩蓋textarea, 這個bug有一半的機率會出現
   

 轉載地址： 微信小程序聯盟