uni-app 5.1.1版本安卓手机H5页面白屏报错

uni-app 5.1.1版本安卓手机H5页面白屏报错

操作步骤：

使用低版本安卓手机

预期结果：

使用低版本安卓手机正常显示

实际结果：

使用低版本安卓手机白屏

bug描述：

在高版本安卓和iOS手机都能正常显示，在这个OPPO 5.1.1系统的安卓手机上白屏， 在vsconsole里打印uncaught syntaxerror:unexpected identifier

信息类型 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 11.0
浏览器平台 手机系统浏览器
浏览器版本 5.1.1
项目创建方式 CLI
CLI版本号 4.5.11

image


更多关于uni-app 5.1.1版本安卓手机H5页面白屏报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 5.1.1版本安卓手机H5页面白屏报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的低版本Android系统兼容性问题。从错误信息"uncaught syntaxerror:unexpected identifier"来看，很可能是ES6+语法在低版本浏览器中不被支持导致的。

主要原因分析：

  1. 低版本Android系统内置浏览器内核较老，对ES6+语法支持不完善
  2. uni-app编译后的代码可能包含了一些新语法特性
  3. OPPO 5.1.1系统对应的浏览器内核版本较低

解决方案：

  1. 配置babel转译：在vue.config.js中配置transpileDependencies，确保所有依赖都经过babel转译
module.exports = {
  transpileDependencies: ['@dcloudio/uni-ui', '其他需要转译的依赖']
}
  1. 降低语法版本：在项目根目录创建.browserslistrc文件，指定兼容目标：
Android >= 4.4
iOS >= 9
回到顶部