微信小程序開發常見之坑


 最近公司讓做微信小程序開發,我是做前端的,開始以為跟html差不多,做了之后還是有區別的,在整個開發過程中我也遇到了許多坑,給大家分享一下,避免在開發過程中調入這些坑,

先說wxml吧,其實wxml的標簽跟html里面的一些標簽是一樣的,就說view標簽就相當於div標簽,text標簽相當於span標簽吧,然就是表單元素,這里就要注意了,在微信小程序中,表單元素都是原生組件,微信小程序中原生組件層級最高,所以在用input,canvas,map這些組件就要注意了,就比如說,下面填寫備注是一個input標簽,然后點擊優惠券彈出一個選擇使用優惠券的浮層就會出現下面這種情況,

input里的value會在浮層上面的,要解決這一問題還是很簡單的,在小程序中input有個placeholder-class屬性,我們只要寫一個類,規定它的z-index:1只要比浮層權重低就行了,然后使用placeholder-class屬性綁定這個類就行了,不過在使用過程中可能還會遇到別的問題,大家可與加我與我討論,還有input標簽無法設置 font-family;這些大家都要主意,對input直接float:left也是不行的,要在input外面套view,然后對其進行浮動。

scroll-view組件

注意事項:

  1. 不要在scroll-view 中使用 textareamapcanvasvideo 組件
  2.  scroll-into-view 的優先級高於 scroll-top
  3.  在滾動 scroll-view 時會阻止頁面回彈,所以在 scroll-view 中滾動,是無法觸發 onPullDownRefresh

  還有在開發過程中背景圖片如果是在本地,真機調制預覽是不顯示的,display:flex,在ios會中存在一些問題。

js里面也有許多坑,就說他們的執行順序吧,在開發者工具中執行先執行aap.js然后執行其他js文件,但在手機上app.js和其他js是同時執行的,就比如說你在app.js里面向本地存儲一個變量,然后再去index.js里面取這個變量,在開發者工具中是可以取到的,但在手機上它會取不到的,當然這也是我的邏輯問題,在開發過程中使用api也要注意,因為微信版本不同,所以在使用api時一定要仔細看文檔,做好兼容處理,比如友好提示不兼容,不然報錯就game over嘍,還有就是小程序頁面跳轉打開最多五層,超出五層不會跳轉了,所以大家要注意,可以在跳轉的時候關閉前一個頁面。

如果大家在開發過程中遇到其他一些坑也可以分享一下哦,

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM