微信小程序商品圖片點擊預覽功能、富文本圖片點擊預覽功能

一、圖片預覽

先放效果圖：

微信開放文檔有官方的方法，使用 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一般都是用來放組件的