【小白必读】微信小程序 https 支持导致的问题及配置 https 支持的流程

最近泡在好几个微信小程序QQ群里,发现大家提的好多问题是由于微信小程序的 https 支持引起的,这篇文章里面对于微信小程序的 https 相关问题做一些说明。

问题汇总

哪些情况可能是由于 https 的配置导致的?

1. 小程序页面出现白屏

大部分的小程序页面需要通过服务器接口返回的数据进行填充之后才能展示,由于 https 的配置错误,导致数据无法获取到,表现在小程序的界面上就是这个页面没有数据,看起来白屏。有的小伙伴儿在开发的时候是能拿到数据,显示没有问题的,而提交审核以后却因为没有显示数据而不通过,就是这个原因。

2. 应该显示图片的部分没有内容显示

这个的原因和第一个其实是一样的,返回的图片的地址是 http:// 开头,或者返回图片路径不对。所有无法加载出来。

3. 调用 wx.downloadFile/wx.uploadFile 失败

出现上面这些问题时,终端上的调试信息差不多是这样:

微信https问题调试

问题缘起

正式上线的微信小程序仅支持 https 的请求,包括 wx.request, wx.uploadFile, wx.downloadFile 等 API,以及其他支持网络资源的组件,如 <image>

具体可以参看相关的 API 说明。

很多小伙伴儿疑惑,我的小程序接口不是 https 的呀,网上获取到的很多实例代码也都不是,为什么在微信 web 开发者工具里面都可以正常的跑起来呢?有更多的人可能在疑惑,为啥很多实例代码跑起来以后白屏或者图片不显示呢?

上面提到一个限定:正式上线的微信小程序仅支持 https 请求。正式环境为了安全,那开发环境也按照正式环境的标准来要求,就会有很多的不方便了。所以在开发环境下,微信小程序是可以支持 http 请求的,这在微信 web 开发者工具中可以配置。

微信https开关

如上图,勾选最后的选项,开发环境下,不需要 https 请求,也能够获取到网络请求的数据了。所以从网络上下载了实例代码的小伙伴儿,如果出现白屏或者图片不显示,检查一下请求的 url,检查一下这块的配置,再跑起来看看是不是已经可以了。

解决方案

确定了问题是因为没有 https 支持导致的,那接下来该怎么解决呢?

显然解决方案是为来自服务端的请求加上 https 支持,为 wx.uploadFile 等 API 的请求域名加上 https 支持。

为微信小程序配置 https 支持的步骤如下:

  1. 具有部署服务端代码的空间及访问服务的域名
  2. 根据需要申请到域名对应的 https 证书
  3. 配置 web 服务器,使其支持 https
  4. 微信小程序后台配置对应的域名
  5. 微信小程序代码上的请求链接修改为 https

空间和域名

你的服务端代码最终是要部署到空间或者云服务器上的。最终上线的微信小程序服务器必须有域名,IP 地址是不支持的。所以你还必须有个域名。

空间/云服务器,域名哪里来,怎么申请,就不说了。如果你在公司,应该有专门的人来搞这个,或者已经都有了。如果你是个人,以前没接触过,可能需要花时间了解一下。

https 证书申请

有了域名,就可以针对域名申请 https 证书了。支持 https 的证书有许多这种,现在网上可以申请到免费的 https 证书。阿里云、七牛、腾讯云、let’s encrypt 等都有。具体这里也不展开。

web 服务器配置

一般服务部署以后,是通过 web 服务器才访问到的。由于使用的技术五花八门,而你可能只接触到了开发环境,对最后的上线不太了解。这里只大略提一下。

大部分的开发人员,如果是 Java 开发后台,可能开发测试是在 tomcat 上跑的,本地测试经常访问 http://localhost:8080 这样;如果是 php,可能用的 phpstorm,运行起来以后,也是直接带个本地地址访问;又或者是 nodejs 的,命令行启动以后,内置的服务器就跑起来可以访问了;总而言之,最后的部署环境和开发时是不一样的。

针对不同的技术,有其自己特有的 https 配置方案。如果你是这种情况,根据需要查找资料吧。但一般企业应用有更通用的做法。

最后部署时,一般有 nginx 或者 apache,做反向代理及负载均衡等,然后才访问到真正的服务端业务代码。

举个例子:我用 Java 开发了后台服务程序,并且跑在 tomcat 上。然后正式对外时,我用 nginx 做反向代理。那么这个看起来就像下面图所示。

服务端部署架构

这时,通常就是对 nginx 做支持 https 的配置,以及配置反向代理。

小程序后台配置

小程序后台配置 https

当服务器的 https 支持配置完成以后,需要在小程序后台中配置上合法的服务器域名。必须针对不同的 API 使用,配置对应的域名。

修改小程序代码,用 https 访问

一切准备就绪,接下来就是修改小程序上的请求代码,用 https 访问。再将开发工具上的 https 验证的开发打开。这时候应该程序正常响应了。

总结

以上就是 https 配置导致的小程序问题,以及配置 https 支持需要的流程。每个部分都只粗略地提到,之所以没有具体说明,是因为每块都有挺多的内容可以讲。而针对小伙伴儿们不同的环境,又会有各种不同的方案。流程在这里了,每块具体内容大家自己查资料。后续我也可能针对具体内容写一些文章。欢迎到微信公众号“非典型程序员(up2048)”给我留言。