关于微信小程序中视频列表的优化性能（微信小程序中video不支持webp）

因为微信小程序中的video不支持webp格式，只有Image支持，但是云音乐小程序的接口返回的视频列表数据中只有webp图片格式，却有视频的vid。

为了性能优化，用image来先代替video来优化，然后点击了图片，再使视频显示出来，并且自动播放（不自动播放的话点了图片之后还要再点一下视频才能播放）

<video src="{{playing}}" 
poster="{{item.data.coverUrl}}" 
class="common" id="{{item.data.vid}}" 
wx:if="{{videoId == item.data.vid}}" 
autoplay="true" 
object-fit="fill"></video>
<!-- 性能优化：使用image标签代替video标签 -->
<image wx:else src="{{item.data.coverUrl}}" class="common" 
bindtap="handlePlay" id="{{item.data.vid}}"></image>
<view class="content">{{item.data.title}}</view>

这里由videoId(代表当前播放视频的id)来控制哪个显示，点击图片后会改变，并把playing（当前播放视频的url）。

// 点击了webp图片后，再发请求播放视频
  async handlePlay(e){
    // console.log(e.target.id);
    // 把到视频的id，再发请求获得对应视频的地址
    let vid = e.target.id;
    let result = await request('/video/url',{id:vid});
    if(result.code === 200){
      this.setData({
        playing:result.urls[0].url,
        videoId:e.target.id
      })
    }
}

本来的接口返回的数据中的视频的url但是现在没有，而是webp。因为webp是一种效率较高的图片形式，后来我又找了通过视频的vid再返回url的一个接口才找到的。