微信小程序预览图片和视频

官方APIwx.previewMedia

1. 重装数据结构

2. wx.previewMedia 中的 sources 是个数组，然后里面是：
   [ {
   url:item.videoPath,
   type:‘video’,
   poster:item.picUrl
   }
   {
   url:item.picUrl,
   type:‘image’,

   }]

Page({

  /**
   * 页面的初始数据
   */
  data: {
    "bannerList": [
      {
          "picUrl": "http://test-qiniuyun.sdjmm.net/4e4f26f7-5dd5-482f-91c8-5da73ca3593b",
          "bannerId": 444,
          "createDate": 1618824081000,
          "bannerType": 1,
          "videoPath": "http://test-qiniuyun.sdjmm.net/2bc38330-7259-4fbd-bdda-aa1077177d04"
      },
      {
          "picUrl": "http://test-qiniuyun.sdjmm.net/925fecd0-7e5a-44c8-9b93-1967b9837c45",
          "bannerId": 445,
          "createDate": 1618824141000,
          "bannerType": 1,
          "videoPath": "http://test-qiniuyun.sdjmm.net/60b96b94-6e63-4cf6-bed4-91480d969982"
      },
      {
          "picUrl": "http://test-qiniuyun.sdjmm.net/5c70ec55-e4d6-41a6-9fc0-c8443baf79b3",
          "bannerId": 446,
          "createDate": 1618824155000,
          "bannerType": 0,
          "videoPath": null
      },
      {
          "picUrl": "http://test-qiniuyun.sdjmm.net/be557182-2a1f-48b7-83f1-479ba41e4e47",
          "bannerId": 447,
          "createDate": 1618824164000,
          "bannerType": 0,
          "videoPath": null
      },
      {
          "picUrl": "http://test-qiniuyun.sdjmm.net/80722199-b74c-49ce-ad21-2164c4f489f5",
          "bannerId": 448,
          "createDate": 1618824183000,
          "bannerType": 0,
          "videoPath": null
      },
      {
          "picUrl": "http://test-qiniuyun.sdjmm.net/ccacfade-104d-434d-9e4b-27c20ff9e204",
          "bannerId": 449,
          "createDate": 1618824197000,
          "bannerType": 0,
          "videoPath": null
      },
      {
          "picUrl": "http://test-qiniuyun.sdjmm.net/f45fb35b-06db-4f48-ae1a-2bee6e8059be",
          "bannerId": 450,
          "createDate": 1618824212000,
          "bannerType": 0,
          "videoPath": null
      },
      {
          "picUrl": "http://test-qiniuyun.sdjmm.net/7b06f276-7422-469d-bb2d-9e10901e2bb3",
          "bannerId": 451,
          "createDate": 1618824222000,
          "bannerType": 0,
          "videoPath": null
      },
      {
          "picUrl": "http://test-qiniuyun.sdjmm.net/3f6ab5b7-3724-4d8d-bffc-58bcfe4b49d7",
          "bannerId": 452,
          "createDate": 1618824231000,
          "bannerType": 0,
          "videoPath": null
      }
  ]
  },
  pic_preview(e) {
    // 版本处理
    let index = e.currentTarget.dataset.index
    let bannerList = this.data.bannerList
   let bannerArr = bannerList.map(item => {
        if(item.bannerType == 0) {
          return {
            url:item.picUrl,
            type:'image'
          }   
        }
        if(item.bannerType == 1) {
          return {
            url:item.videoPath,
            type:'video',
            poster:item.picUrl
          }        
        }
    })
    if (wx.canIUse('previewMedia')) {
      wx.previewMedia({
        sources: bannerArr,
        current: index, // 当前显示图片的http链接
      })
    }else {
      wx.showModal({
        title: '提示',
        content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
      })
    }

  },



})