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

问题描述

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

问题机型:锤子坚果 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

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

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

Subscribe to 1c7 的博客