企业微信ios无法预览文件的解决过程

最近在项目中遇到一个需求，在企业微信内收到推送，打开推送进入h5页面的一个详情页。在详情页面有一个附件预览的功能。项目里文件是使用阿里的oss服务器(这也是一个坑，后面说)。项目起初是根据使用ossKey拿到后端的返回的文件路径，然后使用a标签进行文件下载预览。一切开发完毕以后，进行测试。在安卓机上预览文件毫无问题。但是ios预览文件，doc，xls，ppt可以预览，但是docx，xlsx，pptx等以x结尾的都提示 它可能已损坏或为未知格式文件。然后尝试各种方案解决，话不多说开干。

最初使用浏览器下载各种方式，例如window.open,使用iframe等等均以失败告终。然后想到让后端自己去请求oss服务器的文件，以文件流的形式返回给前端，前端接收下载，还是不行。于是准备采用终极方案，引入微信jsSDK，使用previewFile方法，来预览文件。然后按照官网一切配置就绪后，开始尝试。发现wx.config注入权限验证失败。好，开始排查问题

首先，和后端一起确认signature是否正确，这里给一个校验签名是否正确的地址。work.weixin.qq.com/api/jsapisi…

确认签名没问题后，后端开始让我确认是否是传入url的问题，好家伙，这一查url还真的有问题。我是使用window.location.href.split("#")[0]来获取url，ios在和android对这个兼容不一样，ios的window.location.href是首次进入页面的时候就获取了。然后后面路由发生变化，这个值不会再变化了。但是安卓则是每次切换路由后，这个值都会跟着变。(react项目使用hashRouter)。

if (/iphone/.test(navigator.userAgent.toLowerCase())) {window._url = location.href.split("#")[0];}复制代码

然后使用这段代码把url存下来用来注入权限。哦耶，终于成功了。接着兴致冲冲的跑去测试，点击预览。嗯？为什么没反应。继续研究，使用wx.checkJsApi校验是否支持，结果也是支持的。去查查看有没有类似情况，还真有。于是采用别人踩坑留下的方案

wx.invoke("previewFile", { url: "xxxx", // 需要预览文件的地址(必填，可以使用相对路径) name: "fileName", // 需要预览文件的文件名(不填的话取url的最后部分) size: "size", // 需要预览文件的字节大小(必填)});复制代码

保存，测试，点击有反应了。但是每次开始下载都是提示 下载失败，请检查网络后重试。好不容易走到这一步，你又整什么幺蛾子，没办法继续找问题所在，然后发现文件url放一个网络文件的地址，是可以成功的。确认是使用oss服务器的问题（前面说的坑）。到这里有一个解决方案就是换其他的第三方服务，但是对我们的项目来说不现实。于是想着做一次请求转发，前端去请求后后端，后端去请求oss服务器上的文件，写完以后测试是可行。至此终于解决了这个问题。但是这个做法有一个弊端就是对需要权限校验的文件请求就不适用了。所以还有可选方案后端把文件请求回来以后放在自己的服务器上，返回一个url给前端使用，后端定时删除文件。（暂时没有更好的想法）