钉钉小程序 - - - - - 常见文件附件预览逻辑

1. 页面渲染

  <view
    a:for="{{item.value}}"
    a:for-item="file"
    data-url="{{file.url}}"
    data-name="{{file.value_name}}"
    catchTap="openLink"
  >
    {{file.value_name}}
  </view>

file 只展示文件名，点击后通过 data-url 和 data-name 把文件信息传给 openLink。

2. 文件预览流程

文件点击后会走 openLink，流程可以概括成三步：先转存，再校验，最后预览。

openLink(e) {
  const { url, name } = e.target.dataset; // name的格式应该是 xxxx.pdf/excel 等带后缀的
  if (!url) return;

  dd.showLoading({ content: '文件转存中...' });
  dd.saveFileToDingTalk({
    url,
    name: name || '',
    success: (res) => {
      dd.hideLoading();
      const [fileInfo = {}] = res.data || [];
      const { spaceId, fileId, fileName, fileSize, fileType } = fileInfo;
      if (!spaceId || !fileId) return dd.showToast({ type: 'fail', content: '文件转存失败' });

      dd.previewFileInDingTalk({
        corpId: dd.corpId,
        spaceId,
        fileId,
        fileName: fileName || name || '',
        fileSize,
        fileType,
        fail(err) {
          dd.showToast({ type: 'fail', content: (err && err.errorMessage) || '文件预览失败' });
        },
      });
    },
    fail(err) {
      dd.hideLoading();
      dd.showToast({ type: 'fail', content: (err && err.errorMessage) || '文件转存失败' });
    },
  });
}

这里的关键点是：文件不是直接拿原始 URL 打开，而是先调用 dd.saveFileToDingTalk 转存到平台侧，再用返回的 spaceId、fileId 去预览。这样做的好处是兼容平台内部的文件预览能力，也能统一兜底失败提示。

3. 这个方案的特点

1. 模板层只负责展示和绑定事件，不写复杂逻辑。
2. 文件先转存再预览，兼容平台文件能力。
3. 每一步都有兜底提示，避免用户看到空白或无响应。

4. 小结

这套 file 附件预览其实就是把“展示”、“转存”、“预览”拆开处理：

• 展示层决定用户看到什么
• 转存层解决平台兼容问题
• 预览层负责最终交互体验