1.使用uni.previewimage(wx.previewimage)的背景
项目中有一些地方需要展示图片,使用官方提供的原生API可以省去我们很多的开发时间,可关键是项目内部正常使用没问题,但!偏偏有个但字!当我们项目测试给我提出说我们的项目内嵌到别的项目中的时候,点击展示图片,展示全黑! 当时真的心态都炸了,使用官方原生的API竟然除这个问题,我一度以为自己要重新手写一个展示图片的页面,不过在后来,我找测试要了账号,成功复现阿这个问题。
2.复现问题步骤
因为我们项目有内嵌到别的项目中去,所以找测试要了别的项目的测试账号,经过排查,
当经过别的项目进入到我们的项目中后,点击预览图片会进入到一个
https://xxx.com/preview-image?query={>"urls":["https://xxx.png"],"current":"https://xxx.png","XXX":"XXX"}`的页面而不经过第三方项目,直接通过我们的项目,会进入到
https://xxx.com/preview-image的页面。问题到这里就暴露出来了,后面
?query={"urls":["https://xxx.png"],"current":"https://xxx.png","XXX":"XXX"}这个参数是为什么出现的??
3.解决思路及其方案
思路及其方案:主要考虑为什么这串参数会出现?经过查看代码,当前页面只是使用了
uni.previewimage(wx.previewimage)的api,并没有其他东西有能力修改url, 所以从全局开始考虑,说到全局考虑,直接就能联想到路由,因为我们项目是使用了uni-simple-router插件,所以我们能在uniapp中进行全局路由拦截及其重定向,而上面query参数中有一个"XXX":"XXX"参数,这个参数是我们为了避免一个重要参数丢失,而特意在全局路由拦截中进行每个页面的携带的,所以我就想到了是不是因为做了全局设置的路由拦截添加参数导致的,所以在路由拦截中做了一个白名单检验,对白名单的路由不进行路由添加"XXX":"XXX"的参数,修改完后,推到测试环境,重新进行复现,发现问题已经消失,到此解决这个问题。
3.后续总结
其实最初的想法是想找到
/preview-image这个路由对应的页面,直接修改其源码让他能够兼容,可是找起来比较麻烦,而且考虑到后续就算改了,经过自动化构建的时候,npm i重新下载后的源码也是未经修改的,不利于后续维护,所以继续找其他解决方案,最后使用了上述的解决方案,在此记录一下。