基于微信小程序的媒体列表优化

前言

开发web应用的时候，总会触及到多媒体列表的加载。我们可以通过多种手段来对进行优化，这将会极大程度提高了用户的体验。

效果图

实现方案

设置骨架屏

网络资源的加载是非常昂贵的，在资源加载时，越来越多的APP采用了“骨架屏”的方式去提升用户体验。
实现思路：图片未加载完成的时候显示骨架屏，图片加载成功之后显示关闭骨架屏的显示。
1.骨架屏组件：vant
2.监听image组件的bindload事件
3.bindload事件执行成功后，设置load为true，关闭骨架屏：

---js---
imageLoad(e) {
    const {
      x,
      y
    } = e.currentTarget.dataset;
    //设置load为true，关闭骨架屏
    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'}}">

图片懒加载

思路：判断当前图片是否进入可视区域，进入则直接设置url或者展示图片（作者采用进入可视区域就展示图片的方式，因为作者采用的是骨架屏的方式，设置了宽高；如果不是这种方式则需要一定的占位符，不然会导致一开始所有的资源都在可视区导致所有的资源一并加载）

核心API：IntersectionObserver IntersectionObserver.relativeToViewport(Object margins)，判断是否处于可视区域

Page({
  onLoad: function(){
    wx.createIntersectionObserver().relativeToViewport({bottom: 100}).observe('.target-class', (res) => {
      res.intersectionRatio // 相交区域占目标节点的布局区域的比例
      res.intersectionRect // 相交区域
      res.intersectionRect.left // 相交区域的左边界坐标
      res.intersectionRect.top // 相交区域的上边界坐标
      res.intersectionRect.width // 相交区域的宽度
      res.intersectionRect.height // 相交区域的高度
    })
  }
})

loadMedia() {
    //懒加载
    this.data.subEvent.forEach((subEventItem, subEventItemIndex) => {
      subEventItem.sub_event_files.forEach((subEventFileItem, subEventFileIndex) => {
        wx.createIntersectionObserver().relativeToViewport().observe(`.class_${subEventItemIndex}_${subEventFileIndex}`, (ret) => {
          //进入可视区域
          if (ret.intersectionRatio > 0) {
            const temp = "subEvent[" + subEventItemIndex + "].sub_event_files[" + subEventFileIndex + "].visibility";
            this.setData({
              [temp]: true
            })
          }
        })
      })
    })
  },

视频列表优化

问题描述：微信小程序同一个页面创建多个video标签，页面拖动的时候，视觉效果上有明显的掉帧行为；因此面对展示多视频的情况直接在页面渲染多个video标签就非常不合适了。

解决方案：上传视频文件的时候，保存视频首帧图；页面渲染时，展示首帧图，并且通过定位的方式把播放按钮设置到图片上方，模仿视频效果，以此来代替创建多个video标签的方案。

核心API：wx.chooseMedia(Object object)(留意thumbTempFilePath属性，为视频的首帧图)

体验