2018-7-30 记录一次微信白屏问题的解决方法

问题描述

问题时间：2018-7-30
问题网站：https://beauty.wittcism.com
问题描述：在安卓端微信内，点击链接（ https://beauty.wittcism.com ）进入微信内置的浏览器。看到的是白屏。什么都没有（如下图）

问题机型：锤子坚果 Pro 1，华为畅享7
成功机型：Samsung Galaxy Note 5(2015), iPhone X(2017)
背景信息：这是一个普通静态网站，是网上找 HTML 模板然后修改而成的。不是单页应用比如 Vue.js React.js Angular.js，也不是静态网站生成出来的比如 Hexo Jekyll

解决方法

Nginx 配置文件里 HTTPS 证书用 .pem 格式（而不是 .crt 格式）
比如：

  ssl on;
  ssl_certificate     /var/www/beauty.wittcism.com-https/ca_bundle.pem;
  ssl_certificate_key /var/www/beauty.wittcism.com-https/private.key;

注意这里的 ca_bundle.pem;

具体我是怎么解决的

尝试1：首先怀疑是 Javascript 的问题，可能是某个地方用了 ES6 导致报错。
试过 USB 线连电脑看真机调试的结果。
chrome://inspect/#devices
在 Chrome remote debugger 里的 Console 里什么错误也没有，
并不是 Javascript 报错而导致的问题。

尝试2（成功）：在网上搜微信白屏，看到几篇文章讲是 HTTPS 证书链的问题。
抱着试一试的心态看看管不管用。
其实网站本身已经有 HTTPS 了。
用的是 www.sslforfree.com 申请的免费证书。
有3个文件

• ca_bundle.crt
• certificate.crt
• private.key

此时我的 Nginx 的配置文件里写的是

    ssl on;
    ssl_certificate     /var/www/xxx/certificate.crt;
    ssl_certificate_key /var/www/xxx/private.key;

注意这里用的是 certificate.crt 和 private.key。
路径里的 xxx 是我隐藏掉了文件夹名信息。

我们有目前有 2 个 .crt + 一个 .key文件，但我们需要的是 PEM 文件。
看了下网上信息，其实 pem 文件就是 certificate.crt + ca_bundle.crt（按这个顺序）拼起来。
certificate.crt 和 ca_bundle.crt 都是长这样：

-----BEGIN CERTIFICATE-----
    ....(省略内容)
-----END CERTIFICATE-----

所以我新建了一个 ca_bundle.pem 文件（你可以取其他名字，后面只要 nginx 配置里指向这个名字即可）
然后手工复制黏贴，拼接 certificate.crt + ca_bundle.crt（按这个先后顺序）

-----BEGIN CERTIFICATE-----
    [certificate.crt 的内容]
-----END CERTIFICATE-----
-----BEGIN CERTIFICATE-----
    [ca_bundle.crt 的内容]
-----END CERTIFICATE-----

然后 nginx 用这个 pem 文件

  ssl on;
  ssl_certificate     /var/www/xxx/ca_bundle.pem;
  ssl_certificate_key /var/www/xxx/private.key;

最后一步：让 Nginx 生效

别忘了改了 Nginx 配置之后要让 Nginx 再次读入这个配置文件才行。
先用 sudo nginx -t 测一下是否正确。
如果看到

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

就是对的。
这时候再 sudo nginx -s reload

全文完。
这个浪费了我接近一下午的时间。希望这篇文章节省了你的时间