微信小程序点击单个图片进行预览图片，点击预览pdf文件-蒲公英云

微信小程序点击单个图片进行预览图片，点击预览pdf文件

这里介绍的是单个图片点击预览的，也可以多张，方法差不多
index.wxml

<view class="page">
  <view class="page__hd">
      <text class="page__title">image</text>
      <text class="page__desc">图片</text>
  </view>
  <view class='imgList'>
      <view class='imgList-li'>
          <image src="{ {ItemUrl}}{ {imgurl}}" mode="scaleToFill" bindtap='previewImg'></image>
      </view>
  </view>
</view>

index.wxss

.imgList{ 
    width: 100%;
  }
  .imgList .imgList-li{ 
    width: 300rpx;
    height: 300rpx;
  }
  .imgList .imgList-li image{ 
    width: 300rpx;
    height: 300rpx;
  }

index.js

Page({ 
  data: { 
    imgurl :'/dmsmty/74_74_100/t01df7265f2a34fadb9.png',
    ItemUrl: 'https://p.ssl.qhimg.com'
  },
  previewImg:function(e){ 
    var imgArrUrl = this.data.ItemUrl + this.data.imgurl;
    wx.previewImage({ 
      current: imgArrUrl,     //当前图片地址
      urls: imgArrUrl.split(","),  //所有要预览的图片的地址集合 数组形式['https://p.ssl.qhimg.com/dmsmty/74_74_100/t01df7265f2a34fadb9.png']
      success: function(res) { },
      fail: function(res) { },
      complete: function(res) { },
    })
  }
})

如果是点击预览pdf文件（真机华为手机可能有问题）

wx.downloadFile({ 
      url: 'https://storage.jd.com/eicore-fm.jd.com/042001900211-71246106.pdf?Expires=2538379555&A',      //要预览的PDF的地址
           success: function (res) {                            
             console.log(res);
             if (res.statusCode === 200) {                      //成功
               var Path = res.tempFilePath                     //返回的文件临时地址，用于后面打开本地预览所用
               wx.openDocument({ 
                 filePath: Path,                               //要打开的文件路径
                 success: function (res) { 
                   console.log('打开PDF成功');
                 }
               })
             }
           },
           fail: function (res) { 
             console.log(res);                                  //失败
           }
       })