微信小程序的踩坑與優化。

如下內容是我在開發中所遇到的問題以及解決方案，若有不對，還望指出～
複製代碼

開發小程序的踩坑記錄。

1. 使用官方的scroll-view組件，在調節樣式的問題的時候，橫向佈局，裏面須要滑動的元素必須設置display: inline-block,不然沒有效果。豎向佈局，scroll-view必須有一個固定高度，使用px/rpx單位。在安卓機上會顯示滾動條，設置css **::-webkit-scrollbar { display: none }**

2. 本身寫的一個組件，佔頁面高度的60%，多出內容須要滾動顯示，在ios系統上顯示不流暢，需設置css -webkit-overflow-scrolling : touch;

3. 頁面底部固定定位一個元素，中間內容超出滾動展現，安卓系統無異常，ios系統固定的元素無視，致使底部最後的元素顯示一半，獲取當前本機的高度，而後作計算。

4. 針對頁面的小圖標，不要使用精靈圖去作計算，首先在模擬器上是沒問題，上了真機會顯示模糊並且位置計算的也不精準，（一、2倍的圖都是這樣）針對這樣的儘量的去使用圖標庫（阿里巴巴矢量圖表庫）/圖片進行cdn。

5. 針對http不友好，不管連接/圖片/請求使用https。固然在開發的時候能夠在開發工具中不校驗域名。

6. 在列表頁實現頁面滾動實時監聽當前是第幾頁數據，如圖。

   

   開發這個需求的時候，首先想着對滾動條作記錄，而後滑動滾條的時候去作判斷，思路是這樣，

   （1）在尋找記錄的當前第幾頁條件的高度的時候，各類緣由致使計算的並不精準（請求下一頁數據，來回滾動頁面） （2）調用onPageScroll鉤子裏頻繁調用作計算，性能也受到必定影響，因此最後放棄該需求的實現。

7. 右側列表字母滾動，主頁面的列表也跟隨滾動，如圖。與第6點很類似，也表示放棄該需求實現。

開發小程序的優化

1. 編寫自定義的組件，若是開發過vue的小夥伴，看小程序的官方文檔應該就很好理解了。達到組件複用性。
2. 避免頻繁的調用setData。
3. 與頁面渲染無關的數據，最好很差放在data中，放在page裏。
4. 儘可能避免在onPageScroll鉤子裏進行過多複雜的業務邏輯。
5. 對小程序進行分包，優化首屏的渲染時間。

還存在的一些需求，目前還沒答案。

• 能不能根據體驗版/生產版來進行區分，請求接口的地址根據這個來作變化。（目的是每次上傳的時候就不須要每次去看下當前請求的接口是測試環境/生產環境）