UNI-APP H5应用白屏（空白页）解决方案

UNI-APP H5应用白屏（空白页）解决方案

写在前面

        最近公司有一些临时业务急需上线，考虑到H5应用测试部署的便捷性，因此从技术上采用H5网页的方式快速响应业务的需求，由于自己对uni-app 比较熟悉，之前也有用过uni-app开发过微信小程序，整理体验都还不错，这次也就采取uni-app开发H5应用，结果开发测试都还好，上线之后部分IOS用户反馈应用无法打开，具体现象表现为链接打开显示空白页、白屏。针对这个问题，也是困扰了我两三天，今天终于找到问题所在，特此记录，同时把我这段时间怕坑的经历分享给大家，希望广大开发者少走弯路。

• 友情提示，为获得更好的观看或者阅读体验，可点击下方链接查看我在我来的个人笔记（无广告）
  UNI-APP H5应用白屏（空白页）解决方案

可能的原因

额外补充下，根据uni-app 官网文档介绍各操作系统版本支持情况如下 ：

• IOS≥8
• 安卓≥ 4.0

CSS３　不兼容

• 首先确定的是flex是否兼容，根据uni-app官方文档介绍flex的兼容性是ok的，然后定位了代码中使用到的几处CSS3 属性，经 can I use 查询均是支持的 因而可以排除是CSS3 的问题

ES6 不兼容

• 通过HX创建的uni-app打包是默认会将ES6代码打包为ES5，若是通过cli 方式创建的uni-app项目，则需要安装babel进行转换，这方面的文章和教程非常的多，此处不再赘述。

关于通过cli方式创建的uni-app项目如何将ES6转ES5还有一个特别的方法，在次提醒下：可以将cli项目下的src目录通过HX打开，此时在HX环境下编译打包，就会走HX的打包逻辑，也就会自动开启ES6转ES5 ，亲测有效！

ES6 检查是尤其要注意是否使用了async await 语法，const等关键字

如果是ES6导致的不兼容问题，通过上述的方法将ES6转换为ES5 语法应该就能解决白屏问题！

服务器带宽限制

• 若访问量大，并发高，达到服务器带宽上限，导致客户端无法从服务器获取资源，也会导致白屏问题，不过此时应该是大部分用户（无差别）都是白屏现象。为什么要额外提一下服务器带宽限制呢，因为在项目刚上线的时候确实发生过这种情况，特此记录！

如果是服务器带宽限制那么问题相对好解决，一是升级服务器配置（加钱），二是优化项目结构，压缩图片大小等减少资源传输降低带宽（优化）。

uni-app中使用了Vue的全局混入语法mixins

• 经过我多次对问题的排查，终于定位到当前项目出现白屏的原因：**使用的Vue的全局混入语法 **

解决办法，将全局混入变为按需引入，从而问题解决，如果大家在uni-app 项目中有使用到全局混入，一定要注意在发布成H5应用是，在低版本IOS系统中将无法打开网页，而是显示白屏。

• 经过初步测试全局混入在IOS 11 及其以上的系统中正常，在IOS10 及其以下的系统总显示为白屏

其它我尝试过的方案

为了解决白屏问题，在没有思路的时候我尝试过以下办法，仅供参考

发布成微信小程序

• 发布成微信小程序，可以完全抹平兼容性问题，但是要注意微信小程序的发布上线受微信审核周期的限制，如果是紧急项目或是需求变更频繁的项目采用此方案需要慎重

通过web-view 的形式嵌入到微信小程序中

• 经测试该方案无法解决兼容性问题，微信小程序的web-view 功能内核版本和手机系统有关，兼容性问题依然存在

---

（完）