需求：微信公眾號上的圖片點選可以實現放大預覽

我的專案中，微信公眾號上的圖片和其他內容是來自後臺介面，（管理平臺上用百度編輯器Editor新增的）

如何實現：

圖片是根據介面渲染出來的，那麼就先找到這些圖片，然後再給圖片繫結click事件，點選的時候進行預覽

實現過程：

最開始我想到的是vant的ImagePreview圖片預覽元件，

官網是這麼描述的

一、給富文字框裡的每個img繫結click事件

　　給外層標籤加個class名

    editorImgs() {
      this.imgList = document.getElementsByClassName("editor-desc")[0].getElementsByTagName("img");
      console.log(this.imgList.length);
      let arr = []
      for (let i = 0; i < this.imgList.length; i++) {
        arr.push(this.imgList[i].src)
        this.imgList[i].setAttribute("class", "preview-img");
        this.imgList[i].addEventListener("click", (e) => {
          this.show(arr,i);
        });
      }
    },

二、點選圖片獲取開啟相應圖片預覽的方法

   show(arr,index) {
      ImagePreview({
        images: arr,
        startPosition: index
      })
    },

這裡有個小坑，執行this.editorImgs()方法時，如果放到mounted 裡面， this.imgList.length的長度是0，

所以當進入詳情頁面時，放到請求詳情介面下面，用$nextTick

this.$nextTick(() => {
     this.editorImgs()
})

功能是實現了，也能實現圖片預覽了，但是圖片過大過長時，能放大但是滑動不了，效果不太理想，就想找下看是否還有更好的解決辦法

偶然間在微信公眾號文章裡看到有圖片，放大能實現全屏預覽效果　　

先下載weixin-js-sdk外掛，然後引入

import wx from 'weixin-js-sdk'

把上面的show方法改下：

  show(arr,index) {
      wx.previewImage({
        current: arr[index],
        urls: arr
      })
   },

構建後在移動端檢視，實現了全屏預覽功能。

效果檢視：