小程序解析字符串拼接多图点击放大展示

js 复制代码

detailsinfo: { // 逗号分隔的图片链接字符串（核心字段） 
    DocumentUrls: "http://192.168.0.28:53417/UpImg/20260330/20260330143414_583.png,http://192.168.0.28:53417/UpImg/20260330/20260330143416_482.png"
}

WXML 复制代码

<view class="details_item" bind:tap="previewDocImage" data-url="{{detailsinfo.DocumentUrls}}">
    <view class="details_item_title">图片：</view>
    <view class="details_item_info text-d">详情</view>
</view>

js 复制代码

  /**
 * 图片预览方法
 * 兼容：数组格式 / 逗号分隔字符串格式 的图片链接
 */
previewDocImage(e) {
  // 1. 从自定义属性中获取图片链接（容错获取，防止undefined报错）
  let url = e?.currentTarget?.dataset?.url || '';
  let urls = [];

  // 2. 格式兼容处理：数组直接用，字符串分割转数组
  if (Array.isArray(url)) {
    // 后端直接返回数组
    urls = url;
  } else if (typeof url === 'string') {
    // 后端返回逗号拼接字符串：分割 + 去空格 + 过滤空值
    urls = url.split(',').map(s => (s || '').trim()).filter(Boolean);
  }

  // 3. 兜底处理：如果dataset传参失败，直接从页面数据中获取
  if (!urls.length) {
    const detailsinfo = this.data.detailsinfo || {};
    const fallbackUrl = detailsinfo.DocumentUrls || '';
    
    if (Array.isArray(fallbackUrl)) {
      urls = fallbackUrl;
    } else if (typeof fallbackUrl === 'string') {
      urls = fallbackUrl.split(',').map(s => (s || '').trim()).filter(Boolean);
    }
  }

  // 4. 无图片时提示用户
  if (!urls.length) {
    wx.showToast({
      title: '暂无图片',
      icon: 'none',
    });
    return;
  }

  // 5. 调用微信原生图片预览API
  wx.previewImage({
    current: urls[0], // 默认显示第一张
    urls: urls, // 所有需要预览的图片链接
  });
},

点击详情后展示👇

① 容错获取传参

使用 ES6 可选链操作符 ?.，避免因 e/currentTarget/dataset 不存在导致代码报错，是小程序开发必备的容错写法。

② 格式兼容处理

数组：直接赋值使用
字符串：split(',') 分割成数组 + trim() 去空格 + filter(Boolean) 过滤空链接，保证数据纯净

③ 双层兜底保障

防止 data-url 传参失败，直接从页面 data 中重新获取图片链接，双重保险，绝不崩溃。

④ 无图友好提示

数组长度为 0 时，用 wx.showToast 提示用户，提升体验。

⑤ 调用原生预览

wx.previewImage 是微信官方 API：

current：当前显示的图片链接
urls：需要预览的所有图片数组