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

最新推荐文章于 2024-08-14 12:01:36 发布

喔烨鸭

最新推荐文章于 2024-08-14 12:01:36 发布

阅读量1.7k

点赞数 3

分类专栏：微信小程序文章标签： html5 小程序

本文链接：https://blog.csdn.net/qq_45432996/article/details/108791121

版权

微信小程序专栏收录该内容

9 篇文章 2 订阅

订阅专栏

这里介绍的是单个图片点击预览的，也可以多张，方法差不多
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);                                  //失败
           }
       })