微信小程序点击单个图片进行预览图片,点击预览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);                                  //失败
           }
       })

猜你喜欢

转载自blog.csdn.net/qq_45432996/article/details/108791121