![d369da0c4dc2519aa75d5b3975ca5eb4.png](https://i-blog.csdnimg.cn/blog_migrate/a69abe575e23a8ba7226fa289704b438.jpeg)
【摘要】混合H5模式下, 打开一个上传到阿里OSS的文件链接有多难? 这里至少有四个问题:
H5和小程序的相互调用, 微信对OSS的平台抵制、HTTPS的配置, 业务域名的CNAME的不一致问题, 今天我们就一一解答。
【作者】明月、旭鹏,田甜
【导航】
一、项目需求背景
二、微信小程序中预览文档api介绍
三、微信小程序业务域名的配置
四、开发遇到的问题
一:因为我们的开发环境采用的是OSS来完成的,本着阿里系和腾讯系老死不相往来的原则,这两个是打不通的, 即使不是小程序,公众号,也是不允许直接访问OSS带图链接的。 首先我们就要对OSS进行CName的映射,将原有的OSS域名,变更成图片的二级域名,比如http://second-domain.***.cn的内容
但这里设置好之后,就会产生另外一个很扯的问题,如何验证小程序的业务域名。
所以还得将上述域名修改成A记录,指向我们服务器,以验证业务域名,验证好之后,再通过CNAME和OSS域名关联。
总结一下:
- 修改A记录,验证小程序的业务域名
- 将图片记录修改成OSS域名,通过CNAME映射
上述设置好之后,这个还只是基础设置, 考虑项目的正式使用:
项目的实现方式是小程序内嵌H5(web-view),客户要求可以预览word、pdf、excel等文档,刚开始的时候尝试了两种方式:
(1):在H5页面,通过a标签download属性来实现下载预览的效果,但是内嵌在小程序中无法实现
(2):通过web-view直接加载文件的链接,实现预览的效果,测试效果如下:
- 开发者工具中(PDF可以实现预览的效果,但是word和excel不可以);
- 安卓手机(PDF、excel、word无法打开);
- 苹果手机(PDF、excel、word都可以打开)。
总之,这个方式苹果可以预览,但是安卓没办法正常预览;查询资料看到可以利用小程序api(wx.downloadFile、wx.openDocument)来达到预览效果,实现过程如下:
(1)在小程序里面做一个原生页面用于预览文件(以下简称过度页);
(2)从H5跳转到小程序预览文件的页面,触发预览事件预览文件;
(3)预览点击返回按钮返回原生H5页面。
二、微信小程序中在线预览word、ppt、pdf、excel这些文件在很多的软件业务场景中都会出现,在此微信官方也提供了一套小程序api专门用于文件的预览:
wx.openDocument在新的页面中打开文档。
![2f1afe40b0ad866d7aa7427ee17d75cf.png](https://i-blog.csdnimg.cn/blog_migrate/0e60b8077f093a2bd399d3c180eaa277.png)
通过文档可以看到:filePath是通过小程序中wx.downloadFile这个api来下载的一个临时路径,也就是说,我们在调用openDocument这个api时,要先使用downloadFile将我们要预览的文档缓存下来,然后在通过openDocument打开我们缓存下来的数据。
代码范例:
wx
三、在使用downloadFile进行文件的下载时,假如我们现在下载文件的链接是:
https://filedownload.cn/vnc/test.doc, 前面http://filedownload.cn是文件存储的乡音服务器所在的域名, 后面是存在的目录,如果这里采用的是阿里云OSS作为文件存储, 那还需要小程序配置相应的SSL证书,这个证书必须是包含全路径的证书,也就是:
![07870f447c622233183cd4bdd3eaa12f.png](https://i-blog.csdnimg.cn/blog_migrate/600da6d743e4202f1d7a5300ce96ea43.png)
也就是:
![04f4106318b4fca14380983c10ddc35b.png](https://i-blog.csdnimg.cn/blog_migrate/0365d199b01dd99d17367faaa8411e0e.jpeg)
微信小程序中如果要想下载这个文件,还需要进入微信公众平台中配置相关的业务域名和服务器域名。
业务域名配置:
1、进入微信公众平台
![564099e741e3853779e7906b0a57d73f.png](https://i-blog.csdnimg.cn/blog_migrate/a729f323e3d5911f7b97f219f3dda3cf.png)
在左侧的导航栏中找到开发,进入。
![f548f01878b1e0b5341bdbf64504130c.png](https://i-blog.csdnimg.cn/blog_migrate/cb35064572cf7263e8baa59a2f0d473e.png)
进入之后找到开发设置。下滑可以看到服务器域名配置和业务域名配置:
1、服务器域名配置结构:
① request合法域名
1) https://filedownload.cn
② socket合法域名
③ uploadFile合法域名
④ downloadFile合法域名
⑤ udp合法域名
这里建议将:①、②、③、④、都配置上。可以配置多个。
2、业务域名配置
![888ebf618758d3c11195f5ec7f4f8b9b.png](https://i-blog.csdnimg.cn/blog_migrate/b2990b2468778330e6afa2f58d67ab95.png)
四、在使用downloadFile、openDocument缓存并预览文档时,经常会遇到一些问题:
问题1、文档下载失败:
如果在使用wx.downloadFile这个api时,还没有执行到打开文档的那一操 作,就提示下载失败,在苹果手机上出现比较频繁,可能跟手机存储有关,有的时候可能是手机限制了下载文件的大小,wx.downloafFile这个api本身没有限制下载文件的大小。而是在存储的时候被限制了。可以根据手机来排查问题。
问题2、文档打开显示空白:
我们在使用wx.openDocument这个api时,会先调用wx.downloadFile这个api将预览的文档缓存下来,在一个新的页面中打开。在缓存的时候会延迟1-2秒左右,如果这个文件刚刚缓存下来就立马使用openDocument加载文件,就会出现文档是空白的页面,这些问题在苹果手机上出现比较频繁。解决方案:
在执行openDocument这个api时,加入定时调度机制,延迟3-4秒执行这个函数:
setTimeout
问题3、页面跳转问题(以下仅为个人实现方式,如果有更好的方法欢迎交流补充):
触发预览函数的时机:开始尝试的时候将触发预览函数写在过度页onShow函数里面,小程序预览文件会重新打开打开一个页面,当我们结束预览的文档,点击返回之后回到过度页并触发onShow函数,导致不断打开预览页面,将触发预览的函数放在onLoad函数里面解决这个问题;
返回H5页面:实际应用时,在预览页面点击返回,应该直接返回H5页面,实际点击返回小程序会返回到过度页,解决方式是,设置一个状态,当成功打开预览页面后,记录这个状态为false,从预览页面返回时会触发onShow函数,在onShow函数进行判断,为false时跳转到H5页面。
问题4、OSS链接打不开的问题:
下载文件wx.downloadFile一直报错:downloadFile:fail Error: unable to verify the first certificate
用手机进行测试,发现ios手机可以打开,但是安卓打不开,百度之后,解决方式如下:
用tomcat8 改成 protocol="org.apache.coyote.http11.Http11NioProtocol
![6b88297f74fd233c7d2d414371be4aa5.png](https://i-blog.csdnimg.cn/blog_migrate/1831ae701024b89533b52df3e2054dc1.jpeg)
问题5、 部分苹果机型不能成功下载文件:
在测试过程中,发现安卓手机、大部分的苹果手机预览都没有问题,但是同事一部iPhone X预览打不开文件;调用wx.downloadFile时失败并报downloadFile:fail net::ERR_CERT_AUTHORITY_INVALID的错误,但是非OSS域名可以直接打开文件。
出现问题设备的相关信息如下:
![44e134510c3021da373635876ca71c21.png](https://i-blog.csdnimg.cn/blog_migrate/2640d22d6643322815f3c9152be170e3.png)
以下是该手机在预览demo时的视频文件:
知乎视频www.zhihu.com其实也就是oss的域名就会报NET::ERR_CERT_AUTHORITY_INVALID这种错误,错误的原因是证书链的缺失:
https://www.myssl.cn/tools/check-server-cert.html
用这个验证一下,很容已发现,确实中间证书不存在,通过联系我们的证书服务商,给的提示如下
![37d6f58392e2dde112b78d39b37b94fa.png](https://i-blog.csdnimg.cn/blog_migrate/03bbfd00d987359b36bffd1aa437c7cb.png)
百度之后发现也有在开发过程中遇到类似问题的案例,导致这个问题的原因是证书有误:
https://developers.weixin.qq.com/community/develop/doc/000c2cd04b0e280db49a4410b5c800?_at=1577907568265
本文将持续更新....
欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏, 必须干货!
互联网创业专栏 (我们小伙伴的创业历程)
与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)
互联网产品研发管理 (我们公司对产品结构的管理思路)
产品君的案例库(产品小伙伴深刻总结)