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

Lucky在掘金發表於2019-01-16
微信小程式優化
以下內容是我在開發中所遇到的問題以及解決方案，如有不對，還望指出～
複製程式碼

開發小程式的踩坑記錄。

  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. 針對頁面的小圖示，不要使用精靈圖去做計算，首先在模擬器上是沒問題，上了真機會顯示模糊而且位置計算的也不精準，（1、2倍的圖都是這樣）針對這樣的儘可能的去使用圖示庫（阿里巴巴向量圖表庫）/圖片進行cdn。

  5. 針對http不友好，無論連結/圖片/請求使用https。當然在開發的時候可以在開發工具中不校驗域名。

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

    微信小程式的踩坑與優化。
    開發這個需求的時候，首先想著對滾動條做記錄，然後滑動滾條的時候去做判斷，思路是這樣，

    （1）在尋找記錄的當前第幾頁條件的高度的時候，各種原因導致計算的並不精準（請求下一頁資料，來回滾動頁面） （2）呼叫onPageScroll鉤子裡頻繁呼叫做計算，效能也受到一定影響，所以最後放棄該需求的實現。

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

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

開發小程式的優化

  1. 編寫自定義的元件，如果開發過vue的小夥伴，看小程式的官方文件應該就很好理解了。達到元件複用性。
  2. 避免頻繁的呼叫setData。
  3. 與頁面渲染無關的資料，最好不好放在data中，放在page裡。
  4. 儘量避免在onPageScroll鉤子裡進行過多複雜的業務邏輯。
  5. 對小程式進行分包，優化首屏的渲染時間。

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

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

相關文章