微信小程序商品图片点击预览功能、富文本图片点击预览功能

时间：2024-03-17 13:59:34

一、图片预览

先放效果图：

微信开放文档有官方的方法，使用 wx.previewImage()

首先，我们可以新建一个util.js文件，在这里统一封装方法

/**
 * 图片预览
 * @param {string} current 当前显示图片的http链接 
 * @param {array} urls 需要预览的图片http链接列表
 */
function previewImage(current, urls) {
  if (!urls || urls === null) return
  // 确保数组的图片是绝对路径，否则加上自己公司服务器的请求头
  for (let key in urls) {
    if (urls[key].indexOf(\'thhp\') < 0) {
      urls[key] = \'https://aimpcdncs.app307.com/\' + urls[key]
    }
  }
  wx.previewImage({
    current: current,
    urls: urls 
  })
}

module.exports = {
  previewImage: previewImage
}

然后在js页面调用这个方法

// ../../../utils/util 是util文件的路径
import { previewImage } from \'../../../utils/util\'

/**
* 商品图片预览
*/
preview(event) {
  // this.data.pictures 这是图片数组
  previewImage(event.currentTarget.dataset.src, this.data.pictures)
}

最后在图片上绑定这个方法就好啦~

<image bindtap="preview" src="{{mTools.formatImgUrl(item)}}"  lazy-load="true"></image>

二、富文本图片点击预览功能

这个更简单，直接在微信开放文档下载Parser插件https://github.com/jin-yufeng/Parser/tree/master/parser

下载后按照这个步骤来就好啦

这是components目录下的parser，components一般都是用来放组件的

 

 

 

相关文章