内嵌钉钉h5实现图片预览功能

1.使用原因：
原本使用了组件自带的图片预览功能，但是在部分手机型号中：预览图片时，（在移动端的webview下面）左右滑动切换图片，会触发应用的“返回上一页”功能。

2.解决办法：
使用钉钉提供的图片预览Api。

3.代码展示：

1.引入
import * as dd from "dingtalk-jsapi";
import { ImagePreview } from "vant";
import Vue from "vue";
Vue.use(ImagePreview);

2.方法
picturePreview(images,index=0) {
if (dd.env.platform === "ios" || dd.env.platform === "android") {
    dd.biz.util.previewImage({
      urls: images,图片地址列表
      current: images[index],当前显示的图片链接
      onSuccess: function (res) {
        // 调用成功时回调
        console.log(res)
      },
      onFail: function (err) {
        // 调用失败时回调
        console.log(err)
      }
    });
  } else {
    ImagePreview({
      images,//需要预览的图片 URL 数组
      closeable: true,//是否显示关闭图标
      startPosition:index//图片预览起始位置索引
    });
  }
}

3.调用
--html
<div v-for="(item,index) in  imgList" :key="index">
    <img :src="'url" @click="picturePreviewCurrentPage(imgList,index)"/>
</div>

--js
picturePreviewCurrentPage(item, index) {
    let imgList = item.map((item) => {
      const url = `${window.location.protocol}//${window.location.host}/${item.url}`;
      return url;
    });
    this.picturePreview(imgList,index);
}