基于微信小程序的媒體列表優(yōu)化

前言

開發(fā)web應(yīng)用的時候，總會觸及到多媒體列表的加載。我們可以通過多種手段來對進(jìn)行優(yōu)化，這將會極大程度提高了用戶的體驗甜害。

實現(xiàn)方案

設(shè)置骨架屏

網(wǎng)絡(luò)資源的加載是非常昂貴的，在資源加載時球昨，越來越多的APP采用了“骨架屏”的方式去提升用戶體驗尔店。

aaa

實現(xiàn)思路：圖片未加載完成的時候顯示骨架屏，圖片加載成功之后顯示關(guān)閉骨架屏的顯示主慰。

1.骨架屏組件：vant

2.監(jiān)聽image組件的bindload事件

3.bindload事件執(zhí)行成功后嚣州，設(shè)置load為true，關(guān)閉骨架屏：

---js---
imageLoad(e) {
    const {
      x,
      y
    } = e.currentTarget.dataset;
    //設(shè)置load為true共螺，關(guān)閉骨架屏
    const temp = "subEvent[" + x + "].sub_event_files[" + y + "].load";
    this.setData({
      [temp]: true
    })
  },
---wxml---
<van-skeleton row="1" class="class_{{sub_events_index}}_{{sub_event_files_index}}"
  style="width:100%;height: 100%;"
                    loading="{{!sub_event_files_item.visibility&&!sub_event_files_item.load}}"
                    wx:if="{{sub_event_files_item.type==='video'}}">

圖片懶加載

思路：判斷當(dāng)前圖片是否進(jìn)入可視區(qū)域该肴，進(jìn)入則直接設(shè)置url或者展示圖片（作者采用進(jìn)入可視區(qū)域就展示圖片的方式，因為作者采用的是骨架屏的方式藐不，設(shè)置了寬高匀哄；<strong>如果不是這種方式則需要一定的占位符秦效，不然會導(dǎo)致一開始所有的資源都在可視區(qū)導(dǎo)致所有的資源一并加載</strong>）

image

（留意右邊網(wǎng)絡(luò)請求）

核心API：IntersectionObserver IntersectionObserver.relativeToViewport(Object margins)，判斷是否處于可視區(qū)域

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // 相交區(qū)域占目標(biāo)節(jié)點的布局區(qū)域的比例
      res.intersectionRect // 相交區(qū)域
      res.intersectionRect.left // 相交區(qū)域的左邊界坐標(biāo)
      res.intersectionRect.top // 相交區(qū)域的上邊界坐標(biāo)
      res.intersectionRect.width // 相交區(qū)域的寬度
      res.intersectionRect.height // 相交區(qū)域的高度
    })
  }
})

loadMedia() {
    //懶加載
    this.data.subEvent.forEach((subEventItem, subEventItemIndex) => {
      subEventItem.sub_event_files.forEach((subEventFileItem, subEventFileIndex) => {
        wx.createIntersectionObserver().relativeToViewport().observe(`.class_${subEventItemIndex}_${subEventFileIndex}`, (ret) => {
          //進(jìn)入可視區(qū)域
          if (ret.intersectionRatio > 0) {
            const temp = "subEvent[" + subEventItemIndex + "].sub_event_files[" + subEventFileIndex + "].visibility";
            this.setData({
              [temp]: true
            })
          }
        })
      })
    })
  },

視頻列表優(yōu)化

問題描述：微信小程序同一個頁面創(chuàng)建多個video標(biāo)簽拱雏，頁面拖動的時候棉安，視覺效果上有明顯的掉幀行為底扳；因此面對展示多視頻的情況直接在頁面渲染多個video標(biāo)簽就非常不合適了铸抑。

解決方案：上傳視頻文件的時候，保存視頻首幀圖衷模；<strong>頁面渲染時鹊汛，展示首幀圖，并且通過定位的方式把播放按鈕設(shè)置到圖片上方</strong>阱冶，模仿視頻效果刁憋，以此來代替創(chuàng)建多個video標(biāo)簽的方案。

核心API：wx.chooseMedia(Object object)(留意thumbTempFilePath屬性木蹬，為視頻的首幀圖)

體驗