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

柔情只为你懂 2021-07-26 11:52 6373阅读 1赞

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

## 写在前面 ##

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

*  友情提示，为获得更好的观看或者阅读体验，可点击下方链接查看我在**我来**的个人笔记（无广告）  
    [UNI-APP H5应用白屏（空白页）解决方案][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 功能内核版本和手机系统有关，兼容性问题依然存在

--------------------

（完）

[UNI-APP H5]: https://www.wolai.com/uMRzzQ4jxiTkXQDwgcRhTm?theme=light

发表评论取消回复

表情：

评论列表（有 0 条评论，6373人围观）

还没有评论，来说两句吧...

相关阅读

相关【uniapp】H5向uniapp通信存储数据——H5如何传递数据到uniapp方法的解决方案

最近在做H5号码认证无感登录，发现市场上的H5登录文档不健全，没有适合uniapp的，综合对比了多家，找了一家个推的接入，由于SDK、demo都是H5，精力有限，于是打算...

柔光的暖阳◎/ 2024年04月20日 22:30/ 0 赞/ 135 阅读

相关 Android应用App启动白屏（黑屏）问题解决

Android应用App启动白屏（黑屏）问题解决点击Android手机桌面的应用App icon图标后，Android启动这个应用，正常情况下会立即看到并进入到开发者自

小咪咪/ 2023年10月17日 23:16/ 0 赞/ 83 阅读

相关 uniapp chooseLocation 在h5端定位不准确解决方案

前言项目需要通过选取地址来获取经纬度，进而计算两点的距离。直接使用uni.chooseLoaction 发现偏差实在是太大。解决方案使用腾讯的 [地图选点组

缺乏、安全感/ 2023年03月01日 10:47/ 0 赞/ 1 阅读

相关 uniapp打包H5空白页面或者刷新404问题

uniapp的路由跟vue一样，有hash模式和history模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果

男娘i/ 2023年01月04日 14:37/ 0 赞/ 2262 阅读

相关 uniapp打包成H5，为什么本地访问页面空白？

1：点击菜单栏发行，点击选择网站-H5手机版， ![662ab1873c444fdd0b6b053cdfbf9b1b.png][] 2：在网站域名这一栏填写，网站域名，例如

妖狐艹你老母/ 2022年12月19日 03:38/ 0 赞/ 1335 阅读

相关 uniapp H5扫码解决方案

通过webview来解决这个问题 webView引入的代码案例 <!DOCTYPE html> <html> <head>

拼搏现实的明天。/ 2022年10月20日 13:51/ 0 赞/ 287 阅读

相关阿里解决「前端白屏」的方案

![37b1ca1a94fbcc03bb09f0dda6025d8b.png][] 作者 | ES2049 / 金城武原文 | https://zhuanlan.zh

亦凉/ 2022年09月05日 12:41/ 0 赞/ 343 阅读

相关 HTML5-canvas绘图黑屏白屏解决方案（详解双缓冲绘图机制）

HTML5-canvas绘图黑屏白屏解决方案（详解双缓冲绘图机制）使用canvas绘图的前端工程师可能都会遇到过canvas绘图黑屏、白屏的问题。以前写过一篇文章描述过

忘是亡心i/ 2022年07月13日 14:10/ 0 赞/ 2076 阅读

相关启动白屏终极解决方案

React Native启动白屏是一个很普遍但又很严重的问题，网上也有很多文章，这里就此问题，从分析到常用的解决方案做一个简单的总结。先看图，白屏的现象: ![白屏现象]

曾经终败给现在/ 2022年05月21日 03:23/ 0 赞/ 505 阅读

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

UNI-APP H5应用白屏（空白页）解决方案写在前面最近公司有一些临时业务急需上线，考虑到H5应用测试部署的便捷性，因此从技术上采用H5网页的

柔情只为你懂/ 2021年07月26日 11:52/ 1 赞/ 6374 阅读