今天,给OneAdmin前端小程序做了适当的界面调整,让用户可以在详情页面中全屏预览图片。并且,在预览的过程中,用户还可以进行将图片保存到本地、将图片发送给朋友等操作。

  富文本图片预览功能实景

该方法调用了微信小程序开放平台的API:

  wx.previewImage({

  current: '', // 当前显示图片的http链接

  urls: [] // 需要预览的图片http链接列表

  })

第一步:在富文本中,将图片文件资源提炼出来。

  前提条件是先判断是否存在图片文件资源。

  //将富文本赋值线imageNode。

  var imageNode = res.data.data.content

  // 是否存在图片文件资源判断。

  if (imageNode.indexOf("src") >= 0) {

  // 定义一个空数组。

  var previewImage = [];

  //将imageNode进t地替换,并使用push()添加一个或多个元素,并返回新的长度。

  imageNode = imageNode.replace(/]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {

  previewImage.push(capture);

  that.setData({

  previewImage: previewImage

  });

  });

  }

  push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。

  此时,图片文件资源渲染到了页面数据之中,将命名为previewImage。

  值得注意的是,此时图片文件资源是一个数组,如果直接console.log将会显示出错误的数组信息,但不影响开发者对该数组的认知。

第二步:设置previewImage事件的方法。

  //预览图片,放大预览

  previewImage(e){

  //定义src为一个空数组

  var src = [];

  //将previewImage中的图片资源数据进行遍历。

  for (var i = 0; i < this.data.previewImage.length; i++) {

  src[i] = this.data.previewImage[i];

  }

  //直接调e和用wx.previewImage

  wx.previewImage({

  current:src[0],//第一张图片。

  urls: src

  })

  },

第三步:给整个富文本绑定一个名为previewImage的事件。

// 为富文本绑定previewImage事件
<rich-text class="rich-box" nodes="{{content}}" bindtap="previewImage"></rich-text>

  此时,小程序的图片预览功能完成!


马上致电网为科技:13071111008