资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/微信打开https页面显示空白解决记录

微信打开https页面显示空白解决记录

番茄西红柿 / 3796人阅读

摘要：证书文件填写的内容注意一定要清除掉多余的空白行，证书私钥填写的内容重新配置的阿里云打开对应域名的配置设置选择刚才配置的证书，保存后安卓微信访问参考关于安卓手机微信访问链接白屏的问题证书放在阿里云上时绿时红原文

背景

利用阿里oss搭建了一个静态服务器，存放一些静态资源和h5页面，并且配上了阿里cdn服务（Lets Encrypt证书），接下来测试https链接，在浏览器中测试也ok(chrome地址栏显示绿色的安全标识)，ios的微信测试了下也是ok的，但是安卓微信打开显示空白，右上角的...打开功能选项，也没有复制链接（正常打开的页面会有）

分析

1.会不会是页面兼容性的问题？之前也有一些h5没做好兼容，最后显示空白，可以写个测试的html访问测试（我没试），但是通过点击右上角...出现的功能选项中没有复制链接功能，判断没有请求成功，而不是页面的兼容性导致

2.会不会是机器和网络的问题？多台机器检测和切换wifi、4g测试后，都显示空白，排除这个原因

3.会不会是因为https的原因？修改链接为http协议访问（没有强制http跳转https，所以http协议还是能访问）,发现可以访问，由此确认是https的原因

解决 查找解决方案

百度关键词微信 https 打不开后，查看了几篇类似文章（问答）和对应的浏览后发现，发现是证书没上传正确，阿里云的ca管理原由证书上传，证书文件部分应该上传完整证书链的pem编码，即fullchain.pem（之前上传的是cert.pem）

重新上传证书

Let’s Encrypt产生的目录结构为

├── cert.pem -> 秘密
├── chain.pem -> 秘密
├── fullchain.pem -> 秘密
├── privkey.pem -> 秘密

cert.pem是证书，chain.pem是证书链编码,fullchain.pem是cert.pem和chain.pem的证书集合,privkey.pem是私钥文件

阿里云打开CA证书服务-我的证书-上传原有证书,

证书名称按规则取（本来想说随便取，但是想了想证书一多，是不是要根据名称让自己想起来这个证书是干嘛的）。

证书文件填写fullchain.pem的内容(!!! 注意一定要清除掉多余的空白行)，

证书私钥填写privkey.pem的内容

重新配置cdn的https

阿里云打开CDN-对应域名的配置-https设置选择刚才配置的证书，保存后安卓微信访问ok

参考

关于安卓手机微信访问https链接白屏的问题

lets encrypt 证书放在阿里云 CDN 上时绿时红

原文

GPU云服务器 云服务器 微信内h5页面打开小程序 空白页面 页面空白 网站php打开空白

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/33793.html

相关文章

  • 微信打开https页面显示空白解决记录

    摘要：证书文件填写的内容注意一定要清除掉多余的空白行，证书私钥填写的内容重新配置的阿里云打开对应域名的配置设置选择刚才配置的证书，保存后安卓微信访问参考关于安卓手机微信访问链接白屏的问题证书放在阿里云上时绿时红原文 背景 利用阿里oss搭建了一个静态服务器，存放一些静态资源和h5页面，并且配上了阿里cdn服务（Lets Encrypt证书），接下来测试https链接，在浏览器中测试也ok(c...

    ddongjian0000 评论0 收藏0

  • 记录微信小程序的坑

    摘要：除官方外的参考文章微信小程序实例创建下发模板消息实例手把手教你开发微信小程序之模版消息开发教你突破小程序模板消息的推送限制获取用户信息接口的废弃问题接口是获取用户信息昵称，头像等的接口，在官方文档上写是即将废弃。 ----------------更新-------------- 2018年10月10日官网3个接口废弃的通知： 1、分享监听接口分享消息给好友时，开发者将无法从callba...

    EastWoodYang 评论0 收藏0

  • 微信小程序知识总结及案例集锦

    摘要：对微信小程序进行全局配置，决定页面文件的路径窗口表现设置网络超时时间设置多等。 微信小程序知识总结及案例集锦 微信小程序的发展会和微信公众号一样，在某个时间点爆发 学习路径 微信小程序最好的教程肯定是官方的文档啦，点击这里直达 微信官方文档 认真跟着文档看一遍，相信有vue前端经验的看下应该就能上手了，然后安装 微信小程序开发者工具 新建一个quick start项目，了解代码结构，...

    sean 评论0 收藏0

  • 从前端界面开发谈微信小程序体验

    摘要：在开发之前你要有微信开发者工具。同时为了更适合开发微信小程序，还对进行了扩充以及修改，直接帮我们把适配的一部分工作都做了，比如他的，可以根据屏幕宽度进行自适应，规定屏幕宽为。 本文由云+社区发表 这段时间有幸加入了一个关于微信小程序的项目开发组，从无到有的根据文档自行学习了小程序的开发过程，前面已经有几位前辈的文章珠玉在前，我这里就先从前端界面的开发方面谈一谈小程序以及我所遇到的问题吧...

    hellowoody 评论0 收藏0

  • 从零开始：微信小程序新手入门宝典《一》

    摘要：为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习一微信小程序的特点张小龙张小龙全面阐述小程序，推荐通读此文小程序是一种不需要下载安装即可使用的应用，它出现了触手可及的梦想，用户扫一扫或者搜一下即 为了方便大家了解并入门微信小程序，我将一些可能会需要的知识，列在这里，让大家方便的从零开始学习； 一：微信小程序的特点 张小龙：张小龙全面阐述小程...

    whataa 评论0 收藏0

发表评论

登陆后可评论

0条评论

番茄西红柿

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<