钉钉小程序 - - - - - 常见文件附件预览逻辑
常见文件附件预览逻辑
- 1. 页面渲染
- 2. 文件预览流程
- 3. 这个方案的特点
- 4. 小结
这篇只讲文件附件的预览链路。
页面模板负责把点击入口绑好，真正的预览逻辑在 JS 里完成。
1. 页面渲染
<view a:for="{{item.value}}" a:for-item="file" >2. 文件预览流程文件点击后会走openLink，流程可以概括成三步：先转存，再校验，最后预览。
openLink(e){const{url,name}=e.target.dataset;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)returndd.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. 这个方案的特点
- 模板层只负责展示和绑定事件，不写复杂逻辑。
- 文件先转存再预览，兼容平台文件能力。
- 每一步都有兜底提示，避免用户看到空白或无响应。
4. 小结
这套file附件预览其实就是把“展示”、“转存”、“预览”拆开处理：
- 展示层决定用户看到什么
- 转存层解决平台兼容问题
- 预览层负责最终交互体验