微信里文件小程序导不出来_小程序打开文件避坑指南

【摘要】混合H5模式下， 打开一个上传到阿里OSS的文件链接有多难？ 这里至少有四个问题:

H5和小程序的相互调用， 微信对OSS的平台抵制、HTTPS的配置， 业务域名的CNAME的不一致问题， 今天我们就一一解答。

【作者】明月、旭鹏，田甜

【导航】

一、项目需求背景

二、微信小程序中预览文档api介绍

三、微信小程序业务域名的配置

四、开发遇到的问题

一：因为我们的开发环境采用的是OSS来完成的，本着阿里系和腾讯系老死不相往来的原则，这两个是打不通的， 即使不是小程序，公众号，也是不允许直接访问OSS带图链接的。 首先我们就要对OSS进行CName的映射，将原有的OSS域名，变更成图片的二级域名，比如http://second-domain.***.cn的内容

但这里设置好之后，就会产生另外一个很扯的问题，如何验证小程序的业务域名。

所以还得将上述域名修改成A记录，指向我们服务器，以验证业务域名，验证好之后，再通过CNAME和OSS域名关联。

总结一下：

1. 修改A记录，验证小程序的业务域名
2. 将图片记录修改成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在新的页面中打开文档。

通过文档可以看到：filePath是通过小程序中wx.downloadFile这个api来下载的一个临时路径，也就是说，我们在调用openDocument这个api时，要先使用downloadFile将我们要预览的文档缓存下来，然后在通过openDocument打开我们缓存下来的数据。

代码范例：

wx.downloadFile({
    url: 'www.file.com/file.ppt',
    success: function(res) {
        const filePath = res.tempFilePath
        wx.openDocument({
            filePath: filePath,
            success: function(res) {
                //打开成功
            }
        })
    }
})

三、在使用downloadFile进行文件的下载时，假如我们现在下载文件的链接是：

https://filedownload.cn/vnc/test.doc, 前面http://filedownload.cn是文件存储的乡音服务器所在的域名， 后面是存在的目录，如果这里采用的是阿里云OSS作为文件存储， 那还需要小程序配置相应的SSL证书，这个证书必须是包含全路径的证书，也就是:

也就是:

微信小程序中如果要想下载这个文件，还需要进入微信公众平台中配置相关的业务域名和服务器域名。

业务域名配置：

1、进入微信公众平台

在左侧的导航栏中找到开发，进入。

进入之后找到开发设置。下滑可以看到服务器域名配置和业务域名配置：

1、服务器域名配置结构：

① request合法域名

1) https://filedownload.cn

② socket合法域名

③ uploadFile合法域名

④ downloadFile合法域名

⑤ udp合法域名

这里建议将：①、②、③、④、都配置上。可以配置多个。

2、业务域名配置

四、在使用downloadFile、openDocument缓存并预览文档时，经常会遇到一些问题：

问题1、文档下载失败：

如果在使用wx.downloadFile这个api时，还没有执行到打开文档的那一操 作，就提示下载失败，在苹果手机上出现比较频繁，可能跟手机存储有关，有的时候可能是手机限制了下载文件的大小，wx.downloafFile这个api本身没有限制下载文件的大小。而是在存储的时候被限制了。可以根据手机来排查问题。

问题2、文档打开显示空白：

我们在使用wx.openDocument这个api时，会先调用wx.downloadFile这个api将预览的文档缓存下来，在一个新的页面中打开。在缓存的时候会延迟1-2秒左右，如果这个文件刚刚缓存下来就立马使用openDocument加载文件，就会出现文档是空白的页面，这些问题在苹果手机上出现比较频繁。解决方案：

在执行openDocument这个api时，加入定时调度机制，延迟3-4秒执行这个函数：

setTimeout(function(){
    wx.openDocument({
        filePath: filePath,   // 打开文档路径
        fileType: file_type,  // 文件类型
        success: function (res) {
            console.log('打开文档成功');
        }
    })
 }, 3000);

问题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

问题5、 部分苹果机型不能成功下载文件：

在测试过程中，发现安卓手机、大部分的苹果手机预览都没有问题，但是同事一部iPhone X预览打不开文件；调用wx.downloadFile时失败并报downloadFile:fail net::ERR_CERT_AUTHORITY_INVALID的错误，但是非OSS域名可以直接打开文件。

出现问题设备的相关信息如下：

出现问题设备的相关信息

以下是该手机在预览demo时的视频文件：

知乎视频​www.zhihu.com

其实也就是oss的域名就会报NET::ERR_CERT_AUTHORITY_INVALID这种错误，错误的原因是证书链的缺失:

https://www.myssl.cn/tools/check-server-cert.html

用这个验证一下，很容已发现，确实中间证书不存在，通过联系我们的证书服务商，给的提示如下

百度之后发现也有在开发过程中遇到类似问题的案例，导致这个问题的原因是证书有误：

https://developers.weixin.qq.com/community/develop/doc/000c2cd04b0e280db49a4410b5c800?_at=1577907568265

本文将持续更新....

---

欢迎关注 技术团队的知乎账号 我们凭团队实例运作以下专栏， 必须干货！

互联网创业专栏 (我们小伙伴的创业历程)

与您一起聊技术 (APP、微信公众号、小程序、H5 技术总结)

互联网产品研发管理 (我们公司对产品结构的管理思路)

产品君的案例库（产品小伙伴深刻总结）